WordPress.com

1. notchangingmyname
   Member
   Aug 10, 2012, 12:57 PM

   Hi everyone, i just changed themes, so expect a lot of question from me over the next few days. :-)

   I made a header image for my new theme, which is currently what's there right now. However, I'd like the header image to be lower on the page, so that the white text is visible in that black ribbon thing that is part of the layout, and so that the blue "sticker" hangs over the black ribbon. I made an example of what I WANT it to look like:

   http://notchangingmyname.files.wordpress.com/2012/08/layoutwithheader.jpg

   Right now, with the header where it is, you can't tell that there's white writing in it.

   Here's the link for my header image, if it helps.

   http://notchangingmyname.files.wordpress.com/2012/08/headercrop1.png

   Thanks in advance!!

   The blog I need help with is notchangingmyname.com.

2. zandyring
   Staff
   Aug 13, 2012, 12:17 PM

   Rory,
   It's pretty simple. The secret lies in the z-index property. It affects stacking order of the elements on your page. Here goes.
   In your hgroup img property, set the position to absolute and the z-index to 10:
   .hgroup img {position: absolute; z-index: 10;}

   In .blackbar and .ribbon-left add a margin-top property to 166px, like so:

   .blackbar {margin-top: 166px;}
.ribbon-left {margin-top: 166px;}

   That will get you what you want, and you can tweak from there to get it just right.
   Good luck!
   -Z

3. notchangingmyname
   Member
   Aug 14, 2012, 3:04 PM

   Zandryring thank you for the breakdown! I think I actually learned something, lol. With a tiny bit of tweaking I was able to get it to look exactly how I want. Thanks!!

4. zandyring
   Staff
   Aug 14, 2012, 7:35 PM

   I'm glad it worked out for you! You seem to be around a lot, so I'm sure you'll be a pro before long!

Topic Closed

This topic has been closed to new replies.