Can U make headers style-specific?

You are not logged in. [Log In] ubbDev » Forums » Vintage Modifications » UBB.Threads v6.x Modifications
» Forum Design Integration » Can U make headers style-specific?

Topic Options

#273654 - 05/21/04 12:14 AM Can U make headers style-specific?
Basil Fawlty Journeyman Registered: 10/30/01 Posts: 135 Loc: New Mexico	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. <br /><br />Basil <img src="http://www.ubbdev.com/forum/images/graemlins/confused.gif" alt="" /> _________________________
Top

#273655 - 05/21/04 12:45 AM Re: Can U make headers style-specific? [Re: BBCG]
JoshPet I type Like navaho Registered: 11/29/01 Posts: 11330 Loc: Charlotte, NC	We do it here - you create a class containing your logo, then use the images as backgrounds to tables.<br /><br />View the source of our page here and see how we do our header. <br /><br />Then in our stylesheets we've added a class for each logo (with URLs to matching graphics):<br /><br /> 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 /> _________________________ Joshua Pettit www.JoshuaPettit.com My abilities are for hire.
Top

#273656 - 05/21/04 07:17 PM Re: Can U make headers style-specific? [Re: Daine]
Ellen Member Registered: 09/15/00 Posts: 146 Loc: Clifton, NJ	I do it right in the body, like this, for a background graphic: <br /> <br /> <br />body { <br />leftMargin=0 topMargin=0 marginheight="0"; <br /> background-image: url(../styleimages/robynbg.png); <br /> font-family : Verdana, sans-serif; <br /> SCROLLBAR-FACE-COLOR: #FFDDDD; <br /> SCROLLBAR-HIGHLIGHT-COLOR: #FFDDDD; <br /> SCROLLBAR-SHADOW-COLOR: #FFDDDD; <br /> SCROLLBAR-3DLIGHT-COLOR: #FFCFCF; <br /> SCROLLBAR-ARROW-COLOR: #FFAFAF; <br /> SCROLLBAR-TRACK-COLOR: #FFC3C3; <br /> SCROLLBAR-DARKSHADOW-COLOR: #FFAFAF; <br /> <br />and for the header graphic, like this: <br /> <br />.welcome { <br /> background: #FFFFFF; <br /> color: #000000; <br /> background-image: url(../styleimages/robynoth.jpg); <br /> background-position : center; <br /> height : 335px; <br /> width : 604px; <br /> background-repeat : no-repeat; <br /> font-family : Verdana, sans-serif; <br /> font-size : 8 pt; <br />} <br />
Top

#273657 - 05/28/04 01:29 AM Re: Can U make headers style-specific? [Re: Daine]
DarkFrog Newbie Registered: 05/03/03 Posts: 16	[]JoshPet said:<br />We do it here - you create a class containing your logo, then use the images as backgrounds to tables.<br /><br />View the source of our page here and see how we do our header. <br /><br />Then in our stylesheets we've added a class for each logo (with URLs to matching graphics):<br /><br /> 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 /> [/]<br /><br />Forgive my ignorance. How do I create the class containing my logo?
Top

#273658 - 05/28/04 01:30 AM Re: Can U make headers style-specific? [Re: phatguy88]
DarkFrog Newbie Registered: 05/03/03 Posts: 16	[]ellen126 said:<br />I do it right in the body, like this, for a background graphic:<br /><br /><br />body {<br />leftMargin=0 topMargin=0 marginheight="0";<br /> background-image: url(../styleimages/robynbg.png);<br /> font-family : Verdana, sans-serif;<br /> SCROLLBAR-FACE-COLOR: #FFDDDD;<br /> SCROLLBAR-HIGHLIGHT-COLOR: #FFDDDD;<br /> SCROLLBAR-SHADOW-COLOR: #FFDDDD;<br /> SCROLLBAR-3DLIGHT-COLOR: #FFCFCF;<br /> SCROLLBAR-ARROW-COLOR: #FFAFAF;<br /> SCROLLBAR-TRACK-COLOR: #FFC3C3;<br /> SCROLLBAR-DARKSHADOW-COLOR: #FFAFAF;<br /><br />and for the header graphic, like this:<br /><br />.welcome {<br /> background: #FFFFFF;<br /> color: #000000;<br /> background-image: url(../styleimages/robynoth.jpg);<br /> background-position : center;<br /> height : 335px;<br /> width : 604px;<br /> background-repeat : no-repeat;<br /> font-family : Verdana, sans-serif;<br /> font-size : 8 pt;<br />}<br /> [/]<br /><br />You do this in the body of which file?
Top

#273659 - 05/28/04 01:38 AM

Re: Can U make headers style-specific? [Re: ]

JoshPet Offline

I type Like navaho

Registered: 11/29/01
Posts: 11330
Loc: Charlotte, NC

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 />&lt;table width="100%" align="center" cellpadding="1" cellspacing="1" class="tablesurround"&gt;<br />&lt;tr&gt;<br />&lt;td&gt;<br />&lt;table cellpadding="0" cellspacing="1" width="100%" class="tableborders"&gt;<br />&lt;tr&gt;<br />&lt;td align="left" class="darktable"&gt;<br />&lt;table cellpadding="0" cellspacing="0" width="100%"&gt;<br />&lt;tr&gt;<br />&lt;td width="240" nowrap="nowrap"&gt;<br />[:"red"]&lt;img src="http://www.ubbdev.com/forum/images/cssgraphics/defaults/clearlogo.gif" <br />class="devlogo" width="240" height="75" border="0" alt="ThreadsDev.com" /&gt;<br />[/]<br />&lt;/td&gt;<br />&lt;td align="center" valign="middle"&gt;<br />&lt;img src="http://www.ubbdev.com/forum/images/icons/blank.gif" border="0" alt="UBB.Threads Modifications" /&gt;<br />&lt;/td&gt;<br />&lt;td width="200"&gt;<br />[:"red"]&lt;img src="http://www.ubbdev.com/forum/images/cssgraphics/defaults/cleardevswoosh.gif" <br />class="devswoosh" width="200" height="75" align="right" border="0" alt="ThreadsDev.com" /&gt;[/]<br />&lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/td&gt;<br />&lt;/tr&gt;<br />&lt;/table&gt;<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. <img src="http://www.ubbdev.com/forum/images/graemlins/smile.gif" alt="" />

_________________________
Joshua Pettit
www.JoshuaPettit.com
My abilities are for hire.

Top

#273660 - 05/29/04 03:02 AM Re: Can U make headers style-specific? [Re: Daine]
DarkFrog Newbie Registered: 05/03/03 Posts: 16	Worked great. Thank you!
Top

#273661 - 05/31/04 01:00 PM Re: Can U make headers style-specific? [Re: ]
Basil Fawlty Journeyman Registered: 10/30/01 Posts: 135 Loc: New Mexico	Ok Josh, I'm gonna try this. Wish me luck LOL!<br /><br />Basil _________________________
Top

#273662 - 06/07/04 06:47 PM Re: Can U make headers style-specific? [Re: BBCG]
Ellen Member Registered: 09/15/00 Posts: 146 Loc: Clifton, NJ	In the body tag of the .css file for each layout
Top

#273663 - 07/19/04 07:53 AM Re: Can U make headers style-specific? [Re: Daine]
Basil Fawlty Journeyman Registered: 10/30/01 Posts: 135 Loc: New Mexico	Josh,<br /> 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:<br /> Code: .sheader {<br /> background-image: url(../images/header1.jpg);<br /> background-repeat: no-repeat;<br /> background-position: left top;}<br /> <br /><br />Then, in my header code, where I had the image tag in the table cell, I used the following:<br /><br /> 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> <br /><br />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? <br /><br />Thanks,<br />Basil
Top

#273664 - 07/19/04 08:51 AM Re: Can U make headers style-specific? [Re: BBCG]
scroungr Old Hand Registered: 10/17/03 Posts: 2409 Loc: Richmond, VA	put the class in this<br /><br /><td width="340" nowrap="nowrap><br /><br />not in the img src.<br /><br />so make it<br /><br /><td width="340" nowrap="nowrap class = "sheader"><br /><br />and by the way the . before the sheader is probably whats messing it up. _________________________ Couchtomatoe - www.couch-tomatoe.cc My abilities are for hire for installs, upgrades, custom themes and custom modifications.
Top

#273665 - 07/19/04 08:02 PM Re: Can U make headers style-specific? [Re: 234234]
Basil Fawlty Journeyman Registered: 10/30/01 Posts: 135 Loc: New Mexico	[]scroungr said:<br />put the class in this<br /><br /><td width="340" nowrap="nowrap><br /><br />not in the img src.<br /><br />so make it<br /><br /><td width="340" nowrap="nowrap class = "sheader"><br /><br />and by the way the . before the sheader is probably whats messing it up. [/]<br /><br />Ok, that worked! Thanks! Now I have another wierd problem with custom forum headers, but I'll post that in a separate thread.<br />Thanks! _________________________
Top

Previous Topic

Index

Next Topic

Hop to: