Today we have a very cool free WordPress theme, originally designed by DemusDesign, and ported into WordPress by me. This theme may look simple on the front-end, but the configuration file in the back-end gives you a nice selection of options that control color choice, column amount, among other things – which will be gone over below.
And now on to the features…
In the theme directory is a configuration file called config.php. This is where you can set the following:
- Theme background color: Light* or Dark
- Theme text weight: Muted* or Bold
- Theme heading color: Green*, Blue, or Orange.
- Sidebars: One* or Two
- Slogan displayed: Yes* or No
An asterisks * means it’s set by default.
That’s right, you can have your choice of one or two sidebars with this theme – all widgetized. The sidebar named “right sidebar” applies to both the sidebar in the 2 column layout, as well is the right sidebar in the 3 column layout. Here’s a screenshot of what the config file will look like in your theme editor.
The file is well commented but, if you’re still confused, make your choices on this Choice Config file generator and it will spit out the code you need to place over your current config.php file.
Update: Version 1.1 (May 2, 2008): Due to popular demand, Gravatar support has been added for those who use WordPress 2.5+. Updated files are style.css and comments.php
Tags: dark, DemusDesign, light, minimalistic, simple, three columns, two columns
Wow, thats what I’m talking about. Nice job. I see it also has built in support for tags as well. What about Gravatars? also, I don’t see any printing support.
Hey Jeff, nice to see you here at Theme Lab! Yes, I’m sure to always add tag support ever since your review of Nature Blog over at WPCandy.
About Gravatars, I will be sure to look into adding that in – shouldn’t be too difficult. I may make another version with Gravatar support soon.
Print support – you mean like a print stylesheet? I’ll ask DemusDesign to see if if it’s possible to be added to the template. Thanks for the comment.
Yes, like a print stylesheet. Believe me, this issue of no printing support is going to be written about on WLTC and I hope that this will finally draw the attention needed to theme authors to include this type of support with their theme, there is no reason why it shouldn’t be added. Sure, there is the WP-Print plugin, but why bother when this simple functionality can be theme based.
At any rate, nice on the theme and I’m glad you are picking up on the theme options and haven’t gone overboard with them.
What I’m looking forward to is seeing what theme authors are doing with things that wordpress supports natively such as tags and gravatars. Amazing how many themes don’t include native support for things. Wonder if its an issue with not knowing about them.
Love the theme, but I’m holding out for gravatar support!
Okay, you got me…Gravatar support has been added. If you already use the theme all you need to do is update the style.css and comments.php file.
Yay!
For WPMU users, having an options page is more practical than editing a config.php file.
@Jeremy: I’m not a MU user so I wasn’t aware of that. I will try to make an options page for this soon. Thanks for the comment.
Hi, Leland…
This design is beautiful! Am I correct that it does not have built in widget support?
Thanks,
jim-b-noob
@jimb: It does have widget support for all sidebars. The sidebar named “right sidebar” applies to both the 2 column and 3 column versions.
Thanks so much for your time!
Thanks, Leland, that explains it…
Have a great day everyone!
jim-b-more educated now
Hi, Leland…
When I select the “choice” theme in my wordpress theme editor, I have 0 left margin. I have not edited the CSS at all, I disabled all widets, etc. and still no left margin…any ideas?
http://blog.jimbaileyphoto.com/
Thanks,
jimb
I’m not sure what the problem is but I don’t think it’s the theme. I noticed you have a lot of plugins adding stuff to your header. Could you disable some of those and see if you can pinpoint which is causing it?
You nailed it…it was the WP 2.5 Gallery Lightbox plugin…
http://www.samburdge.co.uk/wordpress/wp-25-gallery-lightbox-plugin
Thanks, Leland…
jb
FYI, I updated the WP gallery lightbox linked above and it seems to have fixed the alignment issue.
jimb
I just downloaded this theme and really like it, but it appears that I’m not able to use blockquotes. Is there some secret or are these just not functional?
@sam: Unfortunately it appears blockquotes aren’t styled in the template, although it wouldn’t be too hard to add some sort of padding to a blockquote in the CSS.
Thanks. I managed to come up with something myself – modifying the blockquote css from another them I had used before.
Judging by the demo, the theme doesn’t know how to deal with blockquotes and so doesn’t bother.
Perhaps you’d like to resubmit when you’ve finished the theme?
I’m trying out the Choice-theme and wonder if it’s possible to use my logo-color instead of your green, blue or orange. It sure is a wonderful way of adapting the color within te config file, but can I pick another color? For me it would be red (D31145), like my business website.
Thanks, Bart
@John A: I’ve already stated…this is how the original template was designed. It’s not too difficult to add the blockquotes to your liking, as you can see on this blog.
@Bart van Maanen: The only way to do that would be to edit the CSS file with the color(s) of your choice.
Thanks, but in which css file? I can ‘t see any other colors in the light.css than the grey tones. How do I add my color for headlines and links?
@Bart van Maanen, they’re all in the /color/ folder. Unfortunately these files are not available in the theme editor as they’re in a subfolder. You’ll need some sort of other offline editor or edit them through something like the cPanel file manager.
I suppose you could pick one set of the stylesheets (Orange and Muted) and alter the colors to your liking, which would then be visible on the orange/muted setting on your blog.
just in case anyone’s interested, to get the blockquotes, I replaced the nonfunctioning blockquote code in the css file with the following:
blockquote{
margin-left:2em;
padding-left:1em;
border-left:2px solid #CCC;
color:#CCC;
}
hope you find it helpful…
@sam: Thanks a lot for sharing that. I’ll update the download soon with the blockquote code. Appreciate it.
Leland,
I have put this line : img {border:0;} in the organge_bold.css and the red border disappeared. But the text surrounding a picture is too close to the picture now. Can I create an white border in the orange_bold.css with the following?
img {border:3px;}
img.content, a img.content {
background-color: #FFFFFF;
}
Or do have to add something to the light.css?
img.content, a img.content {
float: right;
padding: 4px;
border: 1px solid #D6D6D6;
margin: 10px 0 10px 10px;
}
Furthermore I discovered that the links in the sidebar don’t work in IE 7 under Windows XP. Any idea about it?
Hope you can help me.
Thanks, Bart
I’m facing the same issue, both IE7 and IE6 on XP SP2, SP3 as well as Windows Server 2003.
Also…. I just noticed that this problem occurs when light.css is selected. The links works with dark.css when selected two sidebar configuration, but not in light.css.
I’m using the Choice light.css with two sidebars. And I would like to solve the problem of inactive sidebars with IE7. It works fine with Firefox (Wndows and Mac) and Safari, but it’s unlikely that all Windows users will switch to Firefox tomorrow on FF3 Download Day. (I do recommend it.) So, what is the difference with the dark.css??
Let’s get it back to life, how about it, DeadDuck!
I also tried the code from Sam for the blockquotes. I just copied and pasted it in the light.css. I doesn’t seem to do anything.
In the original CSS, blockquote is used as class [.blockquote], so if you just remove the dot before blockquote it will automatically apply to blockquote tag whenever used.
Where is the code I’m using for blockquote in light.css…
blockquote {
display: block;
width: auto;
background-color: #FFFFCC;
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 2px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #E0E0E0;
border-right-color: #E0E0E0;
border-bottom-color: #E0E0E0;
border-left-color: #E0E0E0;
font-family: Georgia, “Times New Roman”, Times, serif;
text-indent: 25px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
margin: 10px;
}
Thanks, DeadDuck. It’s working fine now. I’ll try you’re code later. Where can I see it working.
Unfortunately, I haven’t hosted mine yet. I’m making few changes in Choice theme, and testing them on local webserver right now.
Well, I’m not sure what exactly happened here… but I was able to get sidebar links in dual sidebar configuration using light.css working on IE6.
I just added position property to following tag definition in light.css (which controls list item under right and right2, two bars under sidebar)
#right li, .right2 li {
padding: 5px 0px 5px 20px;
position: relative;
}
…. and voila, it was working. Right now, tested on IE6 on XP and IE7 on Win2k3 server.
Wonderful, it does work. But only for the normal theme links, not the widgets (i.e. ctc tag cloud, e-mail subscription, Netvibes-button, RSS feed icon). So we’ve solved one at least. Thanks!
Oh damn!!
Well, I haven’t added any widgets as yet. So will try doing that and see if I can work out something. But unfortunately I’ll be out of town for two weeks from friday. That leaves me one day to finish off my pending works. Hopefully I find some time tonight to play around with this.
Let’s hope to get it done before I leave, cause I wanna get my blog up as soon as I get back.
Oh.. by the way.. this would the URL where I’ll be hosting : http://yogi.eyeris.in/
Has anyone got a clue yet on what is the problem with inactive links in the sidebar with IE7 on XP? This problem is shared by DeadDuck and myself.
@DeadDuck: How are you coming along?
Hi everyone,
I’m playing around with creating a new blog and I had a really simple question (I hope). How do you remove the dotted line under links? I’ve fiddled around in the stylesheet.css and the dark.css file, but it doesn’t seem to work. Thanks a bunch to the dedicated commenters and most of all to ThemeLab. Feel free to comment on the site layout:
http://www.nickomargolies.com/big
good theme but (for example) search.php contains a h1 closed using a h2
Love it. You should upload your themes to wordpress.org in my opinion.
Hi Leland, I’ve upgraded my WP to 2.6 and can’t properly log in now. You will have noticed, I guess. Is there a relation?
I still have the problem with inactive links in the sidebars with IE with XP and also Vista. They look allright, but don’t work. It concerns CTC tag cloud, e-mail subscription (FeedBlitz), Netvibes-button, RSS feed icon, and also the Google AdSense bar.
Also the footer text and link I added don’t show, not with any browser. Is that also due to WP 2.6? Can it be solved?
@Bart: I have no idea why these problems would be caused by Choice and WP 2.6. Have you checked if it is some sort of conflict with your plugins?
I’m sorry Leland to keep pressing my blog’s technical problem. There is nothing wrong with 2.6, and the footer thing was a problem I probably caused myself.
The real mule is the problem I have with inactive links in the sidebars with IE with XP and also Vista. With Firefox and Safari on XP work fine. In IE the widgets all look allright, but only the regular ones work (recent entries, pages, archive). The CTC tag cloud, the e-mail subscription (FeedBlitz), Netvibes-button, RSS feed button don’t function, and also the Google AdSense bar can not be clicked.
DeadDuck had similar trouble, but I haven’t heard how and if he working on it.
@Bart: This must be some CSS issue, but I can’t put my finger on it. I have a hunch it has something to do with position:relative; but not entirely sure.
I wonder if there’s some IE equivalent of the Web Developer Toolbar so I could investigate this more thoroughly.
@Leland,
It must be something with the CSS and the position tag yes. I got the regular theme widgets going with help of DeadDuck’s post on 28-7-1.
I also asked another specialist. If he comes up with something, I’ll let you know.
How can i style the comments ? There is no comments part in stylesheet.css or in dark, light.css
Hi there
Can anyone tell me how to update the text in the slogan? I have looked in all the templates and style sheets.
Many thanks
Angella
@Bart van Maanen
Sorry mate, I wasn’t around as got busy in loads of work after I came back from vacation. Haven’t worked much on my blod as well.
Anyway, try following code in CSS as I’ve tested it on IE6 and IE7 on WinXP, as well as IE7 on Win2k3 server. Links in sidebar (with widgets) are working for me in above tests.
#right ul, .right2 ul {
list-style: none;
margin: 0px 0px 20px 0px;
padding: 0px;
}
#right li, .right2 li {
padding: 5px 0px 5px 20px;
position: relative;
}
#right li a, .right2 li a {
background: #FFF url('mainstyle/none.gif') no-repeat left center;
padding: 0px 0px 0px 20px;
color: #999;
font-size: 0.8em;
text-decoration: none;
}
#right li a:hover, .right2 li a:hover {
background: #FFF url('mainstyle/bullet.gif') no-repeat left center;
}
Let me know your results.