Previous Thread
Next Thread
Print Thread
Rate Thread
Joined: Oct 2001
Posts: 139
Journeyman
Journeyman
Joined: Oct 2001
Posts: 139
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

Sponsored Links
Joined: Nov 2001
Posts: 10,369
I type Like navaho
I type Like navaho
Joined: Nov 2001
Posts: 10,369
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 />

Joined: Sep 2000
Posts: 159
Member
Member
Offline
Joined: Sep 2000
Posts: 159
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;
}

Joined: May 2003
Posts: 15
Newbie
Newbie
Offline
Joined: May 2003
Posts: 15
[]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?

Joined: May 2003
Posts: 15
Newbie
Newbie
Offline
Joined: May 2003
Posts: 15
[]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?

Sponsored Links
Joined: Nov 2001
Posts: 10,369
I type Like navaho
I type Like navaho
Joined: Nov 2001
Posts: 10,369
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.

Joined: May 2003
Posts: 15
Newbie
Newbie
Offline
Joined: May 2003
Posts: 15
Worked great. Thank you!

Joined: Oct 2001
Posts: 139
Journeyman
Journeyman
Joined: Oct 2001
Posts: 139
Ok Josh, I'm gonna try this. Wish me luck LOL!

Basil

Joined: Sep 2000
Posts: 159
Member
Member
Offline
Joined: Sep 2000
Posts: 159
In the body tag of the .css file for each layout

Joined: Oct 2001
Posts: 139
Journeyman
Journeyman
Joined: Oct 2001
Posts: 139
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

Sponsored Links
Joined: Oct 2003
Posts: 2,305
Old Hand
Old Hand
Joined: Oct 2003
Posts: 2,305
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.

Joined: Oct 2001
Posts: 139
Journeyman
Journeyman
Joined: Oct 2001
Posts: 139
[]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!


Link Copied to Clipboard
Donate Today!
Donate via PayPal

Donate to UBBDev today to help aid in Operational, Server and Script Maintenance, and Development costs.

Please also see our parent organization VNC Web Services if you're in the need of a new UBB.threads Install or Upgrade, Site/Server Migrations, or Security and Coding Services.
Recommended Hosts
We have personally worked with and recommend the following Web Hosts:
Stable Host
bluehost
InterServer
Visit us on Facebook
Member Spotlight
isaac
isaac
California
Posts: 1,157
Joined: July 2001
Forum Statistics
Forums63
Topics37,573
Posts293,925
Members13,849
Most Online5,166
Sep 15th, 2019
Today's Statistics
Currently Online
Topics Created
Posts Made
Users Online
Birthdays
Top Posters
AllenAyres 21,079
JoshPet 10,369
LK 7,394
Lord Dexter 6,708
Gizmo 5,833
Greg Hard 4,625
Top Posters(30 Days)
Top Likes Received
isaac 82
Gizmo 20
Brett 7
WebGuy 2
Top Likes Received (30 Days)
None yet
The UBB.Developers Network (UBB.Dev/Threads.Dev) is ©2000-2024 VNC Web Services

 
Powered by UBB.threads™ PHP Forum Software 8.0.0
(Preview build 20221218)