WordPress Pinboard Theme: Fixing the Top Banner

Overall the Pinboard 1.0.7 and 1.0.10 themes for WordPress is a really lovely theme. It has lots of features and nice functionality. However you really never know a theme until you put a site into production and stumble upon its features and flaws. For Pinboard, I struggled with formatting the top banner for hours, until I discovered it’s secrets. While there is a forum for Pinboard, their help was sparse.

Site Title and Tagline: I wanted an image banner the width of the screen, or close to it. Pinboard has an option of a small banner coupled with a text site name and tagline. Since my graphic banner would include my site name and tag line, I turned off this feature.

Banner Size: The largest banner graphic I could add was 850px by 160px, discovered largely by trial and error, biasing more on the error part. The banner size is limited because there are social media icons on the right side, and if the banner is too large these social media icons will move down to a new line, thereby adding lots of unwanted white space. Further when you hit the search icon a large oval search box appears, which shifts the rest of the social media icons to a new line below it. Getting the optimally large sized banner while ensuring the social media and search icons don’t go to a new line was tricky.

Removing Extra White Space: The other major issue was the extra white space around the header and banner area. The following CSS code, which can be added to the custom CSS within the theme or in a child theme, solved the trick:

#site-title {
margin: 0px 0px 0px 0px;
line-height:92px;
vertical-align:top;
float:left;
}
#site-title img {
margin: 0;
vertical-align: middle;
}

Removing the Image Margin: Once I removed the margin in the header area, the banner still have a margin. This was when I discovered, using Firebug, that I could add a margin field to the #site-title img property. Uhhn.

Some things that are so innocently simple turn out to be otherwise. But now it looks nice.

Leave a Reply

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