Need help? Check out our Support site, then


moving header in Vintage Camera theme

  1. notchangingmyname
    Member

    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. 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

    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. 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.

About this Topic