Suffusion Custom Style Navigation Bar

 themes, tutorial, Wordpress  1 Response »
Dec 082011
 
suffusion-custom-style-navigation-bar

Donate for a cup of coffee :)

In this tutorial we are going to add some style to our navigation bar above the header. Remember these settings are simply to show you how to add style, I am not looking at the cosmetic side of my tutorial :) you can choose your own settings.

Navigate to Appearance >> Suffusion Options and select Skinning and click on Navigation Bar Above Header and make sure that you select Custom style. See image below.

Hint: Keep saving your work and make sure that you have selected Custom style or else your custom style will not be saved.

Add style to the navigation bar

Next navigate to Navigation Bar Background and select Transparent / No color. This is all you need to do to remove the white background from the navigation header as mentioned in the previous tutorial. See image below.

Remove the white colour from the Navigation Bar

We are going to add some more style to the menu. You can choose any combination of colours.

Navigate to Navigation Menu Items and under Background Color select Custom. I chose white background. You can choose any colour you want. See image below.

Style the menu items

Navigate to Navigation Menu Items Border and select the following as illustrated in the image below.

Add border to the navigation menu items

Navigate to Navigation Menu Items Font and choose which ever colour your prefer. I chose black font colour, you can also change the font style, size etc. See image below.

Add font colour to the navigation menu item

Navigate to Navigation Menu Items: Hover and select Custom and choose your colour. I chose blue for my hover background. You can also add an image to the background but for tis tutorial I am just going to be looking at adding a colour. See image below.

Add menu item hover colour

Navigate to Navigation Menu Items: Hover Border and select the border colour. I chose red and for the Border Width I chose 1. You can choose your own settings. See image below.

Add border colour to menu items

I hope you enjoy this little tutorial. Next tutorial add a slideshow to suffusion theme.

More suffusion tutorials:

  1. Adding a header image.
  2. Create a Suffusion Menu above the Header.

Suffusion WordPress Theme Tutorials

 suffusion, themes, tutorial, Wordpress  5 Responses »
Nov 262011
 
suffusion-wordpress-theme-tutorials

Donate for a cup of coffee :)

Adding a header image

We are going to learn how to add a header image to the website. This is a very simple tutorial which everyone should be able to follow free of issues :)

Hint: Remember to save everything you do or else it will not display on the front end of your website.

Hint: Click on any image to see a larger size image.

After you install Suffusion theme navigate to Appearance >> Suffusion Options >> Skinning >> Theme Selection, see image below.

Adding a Header image to Suffusion

Then navigate to Theme Selection, see image below and select which ever theme you prefer. I selected Royal Blue on a light theme.

Select a Theme for Suffusion Theme

We are going to add a png header image with 1000 x 204 pixels; you can choose another size if you want as long as you adjust the settings to accommodate the size of your image. Navigate to Header see image below.

Upload header image Suffusion Theme

Select the following options Custom styles, Use a predefined image (default) see image below.

Adjusting some of the settings Suffusion Theme

Add the Header Background Image see image below. Remember if you select the wrong image or are not happy just click on Reset and start again.

This is the image that has been uploaded for Suffusion Theme

Select the image position, I selected Middle of the page; see image below.

The image position has been set in the header.

Add the Blog Title/ Header Colour, I selected white. I selected None for Blog Title / Header Decoration and for Blog Title / Header Hover Colour I selected light pale purple. See image below. The colours I chose are just for illustration. Choose your own colours if you like.

We have set Suffusion theme Title colour

For the Blog Description / Sub-header Colour, I selected white. I left the default settings for Empty Space Between Top of Page and Header. I change the Height of the Header image to 130. See image below.

Here we set Suffusion Theme Sub-title colour

Hint: Remember to keep saving your work.

I left the Header Layout Style as Theme Default. I moved the Title and Sub Title to the left and the Sub-Header below the header text. Navigate to Other Graphical Elements >> Header. See image below.

We set up Suffusion Theme Other Graphical Elements

That is all you need to do to add a header image to the theme. See image below.

Suffusion Theme final settings set for the header.

There is something missing from the header. I don’t like the search bar where it is. Plus I want to add some menus to the header as well.

Next lesson Creating a Suffusion Menu above the Header.