Version 3.3.0 was released earlier today. Actually the original version I had submitted was 3.2.9 and it had a really wonderful feature, but I had to pull that feature after the WP reviewer pointed out that it could pose a security risk. So here is the list of features:

1. Mixed mode layout
   One of the features that had been requested was the ability to display full contents for the top x posts and excerpts for the subsequent posts. I am happy to say that this release features this capability. You can have full contents displayed for a handful of posts and show excerpts, lists or tiles for the remaining posts on that page. You can control the settings via Blog Features –> Excerpts / Full Contents
2. I have deprecated a few options: "Category Info in ‘Display List’ option", "Author Info in ‘Display List’ option" and "Tag Info in ‘Display List’ option". You can use the controls in the individual templates for Category, Author and Tag respectively instead.
3. There is now a new control to display the tag description in the Single Tag template. Earlier you couldn’t see the description.
4. Fixed minor bugs in the “List” layout
5. I cleaned up some code for the different layouts, making things a lot more streamlined behind the scenes.
6. Thanks to Harry Karayannis, the Greek translation of Suffusion is now 100% complete.

Now for the feature that I had to pull. I had provided a really cool short code that would let you execute any PHP function as a short code. However I have had to remove that call, because in a multi-user blog you could have unauthorized people with author privileges call admin functions unchecked. If you are running a personal blog you can create the short code yourself, though. To do this, add the following PHP code to functions.php:

function sc_php_function($attr) {
    $function = $attr['function'];
    $params = $attr['params'];
    $params = explode("||", $params);

    if (is_callable($function)) {
        $ret = call_user_func_array($function, $params);
    }

    return $ret;
}

add_shortcode(‘php-function', 'sc_php_function');

Cheers.

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.

It was quite a surprise to see WordPress approve version 3.1.9 before 8:30 AM on the Pacific Coast. Nonetheless, here are the highlights of this release:

1. “Update Available” notification:
   
   I am happy to announce that I have put in support for a long-requested feature: an “Update Available” notification!! Mind you, if you have problems with automatic upgrades in general, this feature might not work. However, in general it should. After you install version 3.1.9, whenever you have a new version you should see something like this:
   
   
2. User Profile Enhancement:
   There were some nifty enhancements in WordPress 2.9. This release takes advantage of one such feature – custom contact methods. Under “Blog Features” you will now see a section called “User Profiles”. You can then choose to include things like your Facebook and Twitter information in the Users –> Your Profile section.
3. Author short codes
   A nice addition in this release is a set of very useful short codes. The short code is called “suffusion-the-author”. You can invoke it in your posts / pages by writing this:
   

   [suffusion-the-author display=’what-to-display’]

   The complete list of arguments that you can pass to the ‘display’ parameter is as follows:

   1. author – Shows the author name as defined in the “Display name publicly as” setting for the user
   2. modified-author – Shows the author who last modified the post
   3. description – Shows the author description, as filled in the profile page
   4. login – Shows the login id of the author
   5. first-name – First name of the author, as filled in the profile page
   6. last-name – Last name of the author, as filled in the profile page
   7. nickname – Nickname of the author, as filled in the profile page
   8. id – Id of the author
   9. url – Website of the author, as filled in the profile page
   10. email – Email of the author, as filled in the profile page
   11. link – Shows the website of the author if available, otherwise shows the display name
   12. aim – The link to the AIM profile
   13. yim – The link to the Yahoo IM profile
   14. posts – Number of posts by the author
   15. posts-url – A link to the author page for the author
   16. twitter – The link to the Twitter page, available only if Twitter is included in the user profile.
   17. facebook – The link to the Facebook page, available only if Facebook is included in the user profile.
   18. technorati – The link to the Technorati page, available only if Technorati is included in the user profile.
   19. linkedin – The link to the LinkedIn page, available only if LinkedIn is included in the user profile.
   20. flickr – The link to the Flickr page, available only if Flickr is included in the user profile.
   21. delicious – The link to the Delicious page, available only if Delicious is included in the user profile.
   22. digg – The link to the Digg page, available only if Digg is included in the user profile.
   23. stumbleupon – The link to the StumbleUpon page, available only if StumbleUpon is included in the user profile.
   24. reddit – The link to the Reddit page, available only if Reddit is included in the user profile.
4. “About the Author”

   You can now display an “About the Author” section for posts and pages. Fill in the contents in the “Author Information Content” section of the “User Profiles” section. You can mix and match the author short codes in this option:

   [suffusion-the-author display=’description’]
   [suffusion-the-author] has written <a href=”[suffusion-the-author display=’posts-url’]”>[suffusion-the-author display=’posts’] posts</a>. 

   This will generate put in the author description and add a line indicating how many posts the author has written.

I would like to take a moment and thank Connie Müller-Gödecke and Scott Beardsley for the incredible help you have been on the support forum. You have both considerably eased my workload!