Skimmed Milk
December 2nd, 2006
This site’s theme is Skimmed Milk and if that seems odd to you I should mention that “theme” is a WordPress term for the presentation of a site. Its visual design, layout and language are all, for the most part, customisable. This page is about the theme of the site in this sense, not in the sense of an overarching subject or topic of discussion.
If you have a WordPress blog and would like to use this theme then feel free to pick up a copy at the bottom of this post. [Edit: this version has been superceded. The latest one is available here.]
I didn’t set out to write a theme. I found a lovely one, called White As Milk by its designer Azeem Azeez, which attracted me by its deliberate visual sparseness and simplicity. I’ll just take this, tweak a few minor things and start blogging, I thought.
But I’m a programmer; I like to understand code, and when I peered inside I found a few pieces that didn’t seem to fit together. Basically, the code appeared to be showing its age and heritage; it was a theme modified from another that was based on another and so on. And fragments of each of the previous versions lay around like archaeological shards in rock strata. One or two files didn’t seem to have any use any more, the same idea was expressed differently in different contexts, and areas at the margins of use (such as error messages) did not appear to have been restyled at all. It’s all so visually simple, I mused, surely the code doesn’t have to be this complex? I’ll just do a little tidying…
Being a programmer doesn’t mean I’m a web developer. My HTML, PHP and CSS skills ranged from extremely dusty to non-existent so I had to mug up on these, CSS especially, and to learn the particular ways of WordPress too. Before long, the tidying had become two weeks of fiddling, tweaking, testing, and code bothering. No file remained untouched. Slowly, I realised that my tweaking was improving my understanding of WordPress themes more than it was improving the theme itself. And when I had come to terms with why WordPress and PHP encourage so much duplication and complexity, when everything looked fine in my browser, Safari, and when I had at least visited all the code and pushed it around until satisfied or simply bored, I started testing more widely.
This demonstrates my naiveté, stupidity really, web-wise. Of course the design appeared totally scrambled in IE, and ugly in FireFox and Opera. I should have been testing on these all along, and hacking to meet their individual quirks, especially the irritating wayward ways of IE. So another round of snagging and twiddling was started to find a compromise that would at least survive in each of these, and slowly I found out why so many apparently strange or redundant oddities had been in the CSS in the first place.
So did I make any progress at all? Perhaps a little. I have tried not to alter the overall visual style of White As Milk which I still like very much, although I have made the main column thinner and have played with the colours. The main other changes are
- The layout varies according to text size and on browsers other than IE will squeeze to fit restricted window space. This should make it easier for people who need or prefer to change the text size.
- The style sheet is associated with all media so print outs should look similar to what is seen on the screen.
- Oversized elements such as large pictures or long lines of text in pre tags should now be contained within the column width in all browsers.
- Various phrasings have changed according to my whim although in general I hope there is greater consistency and that messages, whilst brief, are informative.
- “Pages” (such as this one) may include comments; if you don’t want them then you should explicitly turn off pings and comments for the appropriate pages.
- The code, and the CSS in particular, is more extensively commented. Perhaps this will help users to make their own adjustments more easily.
Skimmed Milk has been primarily built to meet my own needs. I haven’t added extra functionality, fancy AJAX features or any other bells and whistles. Author names are not handled & there are no templates for pop-up comments or attachment pages. For the moment, at least, the scope of the theme is as minimal as its design.
If you’d still like to use it then pick up a copy below and follow the WordPress instructions to install. Do let me know about any bugs, suggestions for improvements, or just what you think. Finally, I send my thanks and respect to Azeem Azeez, Michael Heilemann and any others for creating the originals on which this version is based.
[Note: this version has been superceded. The latest version is available here.]
December 2nd, 2006 at 11:46am
Just want to see how comments looks… Test!
December 2nd, 2006 at 11:52am
Congratulations on providing the first comment on my new blog! Here’s another one, just to show that they alternate shading (as is somewhat traditional).
December 18th, 2006 at 1:48am
i really like how easy you made this theme to customize. all the comments you put in the style sheets really help out someone like me (coding illiterate), thanks so much.
December 18th, 2006 at 10:00am
Glad it helps. It was a long process of discovery for me – good luck!
February 8th, 2007 at 4:38pm
I am a fan of white as Milk as you, but I can’t for the life of me do CSS apart from very basic html and some coed from WITHIN wordpress. Please elt me know if I donwload your copy, of the template, if I can adjust things as colours etc, and once downloaded to my desktop what next, and how do physically get this up and running alngside my white as milk template?
thanks
H
February 8th, 2007 at 6:11pm
Hi Huatlim
I’ve no experience with wordpress.com sites, but it looks from their features page that you can only select from the themes they provide for you since they say “We add themes regularly based on user requests”. So.. you could always drop them a hint about Skimmed Milk 😉
Once installed you can tweak colours and layout to some extent by altering the css file from within the wordpress admin system.
And some day perhaps, I’ll finally get back to updating this blog!
February 17th, 2007 at 10:33am
Beautiful, thank you.
February 19th, 2007 at 5:44pm
I’ve been searching for a nice simple clean theme and I have to say this is one of my favorites. Thanks.
February 20th, 2007 at 12:09am
I reckon this is a really stylish theme. Nice improvements on “White as milk”. Unfortunately it isn’t working with some WordPress plugins, namely GeoMashUp. Any idea why this may be the case?
February 20th, 2007 at 9:09am
Thanks to all who’ve offered an appreciative comment.
Simon – sorry, no idea what the problem is; I didn’t test against any plug ins though obviously didn’t intentionally do anything to cause difficulties for them. If you find what the clash is and I should change anything please let me know. Unfortunately, as is apparent from the shameful neglect of my own blog, my efforts are on other things just at the moment. I hope to get back to all this in a few weeks.
February 21st, 2007 at 5:11am
Er! Who needs plugins with such a nice looking blog. Thanks for your response. Take care!
February 22nd, 2007 at 9:48am
Hey – one thing that I didn’t notice was that the skimmed milk theme and also White as milk theme. do not have Meta links or links for rss subscription. As I’m not a programmer, I have no bloody Idea how to add this back into the theme. But I can’t understand how you as a programmer could live with this. I forone would love to be informed of your blog updates.
I’m a graphic artist myself. I’ve just recently become interested in wordpress. I’ve spent a good deal of time trolling to find themes for my blog, There is so many themes about, but but I find it strange, that as a designer, I am attracted to a theme that is created by a philosopher.
I have dropped a number of plugins that I though i didn’t need, but I can’t live without an rss link. I don’t know how you could either.
I really like Skimmed milk.
February 22nd, 2007 at 10:09am
Hi Simon – this theme may have been tweaked by this would-be-sort-of-philosopher but the heavy lifting of the visual design was done by Azeem Azeez when he created White as Milk, so no problem there.
Regarding rss. (1) The footer contains links to subscribe to Posts or Comments for the whole site, and (2) individual posts when on their own page do have a metadata section containing a Feed for their specific comments.
What might be causing confusion is that I haven’t added a similar metadata block to the unhelpfully termed “Pages” that do not live in the general post archives (such as this one, and the About page), although I did, perhaps unusually, turn on the ability to add comments to them. If/when I revise Skimmed Milk this might be a good thing to add.
As to when blog updates will occur. Ha! I wish! 😉
February 22nd, 2007 at 10:41am
There you have it. Skimmed Milk is the perfect blog!
Actually I was playing with my own blog a few minutes ago, and saw that rss was in the footer. I breathed deeply, and came back over to thortz.com/, but you already made a post. I like having the rss stuff with the rest of the nav, hopefully I’ll work out how to achieve that.
But what is really important is that now I’m subscripted to your post feed. See you round here more often.
And come on, I want to see some words. Get to it. 😉
February 23rd, 2007 at 2:59am
Love the theme and have been using it for a while – thanks!
February 24th, 2007 at 5:11pm
Hi all
been a fan of white as milk and wordpress for so long and has been using this for sometime BUT for the life of me am scared shit to try to upload the thing off my computer so I can get to tweak it and so on. The ONLY thing I would want to change/modify is add a warm grey background for my site which is mostly architectural work..honestly if there was a person there [kelly xiayu jin don’t hide!] who can give me step by step guide I’d appreciate it. just don’t like the idea of not getting the latrst updates from wordpress once I am on the server side of things.[ hey kelly can you help?]
and for thortz..please write..we’re all waited long enough! grrr…
designmatters.wordpress.com
March 6th, 2007 at 11:12am
Hi Thortz,
Have got my blog up and running. I’m very happy with Skimmed Milk, you should be proud. Can you tell me how I might change the wording at the bottom of posts regarding responses?
Currently the link say “no responses”, ha, cos no one has responded. But people have told me that they can’t find the link to comment. So I’d like it to just say “comments” or “please comment” something like that.
Does that make any sense?
March 6th, 2007 at 12:09pm
Hi Simon
You’re blog looks great with all your illustrations in it. I get the impression that you’re not feeling too confident with coding but it’s basically pretty much common sense for simple text changes like this. (1) Search through the php files looking for the phrase No responses (2) Change them to whatever you prefer (3) Try it out. Careful you don’t alter any important punctuation like the quote marks delimiting strings. If anything goes horribly wrong then replace the file(s) you’ve changed with your safely backed-up ones, or get the originals again from here.
Hint: you’ll find three similar instances of No responses, you may wish to change the nighbouring text for a single or multiple responses too. The fourth instance is in comments.php and creates the header above the comments (or lack of them) on an individual post page. You may want a different wording here (or not)?
March 6th, 2007 at 12:24pm
Kelly – very belated thanks for your comment.
Huat Lim – sorry to have failed to reply. I’m not sure your gray background is quite so easy. Of course changing the whole browser page background is simple – but you’ll then have to change the other gray colours or they’ll get lost in the background. What I’m guessing you’re after is a shadowed gray surround with a central white column like on one of your existing sites.
You could give the overall html body a gray background and then explicitly make the #page white. The page element contains everything that is drawn and floats as a column centred in your browser window. However, a flat gray surround will look, er.. flat. To create a shadowed effect you will need to bear in mind that the page column varies in width (eg) when squeezed in a narrow browser. So you will either have to stop this by locking its width to match that of your background image, or you will have to cleverly split off the left and the right and give them each an image. Please note (1) I’m only a beginner at css stuff – I may be talking rubbish here (2) I might have entirely misconstrued what you want.
BTW I’m hoping to be posting again before the end of the week!
May 3rd, 2007 at 4:50pm
Yo Thortz!
Sweet theme. Just in cased you missed it, I plugged the design at the WordPress Codex. I don’t fell like finding the link now, but if it interests you at all email me and I’ll find it for you.
Anywaits:
I write to ask a question. In your design (and even more pronounced in my site at http://www.bradleyspencer.com) there is a space to the left of the header and above the left Nav. I was wondering what code I would have to install to put an image there? I’m absolutely trash at writing CSS and I think that’s what it’s going to need. Do you have the time to help a shit programer?
Many Many Thanks,
Brad
May 5th, 2007 at 2:37am
Hi all!
You are The Best!!!
Bye
June 23rd, 2007 at 6:05am
thank you for the theme. it is simply the best wordpress theme i have seen. Cheers! paul
August 3rd, 2007 at 8:21pm
Great theme. Minimal is the way to go!
Also, I am pretty proficient in CSS, but your commenting is extremely helpfull still!
August 13th, 2007 at 8:33am
Gorgeous theme, though I must say it looks even better wrapping my wordpress site, muhahahah! Naw, thanks a bunch.
Printing in firefox looks absolutely terrible. I’ve tried to copy and modify a print.css, but my results are just as terrible. I’m considering creating a blank print.css and slowly remove items until it prints something.
As it stands, the first page always contains the header and a bunch of white space, the second page contains exactly one page of content, and the third page [no matter how long the content] includes ONLY the comment section.
Anyone wanna tackle this with me?
Cheers,
Alex
August 13th, 2007 at 8:50am
HI – I’ll try to look into this printing problem. I’m preparing a widget-friendly update at the moment anyway as it happens. Which version of Firefox & OS were you using?
In the meantime do be aware that I changed the stylesheet reference in header.php from media=”screen” to media=”all” because my initial printing tests were entirely unstyled.
August 13th, 2007 at 9:58am
Hmm – you’re right about this printing problem. Mac Safari (2.0, 3.0b with current Webkit builds) and Opera 9.22 print just fine. Firefox 2.0.0.6 prints bizarrely exactly as you describe on both PC and Mac, as does Mac Camino 1.03 which uses the same (Gecko) rendering engine. Finally, I can’t get my IE 7.0 on my XP virtual machine to print these pages at all – it just hangs!
Oh, And I haven’t the first clue as to why or what to do with this just yet so if anyone has any ideas I’d be happy to hear about them.
Cheers
August 13th, 2007 at 10:45am
OK, should all be fixed now in 1.1.
August 14th, 2007 at 10:53pm
Great work, Thortz, and thanks for the email! I’ve tweaked the CSS a bit (perhaps for the worst), but it still looks suspiciously similar to your site. Wonder why. 😉 I don’t have a printer on my linux box, but the print preview is certainly an improvement. I’ll print on carbon from various machines soon.
August 25th, 2007 at 6:41am
[…] Skimmed Milk, which is based on […]
December 6th, 2009 at 10:36am
I used White as Milk to put this site together http://www.armanimen.co.uk I completely ripped it apart to basically use it as an engine behind my design.
January 2nd, 2010 at 11:54am
Thankyou for making this beautiful WordPress theme. At first I downloaded the White As Milk theme, but I couldn’t add a tag cloud and other stuff, and then I found your theme, and all problems solved!
Great job. You’re a lifesaver.