am i the only croquet-playing computer nerd?

« How about some open source days? My Summer Infant video monitor experience (fail) »

iwBase: A responsive starter theme for Habari


iwBase is a responsive starter theme for Habari. It comes with two stylesheets supporting responsive fixed and responsive fluid layouts. The stylesheets include empty directives for all core areas, and leave most styling up to you. iwBase borrows heavily from Skeleton, as well as the core Habari themes Charcoal and K2 (K2 was a core theme until version 0.8 of Habari).

Download iwBase 0.8.1 from GitHub


iwBase is intended as a few-frills starter theme. The image shows the header with Title, tagline, and navigation (navigation is hard-coded in the header, I did not want to include a custom menu block). Beneath the header is the left content section which includes a top banner area, and the main content display. The sidebar area is configured on the right. A bottom banner area covers the full width at the bottom of the page, directly above the footer, which displays a basic 'powered by habari' message and the atom links.

The theme includes a configuration option that selects either the fluid or fixed stylesheet. The main and sidebar columns stack on tablet width screens and smaller.

I have not tested reverse compatibility, and assume that there will be minor issues in versions of Habari 0.8. If lots of people want iwBase for 0.8, I'll consider back-porting. Honestly though, you should upgrade, and I'll likely just point you to Msikivu (which supports 0.7) or some other theme.

10 Responses to iwBase: A responsive starter theme for Habari

Feed for this Entry


  • I'm just getting started with Habari and after a day fighting the charcoal theme, finding isBase is wonderful. I'll work with the css a bit, and hopefully post a link to my working version. It might be worthwhile to have a gallery of changes (think css garden) to encourage modifications.


    #7753 | Comment by Ken on Jan 18, 2012 01:50pm
  • @K - Glad it's a decent starting point for you. There's work from the Habari team now on enhancing usability for their plugin and theme repositories, that will make it easier to find themes.

    Until then, definitely check the mailing lists or IRC channel (#habari), there's generally someone around who can help.

    I'm looking forward to see how it turns out!

  • I've been puttering with your theme for a few days. I'm really happy with the minimal number of divs, as the complex mass of divs on the 'official' theme completely defeated me.

    One problem I have run into is on the page for comments. 'Leave a Reply' is directly above the first text input field, which is for the Name. Name is directly above the second text input field, which is for the mailing address. Mail is above the third, which is for the url, and website is above the large text area, which is obviously for the comment itself. I can't find where the label content is generated to correct it, and I can't correct it in css. Sigh....

    #8088 | Comment by Ken on Jan 22, 2012 09:50pm
  • @K - Thanks. This was brought to my attention and I had forgotten about it, thanks for reminding me. I bugged it at github; and will address it as soon as I can.

    [UPDATE] This is fixed in master as of 2012-01-23. I have a couple other issues I want to address before I tag a new version, but this will remain, and you can get it now by pulling the master branch.

  • I copied formcontrol.txt.php from your git into my file and it works perfectly. However, it is now obvious that the form repeats itself three times about the number of comments.

    One -- is under the text of the blog,
    the Second -- is under that, starting with '0 Responses to' and the post title, then there is a link, followed by,
    the Third -- which seems to be an ordered list with 'There are currently no comments.'

    The second seems to come from comments.php lines 3 to 7 and 29 to 33. I'll try commenting out the php that echos that output....

    #8091 | Comment by Ken on Jan 24, 2012 10:05pm
  • @K - On what page do you see the repetition (home, multiple entries, single entry, or)? Also, did this happen only after updating the formcontrol file?

    I have this running on a few sites and had not seen this behavior.

    Logistically, let's move this over to either github or the #habari irc channel. I think it will be a lot easier to address this quickly and efficiently via those avenues.

  • It was fairly easy to get the form a little more DRY by eliminating the extra notes about comments. Unfortunately today was the first time I tried what I'd done on the (admittedly evil) IE. I expected a few problems, but not total disaster. Anything less than IE 9 ignored all styling on html5 tags. Don't know why, that just seems to be what happened.

    Even worse, the admin pages fail to load with anything less than IE 9, which suggests the problems will be deep rooted...


    #8093 | Comment by Ken on Jan 25, 2012 04:13pm
  • You'll want to add (note I'm removing the < symbols from the beginning of tags, don't have time to troubleshoot code styling/escaping at the moment):

    !--[if lt IE 9]>
      script src="">/script>

    To support older IE browsers.

  • I should have thought to use html5 shim. It works perfectly on the 'public' part of the blog. Unfortunately the admin area still has its menu pop up behind the divs that follow. Not a huge problem, as I'm not planning to encourage use of any flavor of IE, but still a little disappointing...

    #8111 | Comment by Ken on Feb 3, 2012 01:48am

About You

Email address is not published

Add to the Discussion