WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
Adding More Than One Logo/Header Image (21 posts)

  1. canu
    Member
    Posted 7 months ago #

    Hi,
    Is there a way of adding more than one image to the header area.
    We would ideally like to add the logo to the left hand side of the header area with a link to the Home page and a custom button on the right hand side of the header with a link elsewhere.

    Is this possible?

  2. batharoy
    Member
    Posted 7 months ago #

    Yes it is, it would require editing the header.php file so you would need to create a
    child-theme first.

  3. respectyoda
    Member
    Posted 7 months ago #

    I concur with batharoy. You can first safely create a child theme then copy the header.php from the parent theme folder and put it in your child theme folder and edit it.

  4. canu
    Member
    Posted 7 months ago #

    Thanks for the quick feedback.

    I've created a child theme and have an amended header.php file uploaded, what would be my next step?

    Apologies if the question is a little facile but I don't know PHP so any assistance would be appreciated.

  5. respectyoda
    Member
    Posted 7 months ago #

    You don't really need to know PHP as you can just use HTML in which you insert img tags.

    Read this article on img tags.

    Image Tags

  6. batharoy
    Member
    Posted 7 months ago #

    Look for this section in the header.php

    </hgroup>
    ENTER YOUR CODE HERE
    <nav id="site-navigation"

    Be sure to give it a unique id.

    For a link with image:

    <a href="LINK TO EXTERNAL SITE"><img src="LINK TO IMAGE" /></a>

    For a CSS style button:

    <a href="LINK TO EXTERNAL SITE" target="_blank">TEXT FOR BUTTON</a>

    Then use css to position and style as needed.

  7. canu
    Member
    Posted 7 months ago #

    Thanks Guys, much appreciated.

    I will give this a try soon and will you know how I make out.

  8. Peter Wilson
    Member
    Posted 7 months ago #

    Sorry to hijack this thread but I have just posted something very similar myself. I had sort of come to the same solution suggested by Batharoy but when I try this it ends up pushing the existing site image upwards. I am somewhat new to all this so is the suggested unique id in this code

    <img src="LINK TO IMAGE" />

    the bit in quotes or is it the "a" before href; like a, b, c, etc

  9. batharoy
    Member
    Posted 7 months ago #

    The unique ID wasn't put in the code above, sorry. It would be structured like this:
    <a id="header-logo" href="LINK TO EXTERNAL SITE"><img src="LINK TO IMAGE" /></a>
    The id can be anything you want but it's best to use something that describes the element.
    In this case it's usually someone wanting a logo along with the site title text title in the header.

    You can then use the id in your css:

    #header-logo{
    align: left;
    }

    etc...

  10. Peter Wilson
    Member
    Posted 7 months ago #

    So in my instance I am trying to get the Floating Social Media Icons from the Acurax Pluging to align to the right hand side of my header. I initially used ths following code but I pushed the existing site image upwards. Is this because I never gave it a unique id.

    <?php DISPLAY_ACURAX_ICONS(22,48,0,'bounce',0.9); ?>

  11. Peter Wilson
    Member
    Posted 7 months ago #

    <a href="Social Media Icons"><?php DISPLAY_ACURAX_ICONS(22,48,0,'bounce',0.9); ?></a>

  12. batharoy
    Member
    Posted 7 months ago #

    The php snippet takes care of the href= , you would want the id in that spot. Also if using more than 1 word in the id use hyphens or it will add as a separate id for each word.

    <a id="social-media-icons"><?php DISPLAY_ACURAX_ICONS(22,48,0,'bounce',0.9); ?></a>

  13. Peter Wilson
    Member
    Posted 7 months ago #

    Firstly, I apologise to canu for hijacking this thread. Thanks to Batharoy for the suggestions. However, there is still a problem with alignment. What is happening is that the h1 site-title has full page width allocated to it and even though the image aligned to the left is only 238px wide. When I try and place the social media icons in the same area it also allocates an additional full page width to area it is placed. Hard to explain really, but the bottom line is that horizontally I can place the social media icons exactly where I want them but vertically I cannot get them on the same line as the site-image.See here http://tinyurl.com/orzpzaz

  14. batharoy
    Member
    Posted 7 months ago #

    OK, after looking at the source on your site it appears the php snippet already assigns an id to social widget. There is no reason for you to add one.

    It also looks like you added the <a id="social-media-icons" info twice,
    the first has only <style> info and the second is empty. Your only allowed one id per page.
    So let's start by removing both of those completely.
    After that we will style it the way you want.

  15. Peter Wilson
    Member
    Posted 7 months ago #

    Ok. You will have to bear with me on this as I am a total newcomer. A full 2 weeks and 1 day. I have removed all reference to this from the Header.php file and the positioning from the style.css. Hopefully, thats everything gone.

  16. batharoy
    Member
    Posted 7 months ago #

    Ok now put the php snippet back into the header.php, i believe it waas in the <hgroup>tag.

    <?php DISPLAY_ACURAX_ICONS(22,48,0,'bounce',0.9); ?>

    But only the snippet, nothing else.

  17. Peter Wilson
    Member
    Posted 7 months ago #

    Done that.

  18. batharoy
    Member
    Posted 7 months ago #

    Now add this to your css:

    .site-title {
        float: left;
    }
    #short_code_si_icon {
        float: right;
    }
  19. Peter Wilson
    Member
    Posted 7 months ago #

    OMG, you are a hero - again. Is there any way I can now get the social media icons to move downwards slightly. So they are in line with the word dance.

  20. batharoy
    Member
    Posted 7 months ago #

    Add some padding-top to the #short_code_si_icon so it would look like this:

    #short_code_si_icon {
        float: right;
        padding-top: 30px;
    }

    Then adjust the number to what you want.

  21. Peter Wilson
    Member
    Posted 7 months ago #

    I cannot thank you enough. I have tried for about a week to do this. I even went through the pain of creating a widget in the header. Which worked but again, I had problems aligning it to the right. I'm sure you have helped me with something else previously. You are a star. I can now move on to look at other stuff. Thanks again.

Reply

You must log in to post.

About this Theme

About this Topic