Styling a form

HTML & CSS
1

I have a site http://betabookhotels.com, as you cn see there are two forms on the right sidebar.

I need the first one to look like the second one.

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:

#SB_61dbd217e3 label { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #BBB; font-weight: 900; text-transform: uppercase; }

#SB_2bcead2309 { border-radius: 0px; -webkit-border-radius: 0px; }

Can anyone help me with what I’m doing wrong or what needs to be done for me to get this form the same as the second?

Much appreciated!

2

HI,

It looks like those ids are dynamic and therefore will change.

Try using the classes but prefix it with an id from your page so that you maintain weight.

e…g


#main label.hcsb_checkinDateLabel { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #BBB; font-weight: 900; text-transform: uppercase; }
#main .hcsb_checkinMonth { border-radius: 0px; -webkit-border-radius: 0px; }

Use firebug and grab the classes of the elements you want.

3

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?

4

What are you exactly aiming for? What you want to do?

5

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.:slight_smile: 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) .


<div class="hcsb_checkinDateWrapper hcsb_clearfix">
                <label class="hcsb_checkinDateLabel">Check-in</label>
                <div class="hcsb_checkinDateContent">
                    <input type="hidden" class="hcsb_checkinDate hasDatepicker" id="CHECKIN-SB_37c8fa1f75" value=""><img class="ui-datepicker-trigger" src="http://www.hotelscombined.com.au/Images/hc_pixel.gif" alt="..." title="...">


<select name="Day" id="CHECKIND-SB_37c8fa1f75" class="hcsb_checkinDay"><option value="-1">Day</option>
<option value="1">Tue 1</option>
<option value="2">Wed 2</option>
<option value="3">Thu 3</option>
<option value="4">Fri 4</option>
<option value="5">Sat 5</option>
<option value="6">Sun 6</option>
<option value="7">Mon 7</option>
<option value="8">Tue 8</option>
<option value="9">Wed 9</option>
<option value="10">Thu 10</option>
<option value="11">Fri 11</option>
<option value="12">Sat 12</option>
<option value="13">Sun 13</option>
<option value="14">Mon 14</option>
<option value="15">Tue 15</option>
<option value="16">Wed 16</option>
<option value="17">Thu 17</option>
<option value="18">Fri 18</option>
<option value="19">Sat 19</option>
<option value="20">Sun 20</option>
<option value="21">Mon 21</option>
<option value="22">Tue 22</option>
<option value="23">Wed 23</option>
<option value="24">Thu 24</option>
<option value="25">Fri 25</option>
<option value="26">Sat 26</option>
<option value="27">Sun 27</option>
<option value="28">Mon 28</option>
<option value="29">Tue 29</option>
<option value="30">Wed 30</option>
<option value="31">Thu 31</option>
</select><select name="Month" id="CHECKINM-SB_37c8fa1f75" class="hcsb_checkinMonth"><option value="-1">Month</option>
<option value="2013-10">October '13</option>
<option value="2013-11">November '13</option>
<option value="2013-12">December '13</option>
<option value="2014-1">January '14</option>
<option value="2014-2">February '14</option>
<option value="2014-3">March '14</option>
<option value="2014-4">April '14</option>
<option value="2014-5">May '14</option>
<option value="2014-6">June '14</option>
<option value="2014-7">July '14</option>
<option value="2014-8">August '14</option>
<option value="2014-9">September '14</option>
<option value="2014-10">October '14</option>
</select>
                </div>
            </div>

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 :wink:

6

I’m not doing too well I’m afraid.

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
:frowning:

7

Ok, I’ll have another look shortly and see what’s happening :slight_smile:

8

Hi.

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.


#page #main .hcsb_content label, #hcsb_bodyElements .hcsb_extend label {
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #BBB;
	font-weight: 900;
	text-transform: uppercase;
}
#hcsb_bodyElements .hcsb_extend label { display:block!important }
#page #main .hcsb_content select, #hcsb_bodyElements .hcsb_extend select {
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius:0;
	margin:0 4px 5px 0;
	width:170px;
}
#hcsb_bodyElements .hcsb_extend select { width:145px!important }
#page #main .ui-datepicker-trigger { top:-.2em }
#page #main .hcsb_citySearch {
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius:0;
	padding-left:5px;
}
#page #main .hcsb_container { height:auto }
#page #main .hcsb_searchButton {
	clear:both;
	float:left;
	display: block;
	font-size: 18px;
	margin: 10px 0 7px;
	padding: 12px 20px;
	width: 100%;
	background: #E123A1;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius:0;
	text-align:center;
	text-transform:uppercase;
	padding:0;
	height:60px;
	line-height:60px;
}
#page #main .hcsb_searchButton:hover { background:#ff2ab5 }
#hcsb_bodyElements .hcsb_extend {
	margin:44px 0 0 10px;
	background:silver;
	width:380px!important;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius:0;
	padding:10px 0 0!important
}

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.

9

very clever!!!

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?

10

Nearly:)

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).

11

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:

#page #main #SB_20a7fb234d
{ 
    border-radius: 0px 0px 0px 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

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?

12


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.

e.g.


#page #main .hcsb_container {
-moz-border-radius: 0; 
-webkit-border-radius: 0; 
border-radius:0;
}
13

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.

Many thanks for your guidance

14

No worries - we all learn more from our mistakes :slight_smile:

15

Hi, Back on styling forms again but a different form this time trying to het this form: http://betabookhotels.com/ to look like this form: http://www.cssigniter.com/demo2/?theme=hotelmotel

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.

16

HI,

I would place the calendar icon absolutely into position rather than tryong to float it an duse negative margins.

e.g.


.check-in-block,
.check-out-block{position:relative}
.search-widget .calendar-icon {
position:absolute;
right:12px;
bottom:15px;
margin:0;
}

Regarding the checkbox the label can be changed as required but you can’t change the appearance of the checkbox itself as that is down to the browser.

If you want a custom checkbox you will need to so something like this which is a little complex.

http://advancestyles.info/css/css-custom-checkbox-and-radio-button/