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

Answers to most frequent "how-to" questions on Suffusion. You cannot post to this forum, only the administrator can. You can check here for some of the most common questions and answers.
Locked
sayontan
Site Admin
Posts: 10210
Joined: 15 Sep 2009, 16:39
Location: Houston, Texas
Contact:

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

Post by sayontan » 08 Dec 2009, 13:45

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

Locked