AutoDirector forum

The AutoDirector support and advice forum

CSS labels in template files

Post Reply

Page: 1

Author Post
Member
Registered: Dec 2008
Posts: 2
Hello everyone,

I'm looking for a document that tells someone (me) what all of the settings are for the CSS in the template CSS files. Aside from spending many hours changing one item and then testing to see what changed, I'm not familiar enough with CSS to tell what is what.

I am starting with red.css and have found that I needed to add a background colour. I also found the border around the thumbnail. I'm seeking to change colours only, for now.

Any and all help is greatly appreciated.

Thank you.

For reference, I have pasted my working css file below, if anybody can tell me what the items are, that is great!

--- BEGIN CODE HERE ---
/* AutoDirector: started originally with red.css as base CSS file*/
#autodirector
{
width: 95%;
padding: 0;
margin: 1em auto;
color: #666666;
background-color:#666666;
}

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

}

#autodirector_list a
{
clear: both;
display: block;
width: 80%;
margin: 1em auto;
color: #000;
border: 1px solid #c00;
}

#autodirector_list a * { cursor: pointer; }
#autodirector_list a:hover { background-color: #fed; }

#autodirector_list img /* border color around thumbnail */
{
display: block;
float: left;
padding: 3px;
margin: 6px;
background-color: #fff; /*to be 333*/
border: 1px solid #000;
}

#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: bold; }
#autodirector_list dd.model { font-size: 1.2em; }

#autodirector_list div
{
clear: both;
font-size: 1.25em;
font-weight: bold;
text-align: right;
padding: 0 6px 6px 6px;
}

#autodirector_vehicle
{
height: 1%;
padding: 10px;
margin: 1em 0;
border: 2px solid #c00;
}

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;
border: 1px solid #000;
cursor: pointer;
}

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; font-weight: bold; padding: 0.2em 0; }
#autodirector_vehicle dd.model { font-size: 1.5em; }
#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;
font-weight: bold;
text-align: right;
padding: 0 10px 10px 10px;
}

#autodirector_vehicle img.count { display: none; }

#autodirector_jumptop, #autodirector_jumpend
{
height: 1em;
margin: 0.5em 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;
border-left: 1px solid #000;
}

#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: bold; }
#autodirector_jumptop li a.active, #autodirector_jumpend li a.active { color: #fff; background-color: #f66; }
#autodirector_jumptop a:hover, #autodirector_jumpend a:hover { font-weight: bold; }
#autodirector_jumptop li a.active:hover, #autodirector_jumpend li a.active:hover { color: #fff; }

#adsearch fieldset, #adenquiry fieldset
{
padding: 6px;
margin: 1em 0%;
border: 1px solid #f66;
overflow: auto;
}

#adsearch legend, #adenquiry legend
{
font-size: 1.2em;
font-weight: bold;
color: #f66;
}

#adsearch div.order, #adsearch div.search
{
position: relative;
float: left;
width: 49%;
}

#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 0.5em 0 0;
cursor: help;
}

#adsearch label { width: auto; 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;
background-color: #fff;
border: 1px solid #f66;
}

#adsearch input:focus, #adsearch select#focus, #adenquiry input:focus, #adenquiry textarea:focus { background-color: #fed; }

#adsearch select#adorderby { width: 12em; }
#adsearch input#adsearchterm { float: left; width: 11.4em; }

#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: bold;
text-align: center;
margin: 6px auto;
}

#autodirector input.button
{
color: #c00;
background-color: #fed;
border: 2px solid #f66;
cursor: pointer;
}

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

#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: bold;
margin: 0.5em 0;
}

#autodirector_sponsor
{
font-size: 0.85em;
font-weight: normal;
font-style: italic;
text-align: right;
padding: 1px 0.5em 0.2em 0.5em;
margin: 1.5em 0;
background-color: #fed;
border-top: 2px solid #c00;
}

#autodirector_sponsor a { display: block; }

#autodirector a, #autodirector a:visited { color: #c00; text-decoration: none; }
#autodirector a:hover { color: #f00; }

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

#lb_window
{
position: absolute;
width: 1px;
height: 1px;
padding: 5px;
background-color: #fff;
overflow: hidden;
}

#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;
}

#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;
color: #fff;
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;
}
--- END CODE ---
Administrator
Registered: Apr 2008
Posts: 323
Hi. If you click the integration options icon (for a site), then choose "using your own styles", you'll find a basic map of the HTML template.

It's fairly easy to examine and experiment with the styles if you use Firefox with the Firebug extension.
_______________
AutoDirector administrator
Member
Registered: Dec 2008
Posts: 2
Excellent, I found that page. It will help.

Thank you.
Paul.

Post Reply

Page: 1