Zit Seng's Blog

A Singaporean's technology and lifestyle blog

Simplicity Theme

This is the Simplicity theme for WordPress. It is designed to be a cool, clean, simple theme that keeps the focus on your content. The main features for Simplicity are:

  • Fixed width or fluid width (configurable)
  • Two columns or three columns (configurable)
  • Widgets support
  • Gravatar support
  • XHTML and CSS compliant
  • Simple design
  • White/light coloured
  • Presentable on modern mobile devices

I created Simplicity because I could not find any existing theme that I was truly satisfied with. The greatest difficulties are that most themes are fixed width, and most authors could not care less about XHTML and/or CSS compliance.

This is my first attempt to create a WordPress theme. The features are quite basic at the moment, but moving forward, I hope to get these things done:

  • Much greater customizations through the Admin theme options page
  • Update to XHTML 1.0 Strict compliance (currently it is XHTML 1.0 Transitional)

This theme makes use of the Theme Toolkit, with a few minor fixes: 1 trivial bug fix, some updates to text, and HTML fixes for XHTML compliance.

Download Simplicity:


154 thoughts on “Simplicity Theme

  1. Thanks for the theme, it’s just what I was looking for. Simple and easy to read without wasting space.

    I gave list items in the sidebar a small margin by adding this to the stylesheet:
    .sidebar ul li ul li { margin-top: 4px; }
    I think they look better with a bit more space between them, and it makes more sense if you have anything that takes up more than a line.

    I can’t figure out how to make the search form in the header look more like a search form, though (I’m not counting on my visitors to figure it out). Can you tell me how to show the submit button?

  2. Hi Zit,

    I loaded up the new Simplicity today (v0.3.8).

    (I am still using fixed width, 800px total, 3 columns. WordPress 2.6.)

    Looking good in Firefox, Opera and Konqueror on Linux.

    Checked in IE6 and there was no left sidebar.
    BUT the sidebar appeared once I had moused over a link on the page.

    Looks like you have a case of the ‘IE disappearing content bug’.

    I had a terrible time with these peek-a-boo issues once.

    I can only suspect that the sidebar, or something within it, does not “have layout”.

    http://haslayout.net/haslayout

    The (very helpful) writer at haslayout.net says: ‘With my experience I can say that around eighty percent of IE bugs are caused by an element not having “layout”.’

    __________________________

    The following properties/values give an element layout:

    * position: absolute
    * float: left or right
    * display: inline-block
    * width: any value other than auto
    * height: any value other than auto
    * zoom: any value other than normal (see description below)
    * writing-mode: tb-rl (see description below)

    As of IE version 7, few new properties give “layout”:

    * overflow: hidden or scroll or auto
    * overflow-x: hidden or scroll or auto
    * overflow-y: hidden or scroll or auto
    * min-width: any value other than auto
    * max-width: any value other than auto
    * min-height: any value other than auto
    * max-height: any value other than auto

    ________________________

    This thing is hard to diagnose and fix because once the browser has displayed the page correctly the phenomenon may not re-occur.
    Not sure what to do about that: clear the cache? close the browser? restart Windows???

    I fixed this on one on my sites by having some conditionally called styles for IE with things like this in them:

    _______________________

    /*prevent ‘peek-a-boo’*/
    .some_divs_that_have_floated_content {height:.1%}
    _______________________

    Of course they get a proper height set later in another stylesheet, if required. But this makes them display up front in IE.
    ______________

    Also:
    In IE6 now, my Simplicity pages are CENTERED within the browser window.
    This is very nice, I think.
    But now I wish it was centered in Firefox too. (That’s just because the rest of my site is centered too.)
    Do you know whether it is centered in IE7?
    (I don’t have IE7: I only have three computers in my office and I’m not putting Windows on more than one of them.)

    Also:
    I am thinking there will still be some changes to Simplicity, and I don’t want to do a lot of editing of the templates as upgrades become available. So I implemented a child theme for my styles.
    Thought you might like to know that (as far as I can tell so far) child themes function properly with Simplicity.

    I will also put some functions in my child theme — as soon as I am clever enough to write the ones I want.

    I’ll experiment, using my child theme styles, with styles for some elements in the left sidebar of Simplicity – I’ll try to work out whether I can give them ‘layout’ for IE.

    Sorry to put so many long posts on your blog — but I know that if it was ME making a theme (slim chance I’d get that good at php in my old age) I would want to hear about how it looked on different browsers.

    ALSO
    What’s a ‘SUPERWALL’?
    How come you have one and I don’t?

  3. Hi Carl,

    I suspect the problem you’re facing could be due to a widget displayed in your sidebar. Can you try MSIE6 on my site? Sometimes it is possible that a widget or other content on the site to cause the glitch. Perhaps you can share with me the URL of your site exhibiting the problem?

    Superwall… heh. The name came up from the Facebook craze period. It’ll stick around until I can think of something nicer.

  4. Hi Zit,
    Your site is working fine on MSIE6.
    MY WP site, using Simplicity is not so good.

    I have not added any widgets into any sidebars. My thinking is that if I/we can get the basic column layout right for all browsers – that’s quite an achievement in itself.

    http://computersecure.net/blog/
    (I will leave Simplicity activated in case you want to have a look at it.)

    What I have noticed tonight for my site (just on MSIE6)…
    I have been messing about with my child theme: put my menu into the header.php and footer.php.
    Also have been experimenting with fonts.

    Now the left menu does not display in IE6 for index.php UNLESS the visitor has used some other page, e.g. a category page, ‘about’ page – or just about anything except the index page.
    Once the visitor has seen any other page, then index.php works properly – i.e. the left sidebar is visible.

    Of course this may not even be worth your worry: I mean. it’s just a minor bug in IE6 that affects some uses.

    I applied this potential layout fix in my stylesheet but it did not solve the problem:
    _________________
    /* just want to make sure this ‘has layout’ by applying min-width */
    .sidebar {
    min-width: 100px;
    font-size: 0.9em;
    font-family: ‘Lucida Grande’, Verdana, Sans-Serif;
    }
    _________________

    Meanwhile…
    Can you give me any insight about where is the best place to style fonts for posts that are displayed?
    I have tried styling fonts from ‘body’ and from #content but the changes are not visible.
    In the default kubrick theme I got the changes I wanted by specifying fonts in .widecolumn and .narrowcolumn.

    I don’t mind if I apply a strange body-wide font style that messes up the sidebars: I can re-style the sidebar elements individually, later.

    I have realised, during this week’s episode of shopping for themes, that there are two main things about themes that are important to me.

    1. A robust layout that displays the columns properly in all browsers
    2. I must be able to style fonts: I MUST be able to make the main content and posts display a serif font with extra leading.

    I don’t care how many surveys about readability there are; I don’t care how many people love Arial or Lucia Grande; I don’t care how much money, sales or visitors I lose by using a non-favourite font on my sites… I just can’t bring myself to prefer a a sans-serif font to a serifed one with extra leading.

    Because a sans-serif font, unless it is a brief heading or title, is an ugly thing: it can only cause horror and repulsion, it is a monstrosity upon the earth and should be repelled and rant rant rant about my opinions about fonts…

  5. Hi Carl,

    The current stuffs you have (Recent Comments, Tags, etc) do count too. 🙂 Ok, I’ll have to wait till weekdays to try out on MSIE6 and hopefully I can find some info.

    Ok, I think the comment stream here is getting rather longish. I’d rather have this move to a proper forum system so as not to clutter up these pages. I’ll follow-up the other items such as custom styling, tips on managing all the CSS layouts… and Scamblog’s submit button thingy in the forum.

    I know, forum means you’ll all have to register. But it seems pretty quick and simple with bbPress. Let’s see how it works out ok?

    Forum is at: https://zitseng.com/forums/

  6. Hi Fadhli, I’m not quite sure what your question is. If you mean what theme settings I have used on this site: Actually all the theme settings are at default. Left/right side bar, fluid width, etc.

  7. Zit,

    I am just starting out with self hosted blog, and came across your theme, i like how it is nice and simple looking, really clean, ive downloaded and installed it, and when i was going through the features I see that i can ad an image to the header which i would love todo, under settings it has asked for the image URL, i’m sorry for asking such a simple question, but where do i get that url, I have tried uploading my logo to my FTP server and putting that in the address block but it didn’t work. Again sorry about the simplicity of a question, i’m just getting started.

  8. I’m finally figuring out a little bit of WordPress. It’s been a bear for someone who isn’t used to using templates and is on the uphill side of the css & html learning curve. Thanks so much for the clean template and code. I like a personal touch so my site doesn’t look like a template but clean and easy to get around in. Maybe I just got the hang of it about the time I decided on your template, but coincidence or not I appreciate the time you put into the template. All the options to personalize are great.

  9. Hello Zit,

    I’m from Venezuela, I think it is excellent your template or theme, some of the best I’ve seen, but I have two questions, I want to remove the header that appears on the categories (Archive for the ‘telephone’ Category) and if you can change the color of the header, was written in Spanish and translated into English, Thanks

  10. I really do love simplicity, but there is something odd about the layout of the columns that I can’t put my finger on. It all started when I tried to add a border to right-column, which moved it down the page to below the height of content-column (i.e. it made it too wide to float next to the content). I tried various fixes, but any which worked caused problems with left-column. E.g. Setting content-column to 95% moved left-column further left (off the screen). Setting left-column to an absolute position (left: 0; top : 150px) made it vanish entirely.

    Any ideas?

  11. Ah, I’ve found the ‘problem’. It looks like the style settings set in Simplicity Options end up as CSS embedded into the page Header. I’ll see if I can disable them…

  12. I’d been looking for a theme that was being maintained and handled widgets, plugins properly as well as looking good, clean and professional. I found your and am delighted. Keep up the good work.

  13. I love the design you created and am new at blogging, I have posted my new blog post and saw that when published it had (forgive my lingo as I’m techno challenged) what I believe formatting lingo above my actual post AND it appeared on my blog page. So I deleted that part of the post, the “lingo”. My blog page appears in Firefox, but now not Internet Explorer. I assume that “lingo” had something to do with it, but I surely do not need it to appear on my page.

    Can you lead me in the right direction to correct this? I do not want to have to go with a different theme. By the way, neither the left side panel nor right show up on IE, only Firefox, though my “About” page is correct with both sides appearing.

    Thanks!

  14. Hi Sue,

    Can you share the URL of your blog, so that I can check and understand the problem? Also specifically which version of IE are you having trouble with?

  15. You site rocks, Zit!

    I love the Simplicity theme.
    It is very pleasant looking and I just love the design.

    I tried t register on the forum but nothing yet.

  16. http://www.tuvanhillbilly.com Love the theme! It does everything I need. I mashed it with a sliding menubar from SlidingDoor theme to spice it up a little, but otherwise its all simplicity underneath. Had a little trouble with IE6 pushing down a text widget, but slightly increasing the padding on right-column fixed that. Great theme!

  17. i used normal before . but i posted some post and then link and category div is blow at bottom of page. i try to change the option. but no effect . why ? thanks

    1. Sorry jeffyan, could you elaborate? I don’t quite understand what you’re asking. Perhaps if you have a website to look at, it would be easier too.

      1. thank for your replay . Zit . i have not any website . just local machine . i mean your theme work normal before . and link and category at posts side. two days before i posted a post and found link and category blocks change to at bottom of page . so i guess option values is not right .so change to option post width. but no effect .still now page layout not right . thanks Zit .

        1. Ok, it sounds like some kind of CSS muck up. Unfortunately, without a sample case to work on, it is very difficult to troubleshoot. Perhaps when you manage to put it up somewhere, you can point me to it to check?

          1. Hi jeffyan, yes your screenshot seems to suggest some CSS layout issues. But it is still difficult to pin point exactly what is wrong without having access to the actual site to run some tools on (e.g. Firebug in Firefox helps tremendously in identifying CSS layout problems). Perhaps when you have site live, or you can just give me private access, I can help find out what’s wrong.

    1. Hi Bill, the default theme doesn’t come with any graphic. If you want to add a header graphic, the Simplicity Theme Options page provides you a way to configure it and position/align the graphic.

      If you just want to change the blue background colour, you need to edit the CSS code. Look for the #header section around line 224 in style.css. You might also want to change #headerbar around line 42.

  18. Hi Zit,

    Just installed Wp 2.7 with simplicity themes, everything seems good but it does not show menu on top.

    Is there any chance you fixing it for us ??

    I have not migrated yet but thinking of doing same soon.

    BK

      1. That’s right, the page link on top….

        Like an About page which is created by default in a new blog (Home , About …. and if you have more more pages)

        1. Hi BK… Possible to view this on your site? It could be a problem with CSS. Usually the easiest way to fix is to view the problem “live” and debug with tools like Firebug.

  19. Hi Zit,

    I like the theme but I’m seeing a similar problem to what others are seeing with IE7 and the logo. I use Firefox so I didn’t notice it to recently. If you have a look at my blog ( http://blog.darkmere.gen.nz ) the problem is with the logo ( cartoon pic in top right ). I added my new pic and updated the theme settings for it’s new size ( height 139 ) but IE7 doesn’t seem to pick this up correctly.

    So under IE the blue header are stays at the priginal height and my logo pokes down into the page under the “About” box and covering up the first couple of options in the top of the left menu.

    I’m happy to email you my source etc ( email me might be best in case I don’t check back here for a little while ).

    Other than that little problem I really like the theme , thanks for making it available to people.

    1. Hi Simon,

      Thanks for the URL link. It helps a lot to see a live example. Okay, I think in your case you might be using an older version of Simplicity because it seems the “logo image” is output in the wrong order in the HTML code. Could you check if you are on version 0.3.30 (you can download from http://wordpress.org/extend/themes/simplicity)? Thanks.

  20. Hello, thanks for using your simplicity theme, I’am very happy with this theme:

    If i try Simplicity on a localhost WordPress installation, there is a error:

    Parse error: parse error in C:\wamp\www\wordpress\wp-content\themes\simplicity\functions.php on line 94

    I’ve tried anopther thema and that’s ok, i ‘ve tried several times with Simplicity on different installations.
    Please can you help me ?
    Many thanks and greetings from Belgium/Europe

    1. Is it possible that your copy of functions.php could have been corrupted? Could you try installing the theme again, and if the problem still persists, let me know which version of Simplicity you have installed? Thanks.

Leave a Reply to Zit Seng Cancel reply

Your email address will not be published. Required fields are marked *

View Comment Policy