In Suffusion Theme Tutorial #5, we’re going to continue with our look at the “other graphical elements” section found within the Suffusion Theme options. We are skipping over some of the other options at this time because several of the other settings must be activated from the “other graphical elements” section before we can modify their settings and see the results.
In Part 2 of the Other Graphical Elements covers header and footer setup and settings.
Next Tutorial: Layout Settings
Return to the Suffusion Tutorials Main Page.
For those who prefer to read, the following covers the content of the video above.
One note about header setup before we get started: WordPress has built in header options and if you are using Suffusion, I would not recommend that you use the WP header settings. Suffusion allows for full customization and better control over header settings.
If you have uploaded in image in the WP header settings, you will need to remove this header image. You can do that by accessing the header in the left navigation of the wordpress dashboard. If you see this tab, it means that you need to click it and remove the header image. After you remove the header image, you will need to save the settings by clicking the save button at the bottom of the page.
Now let’s look at the header options for Suffusion.
I usually leave the layout style set to the theme default, but you can play with these settings to see what layout you like.
Next, you can choose how to align your blog title and blog description in the header. Initially, the blog title and blog description were set up when you installed wordpress.
In the left navigation under settings…..and “general,”…… you can change your blog title and blog description if you need too…..This Suffusion option and the one below allow you to position the title and blog description in a variety of ways, or you can choose to make them hidden.
I personally like to hide the title and blog description and create my own headers, but you can also choose to display them and lay a graphic in the background. There are a number of ways to graphically display a header image, and we discussed this in a previous video when we covered skinning options.
The “other graphical elements” settings for the nav-bar below the header is where you can actually activate the nav-bar below the header. We discussed this in a previous video as well, but I want to run through the settings one more time.
Here you will activate the nav-bar or make it hidden.
The presentation of your navigation bar can be customized in the next setting. Just read through the description of each of these to get a feel for which one will meet your needs.
Next you can modify the way that the menu displays in the nav-bar. You can have the menu items appear centered, to the left, or to the right. The theme default is a left aligned menu.
From here, you can choose to display your menu items in individual tabs or you can display them as a continuous list.
The next two items affect how your drop-down menus will display when they appear. You can have a fade-in or you can have them appear instantly.
There are a number of ways that you can have your home page appear in your navigation and the easiest is to choose one of these options. The home page can be displayed as a text link or it can be displayed as an icon.
Here you can choose custom text that will be displayed for the home tab. And here, you can define the order in which Pages, Categories and Links appear in the navigation bar.
For the navigation bar, you can make some simple modifications to the text with these settings by selecting the option that most suits your needs.
In this next setting , you can control the display of pages in the navigation bar. This section can be a little confusing, so bear with me. There are two options. The default option which is the one on the right shows in a single tab that has a default title called “pages” if you hover over this “pages” tab, you will get a drop down list of all of the pages that you have included to be shown.
You can change the default title of this tab from “pages” to whatever you would like to show in the navigation. You can also associate a link with the tab so that if the tab is clicked on, it will take them to the specified page.
Now, the other option is to “show the top level pages in the navigation bar and their sub-pages. This is the setting that I prefer to use. After you set these top level pages to show, you scroll down and select the pages and sub-pages that you want to show.
If you tick “include selections from the next option”, you will then have to select the pages that you want displayed from this page selection menu. When you select Tier 1 pages and any subpage of the tier 1 pages, they will show up in your navigation bar. The tier 1 page will show in the tab and any subpages will show as a dropdown menu when you hover over the tab in the navigation bar.
Just as with the navigation bar above the header, you can also place categories and links in your navigation bar and these settings are identical to the settings for placing pages in your navigation bar below the header.
Now scroll down to the bottom.
Here is where you can control the display of the Built-in WP 3.0 Navigation Menus that will display in the navigation bar below the header. If you are seeing duplicate menus show up in your navigation bar, chances are good that you have chosen to show both the WP 3.0 navigation menus created here and you have activated the menu above in the Suffusion options as well. You will need to choose just one way to display the navigation menu.
I would recommend using the WP 3.0 navigation menus for a couple of reasons. First, if you decide to change themes, the menu setting will remain the same, you will just need to make sure that you have a theme that supports the number of menus that you are displaying and second…with WP 3.0 navigation it’s a little easier to customize your menus and place the menu items in a different order.
The “post and page bylines” options allow you to control that way that several things display on pages and posts. The author title, date published, and comments link can all be modified in this section. These things can be hidden or placed in several locations on the page to make the visual presentation more appealing.
As with the settings just discussed for post and page bylines, The “post formats” settings allow you to control the same settings when different format settings are used in a post. Let’s take a look at a post for a moment. When you create a post, you will see a box to the left titled “format.” In this section, you can choose a specific format for your page depending on what type of content you will be displaying. When you choose one of these over the default of “standard” and want to modify the visual appearance of the post bylines from the default settings, this is done in the “post formats” settings.
The next section is titled “Byline Configuration,” This section allows you to further customize the bylines of the site using your own custom HTML.
The “featured content slideshow” option allows you to set featured content to appear on your site above the content of a page. This can help highlight import information that you want your traffic to see. The featured content appears as a slide show at the top of a page below the header, and there are a number of visual options for the slider in these settings. You can also make the featured content slide show appear on specific pages throughout your site.
Next is the “Breadcrumbs and Page navigation options.” Breadcrumbs is a navigational aid within some themes including suffusion that allows visitors to understand their current location in the context of a website. This basically shows you where you’r at in relation to the home page. Here is an example. This breadcrumb lists Tier 1, Tier 2, Tier 3 and so on.
In these options, you can set where you want the breadcrumbs to appear or you can choose to hide them altogether. You can also choose the general location on the page where you want the breadcrumb to show.
Here you can set some basic options for navigating to previous or next posts and you can also choose some basic display options for navigation within your comments section.
Finally, in the Miscellaneous options section of the “other graphical elements,” you can set your site to show rounded or squared corners and you can set some basic settings for image thumbnail generation that may be used to improve the way that images appear in the featured content of your blog posts.
Next Tutorial: Layout Settings
Return to the Suffusion Tutorials Main Page.