AutoDirector forum

The AutoDirector support and advice forum

CSS Headache

Post Reply

Page: 1

Author Post
Member
Registered: Feb 2012
Posts: 8
Morning, we have been merrily modifying the modern.css in order to fit in with a current site build.

As a result we have altered the main font colour from black to white.

All is looking fine apart from the dropdown menus in the search box which have also become white (on a white Background) and we can not for the life of us figure out how to change the font colour to black.

Can anyone shed a little light please?
Administrator
Registered: Apr 2008
Posts: 324
Try adding this:

#autodirector select { color: #000; }


Craig
_______________
AutoDirector administrator
Member
Registered: Feb 2012
Posts: 8
thanks for the prompt reply Craig, however no joy I'm afraid.

current css is:


@charset "utf-8";
/* CSS Document */

/* AutoDirector: modern.css base CSS */
#autodirector
{
position: relative;
width: 90%;
padding: 0;
margin: 1em auto;

z-index: 99999;
font-family: Tahoma, Geneva, sans-serif;
font-size: 1em;
}

#autodirector *
{
font-size: 1em;
padding: 0;
margin: 0;
color: #FFF;
}

#autodirector_list a
{
clear: both;
display: block;
width: 100%;
margin: 3px auto;
color: #000;
border: 2px solid #555;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.25, #333),
color-stop(0.75, #666)
);
background: -moz-linear-gradient(
center top,
#333 25%,
#666 75%
);
}

#autodirector_list a * { cursor: pointer; }
#autodirector_list a:hover, #autodirector_list a:focus
{
border-color: #333;
background-color: #ddd;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.25, #999),
color-stop(0.75, #bbb)
);
background: -moz-linear-gradient(
center top,
#999 25%,
#bbb 75%
);
}

#autodirector_list img
{
display: block;
float: left;
padding: 3px;
margin: 6px;
background-color: #fff;
border: 1px solid #555;
-webkit-box-shadow: rgba(40, 40, 40, 0.5) 2px 2px 5px;
-moz-box-shadow: rgba(40, 40, 40, 0.5) 2px 2px 5px;
}

#autodirector_list dl
{
display: block;
float: left;
min-width: 75%;
margin: 6px;
border-style: none;
}

#autodirector_list dt { clear: both; width: 6.5em; float: left; }
#autodirector_list dd { display: block; font-weight: normal; }
#autodirector_list dd.model { font-size: 1.2em; }

#autodirector_list div
{
clear: both;
font-size: 1.25em;

text-align: right;
padding: 0 6px 6px 6px;
}

#autodirector_vehicle
{
height: 1%;
padding: 10px;
margin: 1em 0;
border: 2px solid #555;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.25, #333),
color-stop(0.75, #666)
);
background: -moz-linear-gradient(
center top,
#333 25%,
#666 75%
);
}

[b]#autodirector_select
{
colour: #000;[/b]

}

ol#autodirector_pics
{
display: block;
float: left;
width: 24%;
list-style-type: none;
}

ol#autodirector_pics li, ol#autodirector_pics li a
{
display: block;
padding: 0;
margin: 0;
}

ol#autodirector_pics a img
{
display: block;
padding: 3px;
margin: 10px auto;
background-color: #fff;
border: 1px solid #000;
cursor: pointer;
-webkit-box-shadow: rgba(40, 40, 40, 0.5) 2px 2px 5px;
-moz-box-shadow: rgba(40, 40, 40, 0.5) 2px 2px 5px;
}

ol#autodirector_pics a strong, ol#autodirector_pics a span { display: none; }

#autodirector_vehicle dl
{
display: block;
float: left;
width: 75%;
}

#autodirector_vehicle dt { clear: both; width: 6.5em; float: left; padding: 0.2em 0; color: #999; }
#autodirector_vehicle dd { display: block; padding: 0.2em 0; }
#autodirector_vehicle dd.model { font-size: 1.5em; text-shadow: 2px 2px 4px rgba(50,50,50,0.4); }
#autodirector_vehicle dd.details { text-transform: none; }
#autodirector #autodirector_vehicle dd.details p { font-weight: normal; margin: 0 10px 1.2em 6.5em; }
#autodirector #autodirector_vehicle dd.details h2 { font-size: 1.25em; margin: 1em 10px 0 5.2em; }
#autodirector #autodirector_vehicle dd.details ol { float: none; width: auto; list-style-type: decimal; padding: 0; margin: 0.2em 10px 1em 9em; }
#autodirector #autodirector_vehicle dd.details ul { float: none; width: auto; list-style-type: square; padding: 0; margin: 0.2em 10px 1em 9em; }
#autodirector #autodirector_vehicle dd.details li { float: none; font-weight: normal; padding: 0; margin: 0.2em 0; }
#autodirector #autodirector_vehicle dd.details hr { height: 0; padding: 0; margin: 6px 10px 6px 6.5em; border-style: none; border-top: 1px solid #666; }
#autodirector #autodirector_vehicle dd.details img { display: block; padding: 0; margin: 5px auto; border-style: none; cursor: auto; }
#autodirector #autodirector_vehicle dd.details a img { cursor: pointer; }

#autodirector_vehicle div.price
{
clear: both;
font-size: 1.5em;


text-align: right;
padding: 0 10px 10px 10px;
}

#autodirector_vehicle img.count { display: none; }

#autodirector_jumptop, #autodirector_jumpend
{
height: 1em;
margin: 20px 0;
}

#autodirector_jumptop p, #autodirector_jumpend p { float: left; }

#autodirector_jumptop ol, #autodirector_jumpend ol
{
float: right;
list-style-type: none;
}

#autodirector_jumptop li, #autodirector_jumpend li { float: left; }

#autodirector_jumptop li a, #autodirector_jumpend li a
{
display: block;
width: 1.5em;
text-align: center;
}

#autodirector_jumptop a.next, #autodirector_jumpend a.next { width: 4em; }
#autodirector_jumptop a.back, #autodirector_jumpend a.back { width: 4em; border-left-style: none; }
#autodirector_jumptop a.active, #autodirector_jumpend a.active { font-weight: normal; }
#autodirector_jumptop li a.active, #autodirector_jumpend li a.active {
color: #fff;
background-color: #00f;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#autodirector_jumptop a:hover, #autodirector_jumpend a:hover { font-weight: normal; }
#autodirector_jumptop li a.active:hover, #autodirector_jumpend li a.active:hover { color: #fff; }

#adsearch fieldset, #adenquiry fieldset
{
padding: 6px;
margin: 1em 0%;
border: 2px ridge #666;
overflow: auto;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.25, #333),
color-stop(0.75, #666)
);
background: -moz-linear-gradient(
center top,
#333 25%,
#666 75%
);
}

#adsearch fieldset
{
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
color: rgba(51,51,51,1);
}

#adenquiry fieldset
{
-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
color: rgba(51,51,51,1);
}

#adsearch legend, #adenquiry legend
{
font-size: 1em;
font-weight: normal;
padding: 0 0.5em;
color: rgba(255,255,255,1);
}

#adsearch a
{
font-size: 0.85em;
display: inline;
float: right;
color: rgba(0,0,0,1);
}

#adsearch div
{
position: relative;
float: left;
width: 49%;
height: 1.8em;

}

#adsearch div.row {
clear: both;

}

#adsearch div.active { background: url("images/active.gif") 0 50% no-repeat; }

#adenquiry div
{
clear: both;
margin: 1px 0;
}

#adsearch label, #adenquiry label
{
display: block;
float: left;
width: 30%;
text-align: right;
padding: 0;
margin: 0 1% 0 0;
cursor: help;


}

#adsearch label { width: 4em; padding-left: 18px; }

#adsearch input, #adsearch select, #adenquiry input, #adenquiry textarea
{
position: relative;
width: 20em;
font-family: arial, sans-serif;
font-size: 0.85em;
text-align: left;
padding: 1px 2px;
margin: 0;
color: #000 !important;
border: 1px solid #888;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}


#adsearch input:focus, #adsearch select:focus, #adenquiry input:focus, #adenquiry textarea:focus {
background-color: #FFF;
color:#000 !important;


}

#adsearch select {
width: 14em;
color: #000;
}
#adsearch input, #adsearchterm {
float: left;
width: 11.4em;
color: #000;
}

#adsearch input.button
{
float: left;
width: 2.5em;
font-size: 0.72em;
text-align: center;
text-transform: uppercase;
padding: 0;
margin-left: 1px;



}

#adenquiry input.button
{
display: block;
width: 10em;
font-size: 1em;
font-weight: normal;
text-align: center;
margin: 6px 0 6px 31%;

}

#autodirector input.button
{
font-weight: normal;
padding: 1px 0 2px 0;
color: #00c;
background-color: #ccf;
border: 1px solid #66f;
cursor: pointer;
}

#autodirector input.button:hover { color: #fff; background-color: #66f; }

#autodirector_enqresult
{
font-size: 1.2em;
padding: 0 18px;
margin: 1em 0%;
color: #c00;
}

#autodirector_enqresult.active { background: url("images/active.gif") 0 50% no-repeat; }

#autodirector_backtop a, #autodirector_backend a
{
display: block;
font-size: 1.1em;
font-weight: normal;
margin: 0.5em 0;
color: rgba(255,255,255,1);
}

#autodirector_sponsor
{
font-size: 0.85em;
font-weight: normal;
text-align: center;
padding: 1px 0.5em 0.2em 0.5em;
margin: 1.5em 0;
color: #fff;
background-color: #aaa;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

#autodirector #autodirector_sponsor a, #autodirector #autodirector_sponsor a:visited { display: block; color: #fff; }

#autodirector a, #autodirector a:visited { color: #FFF; text-decoration: none; }
#autodirector a:hover, #autodirector a:focus { color: #FFF; }

/* lightbox window */
#lb_pageoverlay
{
background-color: #000;
z-index: 999999;
}

#lb_window
{
position: absolute;
width: 1px;
height: 1px;
padding: 5px;
background-color: #fff;
border: 1px solid #333;
-webkit-box-shadow: rgba(0, 0, 0, 0.9) 3px 3px 12px;
-moz-box-shadow: rgba(0, 0, 0, 0.9) 3px 3px 12px;
overflow: hidden;
z-index: 999999;
}

#lb_image
{
position: relative;
width: 100%;
height: 100%;
background: #fff url("images/load.gif") 50% 50% no-repeat;
overflow: hidden;
}

#lb_image img
{
position: absolute;
background-color: #000;
}

#lb_bar
{
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
min-height: 44px;
height: auto !important;
height: 44px;
font-size: 0.85em;
padding: 0;
margin: 0;
background: #000 url("images/description.gif") 0 0 repeat-x;
overflow: visible;
}

#lb_bar p
{
padding: 0;
margin: 2px 5.5em 4px 5px;
}

#lb_bar p strong, #lb_bar p span { display: block; }

#lb_bar a
{
position: absolute;
top: 5px;
right: 5px;
width: 18px;
height: 19px;
text-decoration: none;
background: url("images/next.gif") 0 0 no-repeat;
}

#lb_bar a#lb_next strong, #lb_bar a#lb_back strong { display: none; }

#lb_bar a#lb_back
{
right: 30px;
background-image: url("images/back.gif")
}

#lb_bar a#lb_close
{
top: auto;
bottom: 5px;
width: auto;
height: auto;
padding-right: 14px;
color: #fff;
background: url("images/close.gif") 100% 65% no-repeat;
}

.row {
font-family: Tahoma, Geneva, sans-serif;
font-size: 1em;
color: rgba(255,255,255,1);
}

a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
Administrator
Registered: Apr 2008
Posts: 324
OK, try this:

#autodirector select { color: #000 !important; }
_______________
AutoDirector administrator
Member
Registered: Feb 2012
Posts: 8
Still no joy....... it's proving to be a pain in the jacksie this one! :roll:
Administrator
Registered: Apr 2008
Posts: 324
Your code looks wrong. You've used:

#autodirector_select (with an underscore)

rather than:

#autodirector select (with a space)

Also, I'd recommend leaving the template files as they are then overriding them in your own CSS files.
_______________
AutoDirector administrator
Member
Registered: Feb 2012
Posts: 8
Thanks, I've tried both with and without the underscore.... I'll keep plugging away at it!
Administrator
Registered: Apr 2008
Posts: 324
The underscore will never work. You also appear to have strange control characters either end. Copy it out by hand rather than copy/paste.
_______________
AutoDirector administrator
Member
Registered: Feb 2012
Posts: 8
copied by hand..... I've found and am able to change pretty much every other element in this code but this is certainly puzzling me.

Not quite with you regards 'strange control characters'?
Administrator
Registered: Apr 2008
Posts: 324
Check what's happening using Firebug or the webkit Inspector.

You had 'bold' control codes from this forum around the CSS element.
_______________
AutoDirector administrator

Post Reply

Page: 1