Pinboard Theme Header Image Size

posted in: Daily Update | 8

The Problem:

I’m new to WordPress and I’m currently using the Pinboard Theme and I wanted to edit the header so that it does NOT display any texts, the search bar, center the title of my pages, remove social plugins and white margins.

Solution:

You must first make a child theme: Go here for instructions and why you need a child theme.

-Be sure to REMOVE any widgets from your header; to do this: Go to your WordPress admin’s panel -> Appearance -> Widgets. Then on the right side, you should see a Header drop down box. Click it and drag all the widgets to the left or outside the box to remove them.

-To do all the edits above on your website, you must first navigate to your WordPress admin’s panel -> Appearance -> Edit CSS ; All the code below will be placed in here.

1. The Header Text:

I went to the WordPress Admin’s Panel. Clicked on Dashboard on the left of my screen. Then I clicked the button that says “Customize Your Site”. From there, It should take you to your website with some options on the left. Click on Site Title and Tagline. Uncheck the Display Header Text Box.

Then add the following code to your Edit CSS page:

#site-description {
display: none;
margin: 0;
font-weight: 300;
float: left;
line-height: 0;
}

2. The Search Bar:

Add this code to the Edit CSS page:

#header #searchform {
display: none;
float: none;
}

3. Center The Title of My Pages:

Add this code to the Edit CSS page:

.page .entry-title {
text-align: center;
}

4. Remove Social Plugins from the Header:

Add this code to the Edit CSS page:

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

5. The White Margins Surrounding Your Header Image:

Add this code to the Edit CSS page:

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

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

#sidebar-header {
display: none;
}

#sidebar-header {
float: none;
width: 0;
height: 0;
margin: 0;
overflow: hidden;
}

#header-image {
display: block;
max-width: 100%;
}

After putting all those code in the Edit CSS page; I went to my website and right clicked the header and clicked “Inspect Element” to view the source code for my website. I then expanded all the following: <div id=”wrapper”>  -> <header id=”header> -> <h1 id=”site-title”> -> <a href=”http:yourwebsitehere” rel=”home”>. After that, I hovered over site-title and it displayed the dimensions for me. If the width of my image was different from the site-title’s width then I removed the image from media library. Made a copy of the image I wanted to use on my desktop and then open it with paint to re-size it to the right width with the height I wanted. After that, I went to header tab in my WordPress admin’s page and uploaded this new image. After it uploads, DO NOT crop it and instead select the option that says ignore cropping and display this image. Then go to your website and it should work! If not, use the inspect elements to see which part of the code is not scaled with the correct dimensions.

New Edits because of wordpress 3.8.1 – 3/12/2014

After updating wordpress, my website’s header image had a lot of problems but with a bit of css, I got it working again. Here is a link to what I did: http://slamlink.net/posts-38/. I hope that helps!

*note: The Dimensions I ended up using for my photo was 1140 x 381.


I got most of these codes from several sources and I tried a bunch of different solutions but when I finally came up with this set of code and editing my image, it worked! I hope this helps anyone looking for a solution to similar problems that I experienced. Again, I’m not an expert so if you need any further assistance with your website please open a new thread here and someone should help you like they did for me!

8 Responses

  1. Finally! I’ve been trying to figure out how to remove the margin around my header image and other tutorials did not work. Big thanks!

  2. NICE! I’ve been messing around with this, trying different combos and this helped me out a lot. Thanks

  3. I have been looking for a way to do just this. I am going to give it a shot right now and see how it works. Fingers crossed!!

  4. Thank you SO much. This helped a ton. I did have to add one extra bit of code into the css to get the new header image to stretch all the way across. I aded the “width” to the site-title img tag. But once I did that, it worked perfectly. Thank you so much!

    #site-title img {
    margin: 0;
    padding: 0;
    float: left;
    line-height: 0;
    width: 1140px;
    }

  5. Adam Pasion

    Thanks for consolidating all this. I went through this whole thing myself hunting down scraps of code here and there to piecemeal my way into a solution. Then last year my site went down and when I tried to rebuild it I remembered this issue and eventually just gave up because of how long it took to find a solution the first time. I cursed myself for not writing it down. Now that you have it all together I hope other people can figure it out more quickly than we had to!

  6. Thank you, thank you, thank you!

  7. Hi

    Thanks. I’ve changed the header image size and it works fine.

    Thanks to all

    http://slamlink.net/post-2/
    http://www.mouseclick.com/tutorials-2/adjust-header-image/
    Ryan ( for image stretch )

  8. Thank you for this post, helped me a lot! :) Like Ryan in his comment, I had to also add the width to the css, but now it works.

Leave a Reply