having trouble changing logo and removing CMS "tree" image

[dpakman91]

I want to replicate this header image/logo setup on a new install of 1.6.6: www.vividedgemedia.com

it's currently looking like this: http://173.201.16.69/~vividedg/

the section i think refers to that in my stylesheet currently is:

div#header h1 a {
/* you can set your own image here */
background: url(uploads/images/vivid-logo.png) no-repeat left top;
/* this will make the "a" link a solid shape */
display: block;
/* adjust according your image size */
height: 100px;
/* this hides the text */
text-indent: -999em;
/* old firefox would have shown underline for the link, this explicitly hides it */
text-decoration: none;
}
div#header h1 {
margin: 0;
padding: 0;
/*these keep IE6 from pushing the header to more than the set size*/
line-height: 0;
font-size: 0;
/* this will keep IE6 from flickering on hover */
background: url(uploads/ngrey/logoCMS.png) no-repeat left top;

-----------

what should i be doing to replicate that, and why is the CMS default logo showing up BEHIND my logo? any help would be appreciated.

[Fraserm]

The CMS logo is showing up because your CSS is specifying it:

background: url(uploads/ngrey/logoCMS.png) no-repeat left top;

Take that out and it'll just be your logo that's showing.

[staartmees]

you didn't change the background in the last line.

/* this will keep IE6 from flickering on hover */
  background: url(uploads/ngrey/logoCMS.png) no-repeat left top;

change it to

/* this will keep IE6 from flickering on hover */
  background: url(uploads/images/vivid-logo.png) no-repeat left top;

[dpakman91]

excellent, i've made that change www.vividedgemedia.com

additional question: how can i change the text color of the text on the right side of the header? also, is there any simple change i can make to the css (i'm not designer at all) that would create some kind of gradient that would look better than this all white header background?

[Fraserm]

I don't see the text on the right side of the header, which text is it?

The easiest way to get your gradient is with a background image. The image only needs to be 1 pixel wide, but the full height and gradient that you want. You then repeat that 1 pixel image horizontally to fill whatever container the background is applied to, e.g. a div or table cell. In your case it's a div.

So, something along the lines of:

Code: Select all

div#header h1 {
   margin: 0;
   padding: 0;
   line-height: 0;
   font-size: 0;
   background: url(uploads/images/gradient.png) repeat-x left top;

Notice that what's happening is we're reinstating the background image you remove in your last post and changing it to your gradient (the path needs changed to whatever you're using) and also we're telling it to repeat itself in the x-axis instead of before where it was no-repeat.