Tuesday, October 19, 2010

Some small modifications of the SimpleFolio Wordpress theme

I'm using the delightful SimpleFolio Wordpress theme for the Rabbit Software website. I made a donation; it's nice to support good opensource work.

I found a few issues with it that I have addressed.

1. The single post view was incorrectly showing the excluded "Portfolio" category in its Recent Posts sidebar widget. In this theme, you can select a specific category to populate the homepage slideshow. One doesn't necessarily want those posts to appear as normal blog posts. Unfortunately, the exclusion function wasn't working on the single post view page. This problem is easily addressed by editing the sf_portfolio_filter function in the theme's functions.php file.

Change line 50,
if(!is_archive() && !is_admin() && !is_single()){
if(!is_archive() && !is_admin() ){

2. I'm using more than 3 homepage widgets, and they weren't wrapping nicely. While the first one had a proper margin-left:0, the fourth one had the default margin-left:30px. I realized there must be some javascript at work behind the scenes, inserting the inline styling to adjust the left margin. Indeed, I opened custom.js in the js folder, and found this line:
$(".home_widgets .widget:first").css("margin-left", "0");
A bit of snooping on the JQuery site clarified this usage for me, and I added this line:
$(".home_widgets .widget:eq(3)").css("margin-left", "0");
to make the 2nd line of 3 widgets line up with the first batch.

3. Of course, I've made a few custom tweaks to the stylesheet so far, such as adding more space below the unordered lists in the .home_widgets .widget class, and adding underlines to the links in the .home_widgets .textwidget.


  1. Great Stuff. Thank you for the insight. Have you discovered where the code is to change the transition speed for the portfolio slider?

  2. The slider timeout function is in the header. You would go to dashboard > editor and open header.php.

    Find the code the document.ready(function) code that sets the slider speed for the s3slider:
    $(document).ready(function() {
    timeOut: 3000
    and change the timeOut attribute to whatever you prefer. The default is 3000, or 3 seconds. I changed mine to 6000.

    I hope this helps!