Can U make headers style-specific?

Ok, I'm a recent convert to Threads and I like the "Generic" Header idea. The only problem is, I would like to have a header (image, etc) that changes with the style selected. Is this possible? I don't see a provision for it when I edit a style sheet.

Basil

We do it here - you create a class containing your logo, then use the images as backgrounds to tables.

View the source of our page here and see how we do our header.

Then in our stylesheets we've added a class for each logo (with URLs to matching graphics):

Code

<br />.devswoosh {<br />	background-image: url(../images/cssgraphics/koniro/devswoosh.gif);<br />	background-repeat: no-repeat;<br />	background-position: right top;<br />}<br /><br />.devlogo {<br />	background-image: url(../images/cssgraphics/koniro/logo.gif);<br />	background-repeat: no-repeat;<br />	background-position: left top;<br />}<br />

I do it right in the body, like this, for a background graphic:

body {
leftMargin=0 topMargin=0 marginheight="0";
background-image: url(../styleimages/robynbg.png);
font-family : Verdana, sans-serif;
SCROLLBAR-FACE-COLOR: #FFDDDD;
SCROLLBAR-HIGHLIGHT-COLOR: #FFDDDD;
SCROLLBAR-SHADOW-COLOR: #FFDDDD;
SCROLLBAR-3DLIGHT-COLOR: #FFCFCF;
SCROLLBAR-ARROW-COLOR: #FFAFAF;
SCROLLBAR-TRACK-COLOR: #FFC3C3;
SCROLLBAR-DARKSHADOW-COLOR: #FFAFAF;

and for the header graphic, like this:

.welcome {
background: #FFFFFF;
color: #000000;
background-image: url(../styleimages/robynoth.jpg);
background-position : center;
height : 335px;
width : 604px;
background-repeat : no-repeat;
font-family : Verdana, sans-serif;
font-size : 8 pt;
}

[]JoshPet said:
We do it here - you create a class containing your logo, then use the images as backgrounds to tables.

View the source of our page here and see how we do our header.

Then in our stylesheets we've added a class for each logo (with URLs to matching graphics):

Code

<br />.devswoosh {<br />	background-image: url(../images/cssgraphics/koniro/devswoosh.gif);<br />	background-repeat: no-repeat;<br />	background-position: right top;<br />}<br /><br />.devlogo {<br />	background-image: url(../images/cssgraphics/koniro/logo.gif);<br />	background-repeat: no-repeat;<br />	background-position: left top;<br />}<br />

[/]

Forgive my ignorance. How do I create the class containing my logo?

[]ellen126 said:
I do it right in the body, like this, for a background graphic:

body {
leftMargin=0 topMargin=0 marginheight="0";
background-image: url(../styleimages/robynbg.png);
font-family : Verdana, sans-serif;
SCROLLBAR-FACE-COLOR: #FFDDDD;
SCROLLBAR-HIGHLIGHT-COLOR: #FFDDDD;
SCROLLBAR-SHADOW-COLOR: #FFDDDD;
SCROLLBAR-3DLIGHT-COLOR: #FFCFCF;
SCROLLBAR-ARROW-COLOR: #FFAFAF;
SCROLLBAR-TRACK-COLOR: #FFC3C3;
SCROLLBAR-DARKSHADOW-COLOR: #FFAFAF;

and for the header graphic, like this:

.welcome {
background: #FFFFFF;
color: #000000;
background-image: url(../styleimages/robynoth.jpg);
background-position : center;
height : 335px;
width : 604px;
background-repeat : no-repeat;
font-family : Verdana, sans-serif;
font-size : 8 pt;
}
[/]

You do this in the body of which file?

What we do here - is add those lines I posted into all our stylesheets. They link to the graphics we use up top - the threadsdev logo and the "swoosh". Try changing stylesheets in My Home and you'll see that they change which image they use.

Then - in our header - we code the HTML like this:

Code

<br /><table width="100%" align="center" cellpadding="1" cellspacing="1" class="tablesurround"><br /><tr><br /><td><br /><table cellpadding="0" cellspacing="1" width="100%" class="tableborders"><br /><tr><br /><td align="left" class="darktable"><br /><table cellpadding="0" cellspacing="0" width="100%"><br /><tr><br /><td width="240" nowrap="nowrap"><br />[:"red"]<img src="https://ubbdev.com/forum/images/cssgraphics/defaults/clearlogo.gif" <br />class="devlogo" width="240" height="75" border="0" alt="ThreadsDev.com" /><br />[/]<br /></td><br /><td align="center" valign="middle"><br /><img src="https://ubbdev.com/forum/images/icons/blank.gif" border="0" alt="UBB.Threads Modifications" /><br /></td><br /><td width="200"><br />[:"red"]<img src="https://ubbdev.com/forum/images/cssgraphics/defaults/cleardevswoosh.gif" <br />class="devswoosh" width="200" height="75" align="right" border="0" alt="ThreadsDev.com" />[/]<br /></td><br /></tr><br /></table><br /></td><br /></tr><br /></table><br /></td><br /></tr><br /></table><br /><br />

The "clear logo" are "blank" image files - like a 1x1 blank gif. set to the size we need. Then it gets applied the class from the stylesheet which contains the logo.

Worked great. Thank you!

Ok Josh, I'm gonna try this. Wish me luck LOL!

Basil

In the body tag of the .css file for each layout

Josh,
I tried what you suggested it it "sort of" works, but not really. Let me (try to) explain. I made a class and put it in my style sheet. The class looks like this:

Code

.sheader {<br />	background-image: url(../images/header1.jpg);<br />	background-repeat: no-repeat;<br />	background-position: left top;}<br />

Then, in my header code, where I had the image tag in the table cell, I used the following:

Code

<td width="340" nowrap="nowrap"><img src="http://www.myforum.com/images/clearlogo.gif" class=".sheader" width="340" height="159" border="0" alt="Myforum.com" /></td>

The clearlogo.gif file is just a small gif image that is 1x1 pixel. Unfortunately, what shows up in my header is not header1.jpg, but only an enlarged clearlogo.gif. However, I find that if I remove the clearlogo.gif from its directory, or point to some image that does not exist, then the header1.jpg image does show up. Any ideas what I might be doing wrong? Also note that I see you have class "tablesurround", "tableborders" and "darktable" in your header code as well. Are these necessary for what I want to do?

Thanks,
Basil

put the class in this

<td width="340" nowrap="nowrap>

not in the img src.

so make it

<td width="340" nowrap="nowrap class = "sheader">

and by the way the . before the sheader is probably whats messing it up.

[]scroungr said:
put the class in this

<td width="340" nowrap="nowrap>

not in the img src.

so make it

<td width="340" nowrap="nowrap class = "sheader">

and by the way the . before the sheader is probably whats messing it up. [/]

Ok, that worked! Thanks! Now I have another wierd problem with custom forum headers, but I'll post that in a separate thread.
Thanks!