|
|
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 
|
|
|
|
|
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): <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
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
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): <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
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?
|
|
|
|
|
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: <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
Joined: May 2003
Posts: 15 |
|
|
|
|
|
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
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: .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: <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
|
|
|
|
|
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!
|
|
|
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.
|
|
|
Posts: 417
Joined: November 2001
|
|
|
Forums63
Topics37,575
Posts293,930
Members13,823
| |
Most Online6,139
Sep 21st, 2024
|
|
Currently Online
Topics Created
Posts Made
Users Online
Birthdays
|
|
|
|
