Add image / icon above header

  • Resolved Foliferous

    (@revs)


    13 years, 4 months ago

    Hello!

    I have a question — right now I am using the Twenty Twelve style, slightly modified.

    On the picture below, you can see I have the title in a first line, then the menus, then the header. The thing is, I’d like to have a specific icon / little image where the big red spot is. Basically on the same line as the title, above the menu and the header.

    Where would I have to insert that code? I tried various things but it didn’t really work. The image is bigger than the title, so it can’t be in the same <p> or <h> or whatever as the title, or it will stretch the whole white area in which the title is currently located. I want the proportions to stay the same basically.

    I hope someone could help me out 🙂

    Thanks!

    Image: http://img402.imageshack.us/img402/1047/wordpressr.png

Viewing 7 replies - 1 through 7 (of 7 total)
  • WPyogi

    (@wpyogi)

    13 years, 4 months ago

    You must first create a child theme for any modifications to twentytwelve theme files – http://codex.wordpress.org/Child_Themes

    Otherwise all your changes will be lost when WP is updated.

    Once you have that done, post a link to your site for additional help.

    Thread Starter Foliferous

    (@revs)

    13 years, 4 months ago

    Thanks, it is already a child theme (based on Twenty Twelve) and my site is in localhost sadly!

    WPyogi

    (@wpyogi)

    13 years, 4 months ago

    Okay cool. You can add that as a background image by adding this to your child style.css file:

    @media screen and (min-width: 600px) {

.site-header h1 {
    background: url("COMPLETE FILE PATH TO YOUR IMAGE") no-repeat scroll right center;
}
}

    See how that works.

    Thread Starter Foliferous

    (@revs)

    13 years, 4 months ago

    Awesome! It works 🙂

    Thank you so much! Very appreciated.

    Thread Starter Foliferous

    (@revs)

    13 years, 4 months ago

    By the way, I just have another question. Is there a way to not use the complete file path to the image?

    It’s because I’m working on localhost, so when I put my site online, I’d like to avoid changing all the links. My image is in a folder called “icons”, why does (“icons/image.png”) not work? I also tried (“../icons/image.png”) and also tried the attribute background-image instead of background. Also tried using ‘ instead of ” but nothing worked!

    WPyogi

    (@wpyogi)

    13 years, 4 months ago

    WP doesn’t work well with relative file paths – but when you move it, you can use a plugin to deal with changing URLs / links – this one is quite good:

    http://wordpress.org/plugins/velvet-blues-update-urls/

    Thread Starter Foliferous

    (@revs)

    13 years, 4 months ago

    Oh, not bad either! I’ll look into it, cheers.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Add image / icon above header’ is closed to new replies.