Runboard.com
You're welcome.
Welcome: You have reached Pastor Rick's Design Elements message board... Enjoy your stay and please tell others about this board...

User Quick Links:    runboard.com       Sign up (learn about it) ● Sign in (lost password?)


 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator
Global user (premium)

Registered: 07-2005
Location: Texas
Posts: 550
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([sign in to see URL]) 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.

---

Advertise Boards On TRDConceptsDE
1/14/2007, 2:22 pm Link to this post Send Email to Pastor Rick   Send PM to Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator
Global user (premium)

Registered: 07-2005
Location: Texas
Posts: 550
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 [sign in to see URL] to [sign in to see URL]

---

Advertise Boards On TRDConceptsDE
1/14/2007, 4:57 pm Link to this post Send Email to Pastor Rick   Send PM to Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator
Global user (premium)

Registered: 07-2005
Location: Texas
Posts: 550
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 [sign in to see URL] to [sign in to see URL] and you should be good to go emoticon

---

Advertise Boards On TRDConceptsDE
1/15/2007, 10:23 am Link to this post Send Email to Pastor Rick   Send PM to Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator
Global user (premium)

Registered: 07-2005
Location: Texas
Posts: 550
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([sign in to see URL]) center no-repeat;
}
#coverup {
  position: absolute;
  top: 5px; left: 5px;
  z-index: 100;
  height: 40px; width: 300px;
  background: url([sign in to see URL]) 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.

---

Advertise Boards On TRDConceptsDE
6/14/2007, 9:20 pm Link to this post Send Email to Pastor Rick   Send PM to Pastor Rick Blog
 


Add a reply





You are not logged in (login)