There are Some Things Suffusion Can’t Do; For Everything Else there is the “Custom Styles” Option

Update: With release 3.7.5, the path to the options is Suffusion Options → Back-end Settings → Custom Includes.

Update: With release 3.4.2, the option group below is no longer called “Custom CSS, JavaScript & RSS”, but it is called “Custom Includes”

I decided to take a pause from my breakneck development and highlight one of the best, and most understated features of Suffusion – Custom Styles. The inspiration for this article is one of the most frequently asked questions that I get:

When I clicked on “Upgrade” I got a message saying that all my changes will be overwritten if I upgrade. Is this true? I don’t want to lose hours of work that I put in to customize my site.

The answer to this question really lies in qualifying “hours of work”. If you have spent the hours modifying the CSS and PHP files in Suffusion, then you are out of luck. You will indeed lose hours, which is a shame because all your CSS changes are absolutely unnecessary.

Seasoned users of Suffusion are probably aware that you can customize your installation of Suffusion almost as you please and not lose any settings when you upgrade. This post is directed towards users who aren’t sure about how to do this. The concept is really, blindingly simple. But before that you need a couple of tools:

1. A nice standards-compliant browser, preferably Firefox or Chrome. Though there are other standards-compliant browsers, I would recommend these because of the wealth of extensions.
2. At least one of these Firefox extensions, if you are using Firefox: Firebug or Web Developer. Both tools are awesome, though I have a slight preference for Firebug because it seems more concise. If you are using Chrome, you are good to go because Chrome offers an inbuilt feature called “Inspect Element”, which you can see upon doing a right-click on any page element. For people with difficulties switching to the better browsers and still stuck with IE, IE has an extension called DebugBar.

You also need to have rudimentary CSS knowledge, which in the days of Internet excesses, can be readily obtained at W3 Schools. And for some serious CSS stuff, there is a set of CSS tutorials at 456 Berea Street that is just phenomenal. Armed with the tools and knowledge, here is what you need to know:

You don’t need to edit ANY CSS file to change the look and feel in Suffusion.

Yup. Instead, do this. Navigate to Suffusion Theme Options –> Blog Features –> Custom CSS, JavaScript & RSS.

There you will see an option called “Custom Styles”.

That is where you can put in all your CSS tweaks. This block is called last when Suffusion is being loaded, so if you want to override any of the theme’s styles your best bet is to put in the styles here. Of course, you might have a plugin that does its own fancy things and overwrites Suffusion’s styles, and if that is the case then you will need to badger the plugin’s author for information about changing a style definition. But for everything else, this little option will suffice.

Let me walk you through this with a little example. To start with, I have enabled the “Top Navigation Bar” on this page. Here is how it looks by default:

This doesn’t go very well with the overall transparent look of this site, so I will make the background of the top navigation bar transparent. Without editing any of my theme’s stylesheets. First I will make use of Firebug. Installing Firebug adds an item to the context menu – “Inspect Element”. So I can right click on the navigation bar and inspect it:

Here is what Firebug shows me:

So the element is called “#nav-top”. Now I do some CSS magic in the Custom Styles:

#nav-top {
        background: transparent;
        border: none;
}

This makes the background transparent and removes the border:

Much better, but I want some rounded corners for the first and last items. But what do I need to modify? Again, Firebug comes to the rescue. I right-click on “Themes” and inspect the element:

OK, so inside #nav-top there is a div with class “col-control”, inside which there is an unordered list (ul) with class “sf-menu”, which obviously has a list item (li) with the links to the pages in the menu. This is a lot of information, but luckily we don’t need to know so much. The good thing about CSS is that the rules and structures are cascading, so I don’t need to call the interim levels if I can avoid it. This is what I add to my custom styles:

#nav-top ul.sf-menu li,
#nav-top ul.sf-menu li > a,
#nav-top ul.sf-menu li > a:hover {
        border-bottom-left-radius: 5px;
        -moz-border-radius-bottomleft: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -khtml-border-bottom-left-radius: 5px;
}

#nav-top ul.sf-menu li,
#nav-top ul.sf-menu li > a,
#nav-top ul.sf-menu li > a:hover {
        border-bottom-right-radius: 5px;
        -moz-border-radius-bottomright: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -khtml-border-bottom-right-radius: 5px;
}

This works, but a bit too well, unfortunately, rounding off all the corners:

Here the articles from Berea Street come really handy. All I need to do is define the bottom left corner for the first list element and the bottom right corner for the last CSS element:

#nav-top ul.sf-menu li:first-child,
#nav-top ul.sf-menu li:first-child > a,
#nav-top ul.sf-menu li:first-child > a:hover {
        border-bottom-left-radius: 5px;
        -moz-border-radius-bottomleft: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -khtml-border-bottom-left-radius: 5px;
}

#nav-top ul.sf-menu li:last-child,
#nav-top ul.sf-menu li:last-child > a,
#nav-top ul.sf-menu li:last-child > a:hover {
        border-bottom-right-radius: 5px;
        -moz-border-radius-bottomright: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -khtml-border-bottom-right-radius: 5px;
}

This looks much better, excerpt for one minor quirk – the first elements in all lists have rounded corners:

So we need to tell the code to only pick the first and last children of the top level list. Again, this is done easily using the “>” selector in CSS (refer the Berea Street link above):

#nav-top ul.sf-menu > li:first-child,
#nav-top ul.sf-menu > li:first-child > a,
#nav-top ul.sf-menu > li:first-child > a:hover {
        border-bottom-left-radius: 5px;
        -moz-border-radius-bottomleft: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -khtml-border-bottom-left-radius: 5px;
}

#nav-top ul.sf-menu > li:last-child,
#nav-top ul.sf-menu > li:last-child > a,
#nav-top ul.sf-menu > li:last-child > a:hover {
        border-bottom-right-radius: 5px;
        -moz-border-radius-bottomright: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -khtml-border-bottom-right-radius: 5px;
}

In the above we are telling the code to only apply the rules to the immediate children of the top level list, not nested children. The result is indeed pleasing:

No unwanted rounded corners are seen above. Now let’s say we want to add some finishing touches by increasing the space between the top level items. Again, using Firebug and basic CSS:

#nav-top ul.sf-menu > li {
        margin-right: 5px;
}

That completes the exercise and I now have the look I set out to achieve:

The good thing is that all my changes are stored in the database and not as files. So even if I upgrade my theme I am covered.

One of Suffusion’s active contributors in the support forum, Connie put together a very descriptive article on the same topic, but using Web Developer as the extension.