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:
- Version 0.3.8 from local copy (usually more updated)
- From WordPress Theme Directory
I’m trying out the idea of moving all the comments and discussions on the Simplicity Theme to a proper forum system. If you have any questions, suggestions, or comments, please head over to http://zitseng.com/forums/. I do intend to close the comments on this page. Thanks!
August 1st, 2008 at 12:19 pm
[...] just released Simplicity, a clean, simple and elegant WordPress theme. Simplicity is designed to be three-column layout, [...]
August 2nd, 2008 at 3:52 pm
Hey, the theme looks great. I am excited that you created it and posted it, because I am hoping to utilize it. I am new to Wordpress… I have been doing webdesign for a while, and had a blog at blogger. I recently bought my own domain name (it’s been a long time coming)… and seemed like Wordpress would be the best. My learning curve for PHP and Wordpress has been slow coming though. Anyways, something complaint like this is exactly what I need to have it match the rest of my site. Thanks
August 6th, 2008 at 1:52 am
Hi Zit Seng,
you made a great blog theme here.
I have just a question about resizing the colums.
I want to have a bigger left and right comlumn and with my amateur css knowledge i am not able to fix this.
I wanted to update the css file but I dont know what parameters to change.
If anyone else is able to help me, you are welcome. My mail is tobitatze@gmail.com
August 6th, 2008 at 7:59 am
You’re in luck. I was just making this a configurable option which you can set in the Theme Options page. I’ve put out latest update you can download from here at http://zitseng.com/simplicity.zip. I will be uploading it to the WordPress Theme Directory later (they usually will take a while to post it up).
The CSS to lookout for is basically #outer-column-container, #left-column, and #right-column. There are some width settings in there.
Thanks, I’m glad you like the theme.
August 7th, 2008 at 1:03 am
Hi Zit Seng.
Nice blog theme you have there. Am using it now!
Currently playing around with the CSS and trying to make the columns wider. Thankfully, you have answered that in the previous comment.
August 7th, 2008 at 6:06 pm
heeeeyyy
i am using your simplicity theme and i’ve been modifying it to suit my style. it’s cute! but. i would like to have more space between posts on the main page, and i’m at a loss as to what i should modify and where to do the change. i’m giving up for the night, but i hope you can fill me in!
by the way i found the theme because it was featured on wordpress. i don’t know if that’s a new deal for you or what but good job nonetheless. i’m in three column lala-land finally.
August 7th, 2008 at 9:41 pm
Thanks.
.post {
margin: 0pt, 0pt 1em;
text-align: justify;
}
You can increase that 1em there to whatever you fancy.
In future I’ll probably also add support for a custom.css to make it easy to add your own custom styles.
August 8th, 2008 at 3:14 pm
thanks! works perfectly.
August 8th, 2008 at 4:44 pm
I am using it, it looks great! Here is a bug report:
the H1 may is white, but the content of the blog may have H1 tag. That make the letters disappear because the background is also white.
h1, h1 a, h1 a:hover, h1 a:visited, #header .description {style.css (line 146)
color:white;
text-decoration:none;
}
August 8th, 2008 at 8:51 pm
Thanks for the feedback. I’ve fixed it and updated the ZIP file at: http://zitseng.com/simplicity.zip
August 9th, 2008 at 10:49 am
Does Simplicity allow you to install a custom image header?
August 9th, 2008 at 12:06 pm
Not through the Theme Options page at this time, although this is something I plan to do. In the meanwhile, you could modify the #header style in style.css.
August 10th, 2008 at 8:02 pm
Hi,
I don’t see how the options allow you to change the column widths. It’s just not there.
I tried widening the width of the columns, but the blog appeared warped
August 10th, 2008 at 8:19 pm
Hi Jonathan, are you using the download from my site (http://zitseng.com/simplicity.zip)? The version number is 0.3.5. It seems the WordPress Theme Directory does take eons to “review” and make available updates that theme authors have uploaded.
August 12th, 2008 at 6:59 am
I would really like to use this but I get an error when I try.
Fatal error: Call to undefined function: language_attributes() in /usr/share/wordpress/wp-content/themes/simplicity/header.php on line 9
I’m running Wordpress version 2.0.12-alpha (via Debian stable)
What versions of Wordpress do you support? Can you document that?
August 12th, 2008 at 7:29 am
Hi Bill, sorry that this was not documented. I had developed done this theme with WordPress 2.6 in mind, but it is likely to work from 2.5.
August 31st, 2008 at 6:19 am
Hi Zit,
Very clean theme, and fluid width, thank you.
Two questions:
1. Can I disable displaying the tags at the end of the post.
2. I changed the width of the right sidebar to 250px, but when I did, extra space was added to the right of the screen area, any way to eliminate that?
Thanks again.
August 31st, 2008 at 2:03 pm
Hi Dave,
About the 2nd question: Ok, I took a look at your blog and noticed the problem. It seems that the extra right space got introduced due to the tag cloud “overflowing” the margins. I managed to replicate this problem on my site using the ST Tag Cloud widget (which is from the Simple Tag plugin). But the WordPress built-in Tag Cloud widget seems to work ok (at least for my site). Perhaps you can give that a try?
As for the 1st question on removing the display of tags… I guess for now you’d have to edit the code in index.html. Look for:
< ?php the_tags('Tags: ', ', ', '
‘); ?>
and remove it. I’ll try to include this option in the next theme update so you wouldn’t have to edit the code.
September 3rd, 2008 at 1:45 am
Thanks Zit, I’ll give it a try.
September 5th, 2008 at 12:10 pm
I like your Template , But might you tell me how to add graphics and Adsense to the sidebars, Thanks so much…Paul
September 12th, 2008 at 2:18 pm
There is a small non-XHTML-compliant bit in your otherwise great blog. Comments.php uses invalid attribute ‘aria-required’ in the comment form in some conditions… This causes w3c html/xhtml validator to return “validation failed”.
September 12th, 2008 at 2:54 pm
That’s true. But it isn’t the doing of the theme per se though. Also, it seems area-required et al are going to become accepted as “standard”. Thanks for the feedback!
September 24th, 2008 at 9:10 am
No problem… Your justification for the non-standard option is good… Just thought to mention in case you would be like me - I get bothered if I cant get my page validated 100% and it bothers me until I fix it
September 25th, 2008 at 9:29 pm
Hi Zit,
We absolutely love your theme. It is going to stay with us as we grow into a massive support and sales site, thanks! My question is this, how can I not use the sidebars on the front page and still use them on all other pages? is there also a way to make the sidebars have different content based on the page? I tackeled your logo issue I saw mentioned early, that was a lot of coding work! LOL BTW, I left the text logo on the left intact for the search engines, I just changed its color to match the background so it wasn’t visible… Food for thought for your logo inclusion. Thanks again and keep up the great work! have a great day!
September 25th, 2008 at 10:09 pm
Hi Zit,
Thanks for the theme. I am using it. It is great that you kept it simple: I have been playing with the header tonight and had not much trouble adding in some new divs and styling the text.
Compared to other themes I have looked at - where you could sped a month second-guessing the code - this is very easy.
Here is a worry for you though: I am looking at your blog here and the left menu has been pushed below the center column!!
I am using MSIE 6.0.2900. Text size is set to Medium. But even setting to Small does not fix the problem.
Also, on this particular browser, some of your pages (various other ones) have the right-side column positioned beyond the right edge of the browser window - no matter how wide I make the browser I can only see the first few letters of items in the right column.
On this page here, the right column starts not UNDER the header but to the LEFT of it. It can only be seen by scrolling right - no matter how wide the browser window is (and I do have plenty of width to play with - wide monitor).
Yes… the joys of liquid layouts and cross-browser worries!
On the rest (non-blog part) of my site I had to use browser detection to get some fluid-layout issues right for IE.
I usually use Linux and Firefox - where all your code works as I would expect it to.
Just jumped over to my Windows machine to see if my theme modifications were working out okay in MSIE.
As for my blog site using Simplicity, I am using fixed-width. I decided a while back that I will never again use liquid layouts. There is always some pesky thing that takes hours to figure out.
(They usually work great until you test them on IE.)
On my site — in MSIE 6 — the right column is within the browser window, but it floats a lot further to the right than it does in other browsers.
As far as I have tested, your code works fine in Opera.
Sorry I can’t tell you what the answer is for MSIE 6 — yet another wrapper div maybe???
Will let you know if I figure out how to make the right column stay close to the middle column like it does in Firefox.
Oh — and one other thing: while styling my header, I came to think that in your stylesheet…
” #headerimg .description ”
should be
” #headertitle .description ” because #headertitle is the div that the description is sitting in.
Anyway, thanks again for an easy theme.
September 26th, 2008 at 3:03 am
Hi Zit,
Thanks for the theme. I get the same problem with your site using ie6 as Carl. I have a similar problem with my site I have fixed it for the moment but it’s doesn’t look pretty.
I have fixed the right column by making the body width 90% but I don’t know what fixed the left as I have never seen that problem with mine.
If you want my code drop me a line but it isn’t great as really I’m no programmer and just hack about until it looks better.
Cheers
September 26th, 2008 at 5:26 pm
Hi Chris and Carl, thanks for your input.
The problems with ensuring cross-browser compatibility is indeed troublesome. Ok, I’ve managed to lay my hands on a MSIE6 computer at work and have noted the problems with rendering on MSIE6. I think I’ve about gotten it sorted out. If you can, see how this site renders in MSIE6. I’ll clean up the code and package up a new update asap.
Mark, I’ll indeed include a logo image display option. Configurable for left or right side.
September 26th, 2008 at 9:59 pm
Hi Zit,
This page here (on MSIE6) has everything positioned correctly tonight. Beautiful.
The only problem I noticed on this page relates to this very box that I am typing into:
If I type a long line this reply box grows beyond the right-hand browser window.
If I use the mouse to re-size the browser window it all re-sets into the correct dimensions again.
Looks like one of those dreaded MSIE-re-size issues.
For the record, I just checked this page in Konqueror on Kubuntu as well: again, everything is positioned correctly.
(Earlier tonight I checked somebody else’s new theme in Konqueror and it was a complete wreckage.)
This is probably not even an issue to most people, but I can’t help noticing that quite a few people come into my sites with Konqueror.
And another one: I just can’t stop myself tonight…
Checked this page (and others on your site) on Opera 9.24 on Linux: everything is positioned correctly.
My problem now is…
Last night I messed with Simplicity (looking for a quick fix) until it was truly broken.
Looks like I’ll be needing a fresh download.
There are so many issues with columns - the combinations of widths, margins, padding etc.:
these problems are bad enough with a plain single page.
I really don’t know how you manage to keep it under control when the divs are spread out over a number of templates.
Have been browsing for other reliable 3-col layouts today.
There are plenty of nice ones available - BUT… so many theme-makers are aiming to produce an impressive visual masterpiece.
I didn’t download any of them.
Some of us only want a robust layout we can trust and a stylesheet that’s understandable.
We can always add our own tweaks, colours, fonts, borders etc. later.
Makes me think there will always be bloggers needing a theme like Simplicity.
September 26th, 2008 at 11:18 pm
[...] present I am quite keen on the Simplicity theme made by Lai Zit [...]
September 26th, 2008 at 11:27 pm
Hi Carl, I’ll check out the expanding reply box as soon as I get back to a MSIE6 computer.
All: Meanwhile, I’ve put together v0.3.8 for download (http://zitseng.com/simplicity.zip). I’ve also uploaded to the WordPress Theme Directory, but that usually takes a while to become publicly available.
September 27th, 2008 at 12:19 am
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?
September 27th, 2008 at 4:57 pm
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?
September 27th, 2008 at 7:16 pm
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.
September 27th, 2008 at 8:45 pm
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…
September 27th, 2008 at 11:24 pm
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: http://zitseng.com/forums/
October 3rd, 2008 at 9:49 am
what settings you use to this theme?
October 4th, 2008 at 7:13 pm
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.
October 8th, 2008 at 3:10 am
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.
October 8th, 2008 at 3:54 am
Alright well i figured it out, but why is it that the logo doesn’t fit the header in IE, but it looks fine in firefox
October 8th, 2008 at 10:08 pm
Would you be referring to your website at http://mostins.com/wordpress/? What version of IE? I don’t normally use IE myself, but I can try take a look to see what might be causing the problem. Could you please post follow-ups in my bbPress forum at http://zitseng.com/forums/…. I’m trying to move the Q&A threads there.
October 9th, 2008 at 8:54 am
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.
October 9th, 2008 at 10:35 pm
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
October 11th, 2008 at 1:08 am
Hey Zit
Nice theme. BTW one question, How do i put up an archives page link?
October 11th, 2008 at 1:21 am
Figured it out. You are missing some code in your page templates (e.g. archives.php)
This needs to be put at the top of the file:
October 11th, 2008 at 1:22 am
hmm, it filtered out the code.. Ill try posting in ur forum
October 21st, 2008 at 8:18 pm
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?
October 22nd, 2008 at 6:01 am
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…
November 2nd, 2008 at 12:36 pm
[...] 很早以前就写下题目了，今天从草稿箱里拉出来。 这是一个三栏的简单主题，且不论页面的整体布局如何，显然页面的每一寸空间都利用的相当有效，中间内容页很宽，很爽。 可以去作者的http://zitseng.com去看一下实际应运的效果，或者点击这里预览，使用中遇到什么问题的话，可以到http://zitseng.com/forums/去反映。也许你会把他改的更符合自己的习惯。下载Version 0.3.8 from local copy ，你也可以到主题页http://zitseng.com/tech/simplicity了解更多。 [...]
November 7th, 2008 at 10:40 am
[...] updates to themes to support the new functionality. I’ve started to update my WordPress theme Simplicity to support the new version 2.7 features. I’d guess Simplicity is probably one of the earliest [...]
November 8th, 2008 at 7:17 pm
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.
November 19th, 2008 at 10:26 am
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!
November 19th, 2008 at 11:26 am
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?
November 19th, 2008 at 12:16 pm
[...] proudly powered by WordPress and the Simplicity [...]