This is part one of three covering the skinning settings within the Suffusion theme. This tutorial series will give a general review of the Suffusion theme to help familiarize you with this versatile and and highly customizable free WordPress theme. A written review of the materials covered can be found below the video.
In the video, the following skinning settings will be reviewed: theme selection, icon sets and the nav-bar above header setting will be reviewed.
This content is covered in the video but is available here for those who like to read.
To get to the Suffusion options dashboard from the WordPress dashboard hover over the “appearance” tab in the left hand navigation. Click “Suffusion options” and this will take you to the Suffusion options dashboard.
Now you can click “skinning” which is located in the top navigation of the Suffusion dashboard. This is where you will set some of the basic graphical elements for your site. “Theme selection” allows you to pick a basic color scheme for your website and Suffusion offers a variety of basic colors and designs from which to start. This basic setup may not look to stylish, but that will change as you continue your customization.
Next, from the left navigation, click on “icon sets.” Here, you can customize the basic icons that are visible on your site. There are a variety of icon sets to choose from. Choose an icon set that will complement the color scheme of your website. I usually just stick with the theme default. This will match your icon set with the basic color scheme that you have chosen.
If you want a navigation bar above your header, the visual appearance can be customized from the “navigation bar above header” tab in the left navigation of suffusion. You will first need to activate the top menu which can be done from the “other graphical elements” link in the Suffusion options top navigation. If you have already created a menu using the WordPress menu options, you can easily set your menu for the top navigation. This will be covered in another tutorial.
After clicking on the “other graphical elements” link, click on the “navigation bar above header” tab. There are a number of modifications that can be made to the nav bar from here, but for now activate the nav bar and add a couple of pages.
Set the nav bar above the header to show the top navigation bar. Now check to show the home page. You can show this link as an icon or a text link. I prefer the text link. Next, check the option to show individual pages instead of showing a tab called pages that drops down to show all of the individual pages include pages selected.
Once checked, scroll down to the heading titled “pages in the navigation bar” and check the button that says “Include selections from the next option.” Once you have checked this, you can tick the pages that you want to show in your navigation bar.
There are also options below to show categories and links in the navigation bar. These settings are performed the say way that you set the pages to be shown in the nav bar.
For your own site, you’ll just have to play with these options to see what you like and what you think will be best for your target audience.
Don’t forget if there is something that you don’t understand within these options, you can read the instructions under each heading and this will help explain exactly how each option will affect your menu.
Now click “skinning” in the Suffusion top navigation and then “nav bar above header.”
Note that if you choose to stick with the theme style your menu will have a nice color gradient that looks a little more slick. If you choose some other customized color, you will have a solid color with no gradient on your menu.
Any time you customize to your own colors, you will be overriding the custom gradient and border features that are provided with the basic theme skinning. Also, you will be overriding all theme styles for the particular element and therefore will need to apply all of your own modifications within the respective options.
As with any navigation bar within Suffusion, just about everything is customizable. In the skinning section you can change the nav-bar background, border, font style and size, menu item color, menu item border, menu item font, and link effects.
Some of these customizations can get a bit technical so keep it simple at first and learn how to manage the basics. Personally, I find it easier to stick with the default theme styles for the navigation menus, but if you look on the home page of this site, you will see how full customization can provide a really pleasing look and feel. Full customization does not always mean complex, it just means that you have full control of the options that are available.
In Suffusion Tutorials #2, we will continue our look at skinning options within the Suffusion theme.