Help with CSS from custom template

[cudaboy71]

This is a 3rd party template purchased by my client. I'll admit right now, i'm not great at CSS. The stuff i write for my own projects is way simpler than this. Can someone help me deceipher the code so i can make the changes i need?

My goal here is to change all of the shades of blue to shades of maroon.

have a look at the sample html:

http://www.hotheli.com/temp

to illustrate what i'm hung up on:

i see the css styles going from DT Main->DR->DC->DT L1->DR->DC (that's the way the styles cascade down to the first graphic "logo.gif". So, i'm thinking that somewhere in one of those styles should define that blue gradient surrounding the 'logo.gif'. yet, when i look at the CSS the only color i see called out is 353434, a shade of black.

any help would be appreciated. thanks.

[sanguisdesign]

almost all the shades of blue are background images my sugestion is to use Gimp to colorise all the images, to be maroon.

JOsh

[cudaboy71]

thanks josh.

maybe i'm misreading the source then. so, what is the filename for the graphic that creates the blue gradient at the top? i know 'logo.gif' has some blue in it (easy enough to fix in PS or gimp). but, i don't see a filename for the top blue bar (spacer.gif is just a 1px of white). that's why i (perhaps wrongly) assumed the blue was being called with CSS.

[birdoasis]

The graphic at the top is h_tall.gif. It's a very thin line used as a background image that is repeated.

Rightclick on the header and view image. you'll see the thin blue faded to white line on the right.

to change it simply make a maroon or whatever color fade to white gradiant in gimp or PS of the same size, or you could make it larger so that there are fewer repeats but don't make it so large that it takes longer to load..

JP

[sanguisdesign]

You know I am becoming a poster boy for this plugin. There is a plugin for firefox called "fire bug" that makes it super easy to find any elements on a page and look at both the mark up and the css that controls it. You may find this really really helpful, I do.
W/ it, you just to the page you want to edit turn it on and use the inspect function (by clicking on the big button that says "inspect". then you just roll you mouse around you page. it will out line the elements that you are going over. The bottom of you browser window will display on the left, the mark up for that element, and on the right it will show you relevant css along w/ the line number that it it is in you style sheet.
here is the mark up from the body tag where the h_tall.called is called. you can find it at, style.css (line 2)

body {
background:transparent url(images/h_tall.gif) repeat-x scroll center top;
text-align:center;
vertical-align:top;
}

[madmumbler]

Firebug has saved me a TON of work. At first I wasn't sure why it was helpful -- until I figured it out. I'm sure I'm still missing a ton of features it has, but the on-the-fly and inspect modes are awesome.

And it's a MUST for dealing with software like Zen Cart and Joomla! where you need to find div tags quickly in the stylesheet.

Now if the whole world would only switch to just using FireFox and get rid of IE.... *LOL* (Hey, a girl can dream!)