The first one has this code: <script type=‘text/javascript’ src=‘http://www.hotelscombined.com/SearchBox/142080’></script> which has been generated by combined hotels.com. They have told me I can use my own css style so I have tryed placing the follwing styles in my custom css section but nothing has changed:
when you say dynamic do you mean the original code ( from the script ) will work in my css? I’m not exactly sure about the works of it.
I tried your suggestion above. I copied and pasted it but no difference
Thes classes ( label.hcsb_checkinDateLabel ) do I need to add them to my pages anywhere or if I am adding the styles to my custom css is it that it just fins it from the script line?
The ids that you were using are not in your page. If you look with Firebug at your html you will see that those ids seem to change every time you refresh.
I tried your suggestion above. I copied and pasted it but no difference
Yes it did. I can see that the label Check-in has changed its styled and the checkinmonth has a square border both of which are applied by the styles I gave you. You then just had to look at the html and grab the appropriate class names and style those other elements (or style them via a parent classname in one go) .
You can grab the class names from the above html and just apply styles as required but make sure you prefix them with #main to over-ride the original id style.
I’m just on the way out the door so have a go yourself and I;ll look back later to see if you’ve worked it out
I manages to get the labels changed but it’s like you said, upon refresh they go back or change. Do I need to make rules for all of these options and values you mention abouve? Not sure how it goes.
also I have tried quite a few variations to get the border radiuses to 0px for the background and the fields but everything is still round
The answer is still much the same and the code I gave you before will work if added in the right place. I’ve added more weight to it in case you had placed it in the wrong section so try this again as it is working locally.
There is an issue though where you click the select that says “Guests” and you select the need more rooms. The script then adds an absolute element with extra inputs at the end of that section but it will overlay any other content in the way. There is nothing I can do about that as the html is added dynamically to the end of the html page and then placed absolutely from the viewport into position.
So let me try and understand this. If there is javascript ( externally or internally ) that has inline styles I can simply overide it by placeing more detailed css to it ( #page#main )
How though did you find the #main and #page and know to use these? If I did inspect element I looked after the closing head tag and I couldn’t see these id’s?
What was your process of finding and knowing what id’s?
The only way to over-ride inline-css (css that is in the tag itself) is to use !important on the end of the rule.
The #page and #main rules I added were to over-ride the external css that your script was adding where it was using a dynamic id reference. The id was changing on the element but the class was always the same so I used the class instead but as ids carry more weight I had to prefix the class with some ids from your parent wrappers (or I could have just used !important on all values but !important should be avoided unless there is no other easy choice).
I just used Firebug (in Firefox) and looked higher up the html to find suitable references. In Firebug you can see the html and see which block is inside other block etc (Chrome and IE have similar developer tools).
I seee, and thanks for the info on !important too!
I also see about the parent id’s not too, just looking up from the id or class you want to change.
I’m trying to do the same for the border radius of the background. I’m using this code:
but it’s not changing. I’ve tried some variations of the id but nothing seems to change it. What am I doing wrong here? Is it the way I’m using the id?
You can’t use those ids beginning with SB because they are dynamic and will change every time the page is loaded (I have mentioned this in nearly every post so far :)).
You need to grab the class that is on the element you want as that will not change.
Now I got you, I heard you when you said about them being dynamic although I didn’t get that it was the sb ones in particular but I’m understanding it the more we go on. I really appreciate your help and to be honest practically doing it this way is what teaches me.
so I’m struggling trying to get the check in and out labels to change. No matter what I put in the css it will not change sixe or anything and the date picker will not go in the boxes.