TUTORIAL

Adjust header image

In this tutorial I will guide you how to maximize your header image to be shown without any borders or margins. The header refers to the image/logo on top of the screen.

Introduction

First of all the theme is not made to customize your header image. And there are also other objects in the header like the social networking icons and the search bar.

The question what can be done with the header image doesn’t have a general answer. There are too many individual ideas how the header should be adjusted or look like. Nevertheless I will try to show what you have to do to maximize your image throuhout the whole header and without any margins.

I always try to avoid additional PHP coding. Changing code need a deeper understanding of the theme as it has a responsive design depending on the layout you’ve choosen. Changing a single PHP  line without knowledge of the bigger picture can easily end up in a mess when the layout is changed. And always remember that additional code might disappear in an update of that file.

To archive a plain, single image in the header the other elements in that area, like the search box and the social icons must be hidden. This tutorial will show you how to:

  • Remove all margins around the image
  • Hide social icons
  • Hide the search bar
  • Repositioning the search bar

1) Create a header image

Create an image that is the size of your blog.

For the best results (crisp and clear images) make the native image the exact pixel width of your header and the height you want. When done, upload in into the theme at “Design/Headline”. After the uploading is done, select the option that you DON’T want the image to be “cropped” and published but to be published without cropping (cancel cropping) and as it is.

In case there is no such button, reduce your image to a width of 1140px and try again.

Please make sure that in the theme options in the first section “Global Options” the Retina Header Image checkbox in NOT ticked.

2) Remove the margins around your image

Now we only have to add some definitions into your CSS. Add the following lines to your CSS section:

#site-title {
margin:0;
line-height:0;
float:left;
}

3) Hide social networking icons

To hide the icons add this to your CSS section:

#social-media-icons {
display:none;
float:none;
margin-top:0;
}

4) Hide the search bar

Add the following lines to your CSS section:

#header input#s {
display: none;
}

5) Release positioning

To remove the hidden search bar from the bottom add this to your CSS section

#header #searchform {
float:none;
}

6) Something special

What could be a nice idea is to split a bigger header images above and below the navigation bar. So it looks like the navigation is in the image.

How? Split your header image in two parts: One part of the image above the navigation bar (how to do in this tutorial) and another part of the image below the navigation bar. To show the image below the navigation simply use the slider in this theme with only ONE page (no caroussel) and remove the links.

In case you don’t know how remove the links from the slider image, there is another tutorial which might be helpful to you:

Adjust slider images and links.

THAT’S IT !!

I hope you enjoyed the show and it was helpful for you.

Cheers,
Alexander

  1. AshimaAshima10-15-2012

    Thanks for the post Alex!
    Can you also help with how can I change the header size? I want the header to be small in height so that my posts get more space .. but can’t find any css code to do that :(

    Thanks
    Ashima

    • AlexanderAlexander10-15-2012

      Hi Ashima,

      For the best results make the native image the exact pixel width of your blog and the height you want.

      Cheers,
      Alexander

  2. Shauna McIverShauna McIver10-24-2012

    Hi Alexander!

    I am hoping you can help me as I’m new to wordpress and just trying to create a simple website for my husband’s business. How do you get the images to display directly below the navigation menu? I don’t even know where to start :( Thank you for your time!

    With Thanks,

    Shauna

    • AlexanderAlexander10-24-2012

      Hi Shauna,

      What I guess you are asking about is called “slider” and a different thing than the header image, discussed in this topic.

      To add your silder to your blog you need to:

      1) Create posts
      2) Add thumbnail images to them
      3) Mark them as sticky
      4) Publish them
      5) Goto the theme options and in section “home page” tick the box for the slider to be shown

      That’s basically it. Hope that gives you an idea and help you to solve this step by step.

      Cheers,
      Alexander

  3. kiwikiwi10-25-2012

    Hi, your site looks great. I just found this template today and was looking at tweaking it. When you say Header Image, are you talking about the logo at the top of the screen or something else? I’m new to this WordPress layout.

    thanks again

    • AlexanderAlexander10-25-2012

      Hi Kiwi,

      Yes, this tutorial is about the logo/image at the top of the screen.

      Cheers,
      Alexander

      • kiwikiwi10-25-2012

        ah great. Thanks for the prompt reply and keep up the gerat work on the tutorials. I have subscribed to your blog too. :)

  4. SophieSophie10-31-2012

    Hi!

    I’ve changed the header image size and it works perfectly in Chrome and Safari but not at all in Firefox or Explorer. Help!!!!

    Thanks again…. :)

  5. ChrisChris11-01-2012

    Hi Alex!

    Thankyou so much for your post, I have been looking everywhere to find how to get rid of those ugly margins on my header.
    Just a quick question when you say add the code to the CSS section, which do you mean: style.css or editor-style.css.
    Also is there a way of adding the social media icons to the top of the page, just underneath the menu. Would it be as simple as cutting and pasting the existing code?
    Thanks again for this post!

    Chris

    • AlexanderAlexander11-01-2012

      Hi Chris,

      Glad I could help you with this.

      While there can be many CSS section it doesn’t matter in which you add the code as long at it is loaded after the theme CSS.

      To add the social icons underneath the menu needs more investigation as the responsive design of the theme can show unwanted side effects to the page when changing its size.

      Cheers,
      Alexander

  6. ChrisChris11-01-2012

    Hi again!

    Could you tell me where exactly in the style.css section I should add the codes?
    I tried inputting them at the bottom to no avail, am I doing something wrong?

    Warm Regards

    Chris

  7. ChrisChris11-02-2012

    Thanks so much.
    It worked perfectly!
    On a side note, do you know how to make the pinboard theme wider and how to get rid of the page drop shadow?
    Thanks in advance, your tutorials are extremely informative and helpful!
    Warm Regards

  8. hi, alexander! great advice as always. my question is: i’ve uploaded an image, but between the image and the nav bar, there is a white space. is something that coding would fix? thank you for your time, and thanks again for the help you’ve already given me!

    also, it shows up fine in chrome, but not quite right in firefox.

  9. KiwiKiwi11-12-2012

    I also noticed the same white gap under the menu, before the banner

  10. RomualdRomuald11-15-2012

    Hello,
    Thanks a lot for your tutorial :) I’m new into WordPress and just started to prepare a blog for my friend. My question regards the header image which in my case somehow displays bigger than it originally was. I prepared 1140x390px, uploaded it and skip cropping step, but in display it has something like 513px in height and cut off on the right edge. Can you please advise?
    I also copied 3 custom CSS lines from http://www.reiss.cc/2012/11/02/pinboard-wordpress-theme-adjusting-the-page-and-picture-width/ to have one column layout with more width and this seems to work ok.
    Thanks for your great work

    • AlexanderAlexander11-15-2012

      I’m not sure i understand this comment, sorry.

      • RomualdRomuald11-16-2012

        Well, I’ve just made several attempts and it looks like a bug for me. In the header configuration area: when the image is uploaded directly from the local disk it then shows distorted in the preview area (stretched horizontally) and in the header appears oversized. But once uploaded this way it then appears as a choice with a radio button lower in the header configuration area. Then if the same image is chosen from there it displays correctly 1:1.
        When asking my question first time I wasn’t aware of that.
        Kind regards

        • AlexanderAlexander11-16-2012

          No bug, just try to save the header configuration page at the bottom before you move on.

  11. duudeduude12-16-2012

    Thanks you very much Alexander, it’s just simply and perfect, go on !

    duude !

  12. AlexanderAlexander12-28-2012

    I’m no longer with the Pinboard theme.

    The tutorials are still accessible but no longer supported.

    /closed