Header Customization

The Header Customization options can be accessed by clicking on the “Header Customization” tab in the Options page:

suf-tut-header-customization-1

The Header Customization can be split into 3 different parts:

  1. Header Image Setup
  2. Header Text Color
    1. Blog Title
    2. Blog Description
  3. Header Text Layout
    1. Horizontal positioning of Title and Description
    2. Relative vertical positioning of Title and Description

As is the case with a lot of the settings in Suffusion, you have a control setting for this page. You can choose to use the header styles as defined by the theme, or those that you have custom-defined. Unless you select “Custom Styles” the theme’s settings will take precedence

Header Image Setup

Suffusion lets you use your own header images. Not only that, you can also use a custom color gradient, if you don’t want to use a header image, but don’t want a plain header either.

suf-tut-header-customization-2

The default is an image, and the default image is blank! So in effect your default is “No image”. This is one of those mathematician-physicist-engineer examples, where I did not have a “gradient” option initially.

Anyway, if you plan to use a custom image, you can do two things with it:

  1. Tile / Repeat – Repeat the header image either vertically or horizontally or both or not at all.
  2. Position it – top left, top right etc.

suf-tut-header-customization-3

The second option is to use a custom gradient. If you choose this option, you get to pick the starting color and the ending color of the gradient. You can also select the direction of your gradient:

suf-tut-header-customization-4

The gradient will span the entire length and width of the header.

Depending on the colors or the header image you have chosen, you may be required to tweak the colors of the text. This brings us to our next section.

Header Text Color

Before we get started here, what exactly are the Blog Title and the Blog Description. They are whatever you define in the Settings –> General section of the admin page:

suf-tut-header-customization-6 suf-tut-header-customization-7

 

Text color can be set for the blog title. You can also set the colors for the hyperlink and the effects of hovering over a hyperlink:

suf-tut-header-customization-5

Colors can also be set for the blog description / sub-header:

suf-tut-header-customization-8

Header Text Layout

You can choose to have your title and description appear at the opposite ends on the header, or together, with one just above the other. This may be a general preference, or necessitated by a header image that demands the text to be moved for better readability.

suf-tut-header-customization-9

13 Responses to “Header Customization”

Comments (13)
  1. I would love to know how to link the header image to an external web site.

  2. Greg says:

    Hi Sayontan,

    Beautiful job with this theme. I’ve been bouncing through a dozen or so themes to find a new look for my year-old blog, and I’m fairly certain I’m going to stick with this–and probably will dismantle my existing non-blog site and incorporate it into WordPress. You made this possible, so thank-you.

    I’ve tinkered for two evenings now, and everything is working except for one feature: header customization. Your customization features have thus far worked in every other area, and I think I must be missing something. I can’t move the header or change its colors, nor can I change the alignment. Basically, nothing I do from within the header menu changes the appearance.

    I apologize in advance because it must be a relatively simple fix, but my Google searches didn’t bear any fruit.

  3. Trevor says:

    I selected your theme for its versatility (left and right) columns, but mostly because of the last front page image on the theme thumbnail? um, How is that done please?

  4. chris says:

    why is it so difficult if not impossible to change the subheader text. I been looking for 4 straight hours. This is mad!

  5. Carlos Perez says:

    muy buenas noches me gustaría saber como puedo hacer para insertar un script en la cabecera al lado del logotipo de mi pagina me seria de gran beneficio tu ayuda

  6. Carlos Perez says:

    good night I wonder how I can do to insert a script in the header logo next to my page would be of great benefit me your help

  7. This is an awesome theme. I am having problems customizing header image also though, but all-in-all this is one of the best themes out there.

  8. This theme is amazing. But I have same problem I tried to change header of my page. I did what you said but couldnt.

    ” I entered http://www.example.com/wp-content/themes/suffusion/images/my-header,png

    I also yould add swf . How can add image header or my blog ?

Leave a Reply

(required)

(required)

© 2010 Aquoid Suffusion WordPress theme by Sayontan Sinha