moving header in Vintage Camera theme

  • 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:

    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.

    Thanks in advance!!

    The blog I need help with is: (visible only to logged in users)

  • zandyring · Staff ·

    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

  • 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!!

  • zandyring · Staff ·

    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!

  • The topic ‘moving header in Vintage Camera theme’ is closed to new replies.