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

  35 Responses to “Header Customization”

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

     
  2. 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. 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. why is it so difficult if not impossible to change the subheader text. I been looking for 4 straight hours. This is mad!

     
  5. 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. 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 ?

     
  9. Rotating banners, how to you make it work? I am trying and can’t seem to make it work.

     
  10. I agree, I also can’t get it to work. I have jpeg images loaded into the specified directory, but nothing loads. Am I missing something?

     
  11. Hi Sayontan,
    Bundles Of Thanks For This Great Theme,
    Please Explain How i Can Change Font Size Of Blog Name/Header Text?

     
  12. is there any totarial about this?

     
  13. I’m sory,
    I couldn’n find same topic in support forum.. Is there an video or tutarial about Header Customization and adding png photo?

     
  14. hello!
    Congratulations for this excellent theme!
    I am using the suffusion on my site.
    I need your help to reduce the margin from the top of the page.
    See example at:

    **http://www.fabricadoprojeto.com.br/members/rodrigo-minatto/

    Thanks!
    Rodrigo Minatto

     
  15. hello buddies… i have a question … i want to use costom logo … any one temm me how can i put my web logo

     
  16. i have another question .. i want to remove meta and links features … anybody tell me how can i remove th…..

     
  17. thank you for you theme it is really useful for me custom my blog layout

     
  18. Hi Sayontan
    Thanks for your amazing theme. I love it, especially the collection of dark layouts.

    My question is about hiding the header text from the user while showing it to the search engines.
    I heard that one should place the line:
    #header h1 { display:none }
    at the end of the styles.css file, I have done this and indeed the header text disappeared on the front page but it still shows on the other pages.
    So I wonder if there a way to fix this, or set the header text to null without introducing SEO problems ?

    Many Thanks
    Kirill

     
  19. I remember at the previous version, when I upload a image for header image, it will appear a box to let me select the area which I want to display on the header, but now this box is disappear.

    For now ,how can I adjust my upload image and select the area what I want to use and let it to be my header image.

    Sincerely

    Thanks.

     
    • Nothing has changed in the header skinning or positioning options. I didn’t follow what you mean by “select the area which I want to display on the header” – if you are asking about top left, bottom right etc those are all there.

       
      • Sorry for my nonsense.

        I mean the picture pixels fixing tool, like when I upload a pic with 1928*1026 and then I want to select the area for this pic and fix this area to 1001*118

         
  20. Hi I am going nuts! the other day I changed the header font on http://www.ciedestroispoints.com, through the Suffusion settings in WP Appearance, and now I want to change it again.
    But I have gone through all the settings and I cannot find the header font setting anymore!

    I have searched on the forums how to customise the header font through the Suffusion settings interface and can’t seem to find it.
    I feel rather stupid but here you go, I am lost and would be most grateful if someone can help. (Fantastic theme by the way).

     
  21. When I load a picture from my desktop to the Header Foreground Image slot, the image invariably winds up in the background. What’s up with that?

    Header problems seem to be common with this template. If someone has a For Dummies walk through with illustrations, I am sure a whole lot of people would be grateful.

     
    • Please use the support forum for queries and provide a URL. Do you have the numbers backing up your claim stating “Header problems seem to be common with this template”? From what I have seen in about 3 years of theme support, probably 1% of the people post with queries about header configuration – hardly a substantial number, and definitely none of their problems have anything to do with the theme.

       
  22. Hi Sayontan
    first of all 1000000000 thanks for your great work and help and support

    just have view questions : how can I center the image of all posts in the main page in Display excerpt and display it in full?

    How to move the title above the image in Display tiles?

    again thank you very much indeed for your great job.

     
  23. Hi Sayontan,
    I am using recent version of suffusion theme. When I use Magazine option, I got too small header font in excerpt header.

    Is there a way to increase the font of magazine excertp header ?

    Thanks in advance for your response.