Pastor Rick
Head Administrator
Registered: 07-2005
Location: Texas
Posts: 560
Karma: 11 (+12/-1)
|
|
Reply ● Quote
|
|
The great Banner coverup
Oki Doki then... say you chose the "Purple Passions" theme and you really like it but you hate the "Sample Banner" text that is on the banner graphic. Here is a way to fix that...
In your custom CSS add this:
/* BANNER COVERUP */
#banner {height: 25px; width: 740px; position: relative; top: 96pt; right: 2pt; z-index: 500;
background: #000 url(http://img.runboard.com/img/layouts/smackdown5_1/samplebanner.jpg) fixed;
}
/* BOARD NAME PARAMETERS */
h1 {font: bold 50px georgia,'times new roman',serif; text-align: center; color: #606; margin: 0;}
Then in your HTML header you replace this:
<center><div align="center" class="bghead"></div>
<div align="center" class="bgmid">
with this:
<center><div align="center" class="bghead">
<div style="position:relative; top:100px; left:20px; width:600px; height:25px">
<h1>Super Sample Banner Text</h1>
</div></div>
<div align="center" class="bgmid">
<div id="banner"></div>
I bolded out my additions so you can see the actual changes.
|
|
1/14/2007, 2:22 pm
|
Link to this post
Send Email to Pastor Rick
Send PM to Pastor Rick
Blog
|
Pastor Rick
Head Administrator
Registered: 07-2005
Location: Texas
Posts: 560
Karma: 11 (+12/-1)
|
|
Reply ● Quote
|
|
Re: The great Banner coverup
Since the "Purple Passions" and "Shades of Gray" themes are really the same theme but with different colors you can create the same effect for it by changing http://img.runboard.com/img/layouts/smackdown5_1/samplebanner.jpg to http://img.runboard.com/img/layouts/smackdown5_1/samplebanner.jpg
|
|
1/14/2007, 4:57 pm
|
Link to this post
Send Email to Pastor Rick
Send PM to Pastor Rick
Blog
|
Pastor Rick
Head Administrator
Registered: 07-2005
Location: Texas
Posts: 560
Karma: 11 (+12/-1)
|
|
Reply ● Quote
|
|
Re: The great Banner coverup
The "Red Rouge" banner is the same size so this should work with it too, just change the url from http://img.runboard.com/img/layouts/smackdown5_1/samplebanner.jpg to http://img.runboard.com/img/layouts/smackdown5_3/samplebanner.jpg and you should be good to go 
|
|
1/15/2007, 10:23 am
|
Link to this post
Send Email to Pastor Rick
Send PM to Pastor Rick
Blog
|
Pastor Rick
Head Administrator
Registered: 07-2005
Location: Texas
Posts: 560
Karma: 11 (+12/-1)
|
|
Reply ● Quote
|
|
Re: The great Banner coverup
This comes from a fantastic Lady named LeSigner Girl (thank you Lesa)...
Here's an example of what you can do. You might be able to figure it out from looking at the code, but let me know if you need an explanation for anything.
#banner {
position: relative;
height: 150px; width: 700px;
background: #ccc url(url_to_big_banner.jpg) center no-repeat;
}
#coverup {
position: absolute;
top: 5px; left: 5px;
z-index: 100;
height: 40px; width: 300px;
background: url(image_to_cover_sample_banner_wording.jpg) center no-repeat;
}
h1 {
position: absolute;
top: 65px; margin: 0;
left: 100px; width: 600px;
text-align: center;
color: #ffffff;
font: 18px verdana,arial,sans-serif;
z-index: 200;
}
<div id="banner">
<div id="coverup"></div>
<h1>Purple Squares</h1>
</div><!-- end banner -->
Notes:
You can use basically any numbers in the z-index, but the smallest number will cause the element to be on the bottom layer, the biggest number on the top layer, and the layers in between according to the numbers you give them. I like to use big numbers and space them apart, because it makes it easier to add layers in between.
You must make the outer (banner) div position:relative; in order for absolute positioning to work within it. For absolutely positioned elements, you can position from the top left, the top right, the bottom left, or the bottom right, of the relatively positioned banner div.
You can also absolutely position elements from within other absolutely positioned elements. For example, using the same CSS above...
<div id="banner">
<div id="coverup">
<h1>Purple Squares</h1>
</div><!-- end coverup -->
</div><!-- end banner -->
This would cause the <h1> heading to be absolutely positioned within the coverup div, instead of using the banner div to calculate its positioning.
|
|
6/14/2007, 9:20 pm
|
Link to this post
Send Email to Pastor Rick
Send PM to Pastor Rick
Blog
|
