Use a Logo / Image for the Header and Hide the Text

[sayontan]

In the past few weeks this has been the most frequently asked question on the forum:

How do I use a logo instead of text for the blog header and link it to my blog?

So I decided to take a few minutes to explain how this can be done. The process is really simple, but to understand this you have to get a handle of the different components of the header:

1. Header background - an image (or blank), that cannot be linked to. Think of it like a page background, except that it applies to the header.
2. Header foreground - this could either be a text link (containing the blog title) or an image link to the blog.
3. Description - always a text

Armed with this information you can define your header as you please. The following are some examples of configuration settings that you would do in the "Skinning -> Header" options:

1. Text header with no background
   
   1. Header Background Image Type => No image
   2. Header Foreground Image Type => Use text
2. Text header with gradient background
   
   1. Header Background Image Type => Use a custom gradient
   2. Header Foreground Image Type => Use text
   3. Set appropriate gradient parameters
3. Text header with a custom image as a background
   
   1. Header Background Image Type => Use a predefined image
   2. Header Foreground Image Type => Use text
   3. Header Background Image => Set full image URL
4. Image header / logo with no background
   
   1. Header Background Image Type => No image
   2. Header Foreground Image Type => Use a predefined image or logo
   3. Header Foreground Image => Set full image URL
   4. Blog Title / Header Alignment => Any option other than "Hidden" (under "Other Graphical Elements -> Header")
5. Image header / logo with gradient background
   
   1. Header Background Image Type => Use a custom gradient
   2. Header Foreground Image Type => Use a predefined image or logo
   3. Header Foreground Image => Set full image URL
   4. Blog Title / Header Alignment => Any option other than "Hidden" (under "Other Graphical Elements -> Header")
   5. Set appropriate gradient parameters
6. Image header / logo with a custom image as a background - A funny requirement, but definitely useful
   
   1. Header Background Image Type => Use a predefined image
   2. Header Background Image => Set full image URL
   3. Header Foreground Image Type => Use a predefined image or logo
   4. Header Foreground Image => Set full image URL
   5. Blog Title / Header Alignment => Any option other than "Hidden" (under "Other Graphical Elements -> Header")

Remember:

1. Your header foreground is always a link that points to your blog
2. You can hide the "Description" using the "Description / Sub-Header Alignment" option