Sayontan Sinha is a technology strategy consultant living in Houston, Texas. Coding is his hobby, as are philately, numismatics, classical music, creative writing and quizzing. He is the author of numerous pieces of WordPress software, including the ultra-popular Suffusion WordPress theme and the versatile Photonic (for Flickr, Picasa, Smugmug and integration) and FontMeister.

Sep 182009

I first came across the awesome Docking Boxes (dbx) on Nick La’s awesome theme, iTheme. Not sure what Docking Boxes are? Look at the side of this blog. You can drag the widgets up and down and collapse or expand them as you want. This is all thanks to some really great code from Brothercake.

To the best of my knowledge iTheme was the first WordPress Theme to look very much like a Mac, hence it was extremely popular. In fact a lot of themes have tried to use the concepts behind iTheme, including using the very same dbx code that runs behind iTheme

  1. MangoOrange developed a 3 column format for iTheme, which, naturally uses docking boxes.
  2. PageLine’s iBlog2 and a host of other themes use the same dbx code as in iTheme.

In fact I was using the docking boxes code from iTheme for Suffusion myself (I was too lazy to download and configure it from the original), so I was surprised when I found that it didn’t work as expected in Chrome. In particular I could not get the widgets to expand or collapse.

I ran tests on all the above themes as well – none of them seemed to have this working. I figured it was because iTheme was a pretty old release. Quoting from the website:

Tested on WordPress 2.0 and 2.1 on the following browsers: IE, Firefox, Safari, Opera

Given that at the time of writing the current version of WordPress is 2.8.4, this is a really old theme, which definitely predates Chrome.

Anyway, for theme developers out there, the fix is really simple:

  1. Make a backup of dbx.css and dbx-key.js in your theme.
  2. Download the latest release from Brothercake.
  3. You only need three files from the original – dbx.css, dbx.js and dbx-key.js. Copy these into your theme’s directory.
  4. Merge changes you had made in your stylesheet dbx.css to the new file.
  5. You don’t need to touch the new dbx.js
  6. You will need to make only one tweak to dbx-key.js, which is to rename the variable that invokes dbxGroup to whatever it was earlier:
    var sidebar = new dbxGroup(

That’s it – you are set. Now you can test it out on all browsers – it should work.

Sep 142009

Good news for people asking for a narrower main page – I brought it down to 1000px. The difference is imperceptible, but users concerned about low-res monitors can now breathe easy. In a subsequent release I am going to make the width configurable.

I also put in a few other features:

  1. Dynamic gradient images in the header
  2. Ability to add some more styles, stylesheets and JavaScript code without modifying the files – I have some plugins that allow you to define a custom stylesheet, which needs to be present in your theme’s directory. I found it a bit of a hassle, having to manually tweak the files whenever I upgraded the theme. This feature helps you tackle this kind of a scenario.

Current development work includes:

  1. Configurable overall width – I have been scratching my head about the 2 and 3 column formats for this. In the “Sidebar Setup” section I currently have some options defined for adjustment in case you use 2 sidebars, so I now need to figure out how to tackle this with configurable widths. One option could be to allow the sidebar widths to be configurable as well, but I really don’t want to go there – you can easily end up wrecking cross-browser compatibility.
  2. Internationalization – I cannot believe I forgot to mention this in my last post. I am going to tackle internationalization pretty soon.
  3. Extra widget areas – I guess I will have a “complete” theme when I provide this.
  4. Segregation of comments and trackbacks / pingbacks / tweetbacks

Anyone with any other suggestions?


Sep 082009

Suffusion 2.2.1 went live on 8th September. The key features in this release are:

  1. New colors – You can now pick an orange-base
  2. A “Home” Button – You can show a “Home” icon or tab in addition to the pages on your blog in the navigation bar
  3. Control over comments – You can hide your trackbacks / pingbacks if you don’t want them to show up with the rest of the comments.
  4. Better sidebar control – You can now define the font / link colors for your sidebars. You can also turn off the “drag-and-drop” feature or the “expand / collapse” feature for the widgets.

Plans for the upcoming releases:

  1. The feature that has been requested the most is a narrower page. I was inconsiderate enough at the time of building the theme, to have a default width of 1050 pixels. That is 26 pixels more than what people with older monitors can see. So my first priority at this moment is to either have the width configurable or to have some predefined widths to pick from.
  2. In version 2.1.5 I introduced an extra sidebar. I have been toying with the introduction of new widget areas, particularly in the footer.
  3. I have also been working on custom gradient backgrounds for the header. I have my gradient code ready, but the testing is taking time, and I have not had the opportunity to tie it with the options yet.
  4. The last feature I have been thinking about is separation of trackbacks / pingbacks / tweetbacks from the rest of the comments. The easy way to do it would be to use jQuery (or some predefined JavaScript library), but I am not very keen on loading a big JavaScript library. Let me see how I can implement this.

I believe that with the above list I should be through with the overall feature list for the theme, unless someone has a few other suggestions. A vote of thanks for the users of the theme who have been providing me feedback – your inputs have been extremely helpful. Thank you!

Aug 312009

Version 2.1.0 of Suffusion was released on August 31st. This was a minor release, with the following new feautures:

  1. A red theme was introduced
  2. Some bugs were fixed on the comments pages and in the page breadcrumbs

As usual, the theme can be downloaded from the official WordPress site. Any comments, feedback and queries are most welcome.

Aug 272009

Version 2.0.x of Suffusion was released on 25th August 2009. Such a jump in versions was warranted because of the significant enhancements to functionality by providing theme options. To provide a gist:

  • 9 new color schemes to choose from. The original used to be green on white. Now I have green, pale blue, royal blue, light gray and dark gray, all on both black (dark) and white (light).
  • In addition to the canned schemes, you can pick any one and customize the colors further. You can set the colors for the header title and description and for the fonts in the main body. You can define the colors for links, link hovers and active links. You can also have your custom colors for the body background.
  • You can use your own header and background images to make things more spiced up.
  • Your sidebar boxes can be unstyled or have more colorful headers.
  • Your sidebar could appear on either the left or the right side.
  • You can control which pages you want to show in the navigation bar. If you exclude a parent page, all the children pages are hidden automatically
  • You can add code for Google Analytics and OpenID setup
Aug 032009

I am happy to announce “Suffusion”, my first experiment with a WordPress theme. The theme can be downloaded from the official WordPress Themes page.

The theme uses light colors – mostly green, white and gray. It also makes use of Brothercake’s Docking Boxes, Drew Diller’s belatedPNG and some CSS3 features. It is a two-column fixed-width theme with widget support built in. In addition it supports drop-down menus from the navigation bar.

I have tested it for the following browsers:

  • Internet Explorer:
    • 6.0, 7.0, 8.0 – Works fine, but doesn’t show rounded borders or shadows (CSS3 features). Also, version 6.0 creates problems with displaying long page names.
    • 5.5 – Doesn’t show rounded borders or shadows (CSS3 features), shows extra space below the navigation bar, and creates problems with displaying long page names. I haven’t had much time to debug for a fossilized browser.
  • Firefox:
    • 3.0, 3.5 – All features work as designed.
    • 2.0 and below – Haven’t tested, but I think it should be okay for everything apart from the rounded borders or shadows.
  • Safari:
    • 4.0+ – All features work as designed on both Windows and Mac
    • 3.2 and below – Haven’t tested, but I think it should be okay for everything apart from the rounded borders or shadows.
  • Opera:
    • 8+ – Works as designed, except for rounded borders and shadows
  • Chrome:
    • 2.0 – All features work as designed, except for the docking boxes. The boxes show up and can be moved around, but cannot be collapsed or expanded. I believe this has something to do with the stripped down version of the docking boxes code that I use (as do most other WP theme designers).

The theme is XHTML 1.0 compliant. Please feel free to pitch in with comments and bug reports.