Blog Tipz

One of the most popular posts on the site to date is the resource highlighting hundreds of different blog/theme headers (a second version should be released, as the current version dates from February).  However, many people often encounter a problem when they want to implement a new banner/logo in the top of their theme.

Your header says as much about you as your entire theme, and it can be used in conjunction with your theme to create a stunning introduction for new visitors.  Put it this way: your theme expresses your creative ability (with typography, layout, what you have added to your site) and your header/logo/banner tells your readers how you greet people you see in real life – for this, you need to create the best experience for your readers.

There are several reasons why errors occur, which may relate to how you need to address your problem:

• Your header area isn’t wide or tall enough to accommodate the width/height of your logo/banner/header image or text.
• Some code isn’t correct, causing the header area to drop too far down/up, causing your theme to look “bad.”
• Not all logos/headers/etc. will work with all themes.  It may take some resizing before you’ll be able to get everything working and appearing the way you want them to.

General Instructions

Note: You’ll want to backup your theme file before continuing or you may lose information if something doesn’t appear they way you want it to.

Nearly all blog platforms are the same when you take a look at the underlying code – a combination of CSS, HTML, and PHP code.  Referencing tips that I mentioned before, you’ll want to be sure to learn some of the basics of these skills before advancing (or at least search the web along the way).

First, you’ll want to open up your HTML editor that you use, or the one in use on your website (albeit not always the best solution).  Generally, the header information will be found within the header.php file or stylesheet (style.css) – both for WordPress, but also pertain to many other platforms.

Find the code that references the image that you want to (or already has been) integrate into the header.  If there are any properties, such as borders around the image, you will be able to adjust them from here.

Basics of the Padding and Margin CSS Properties

These two properties are often used within blogs to add whitespace around images and other forms of media.  The CSS is the set of style code that helps define all elements in use on your site, so that you don’t have to use an excessive amount of HTML.

If you find anything in your theme related to these properties, this is one of the top elements which cause problems.

• CSS Padding Property - This property defines the space between the element border content.  No negative values are allowed.
  For Example: 
  padding-top
  padding-right
  padding-bottom
  padding-left 
• CSS Margin Property - This property defines the space around elements.  They can be changed independently using separate properties.
  For Example: 
  margin-top
  margin-right
  margin-bottom
  margin-left 

WordPress

Within WordPress, go to the Design panel, then Theme Editor to find the appropriate file/code to edit.

You may have to replace an area of the PHP code in order for everything to work properly.  On the other hand, some themes make it extremely easy to upload and implement a new image into your theme.

Blogger

In the “Edit Layout” area, click on the “Edit” link within the Header element, at which point you’ll be able to change everything from the Blog Title, Blog Description, Image used, Placement, and whether it is shrunk to fit.

These options present Blogger users a fair share of control, yet many find it difficult to add images due to the way they are supposed to be substituted into the themes.

Other Tips

Use a photo program to resize an image (using the program to take measurements of the exact size if you don’t know how to do so reading the CSS properties).  This way, a majority of errors on your part will be eliminated, resulting in a better chance of everything working.

Be sure that the image does still fit in the space alloted, or everything will become “messed up” no matter what.

It may take several times before you come across the exact size for the image, so eying up and making sure that the header/logo does appear OK is crucial, or your blog will look like a work in progress.

Remember that with some themes (as in the case of this site), no headers/banners/images, or colorful text necessarily drag in new visitors, but something that they want – content.