Pinboard Theme Header Image Size

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!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>