White as Milk

follow me on twitterWhite as MilkWhite as Milk is a clean wordpress theme that puts focus on the content rather than the design. Its easy to use and customize and the design stays out of your way. I started using this theme for a photoblog, but then realized that there wasn’t a good clean theme around for others to use, so here it is, download and enjoy!

Preview | Download

If you’re looking for a more modern theme, check out “Clean as a whistle”.

Due to the overwhelming number of questionsI get about White as Milk, I’ve created a system to submit support tickets. If you have a question/comment about White as Milk, please create a ticket and I will get back to you as soon as possible. Comments for this post has been disabled.

Version 1.8 is out and takes care of a few bugs and also has a few enhancements:

  • Better IE6 support – fixed bug where the sidebar would collapse if a photo/image was too wide.
  • Better mobile support – added support for Blackberry phones.
  • Easier to customize – most of the popular elements have been moved to the top of the stylesheet making it easier to find and edit.
  • Better widgets support.
  • Added support for tags.
  • Added Gravatar support
  • Content and sidebar area now use percentage instead of fixed widths.

Notify me when an update for White as Milk is available

FAQ

Q: How do I center the blog title in the header?

A: Open up your styles.css file and look for this piece of code: #headerimg {margin-left:28%;} and replace it with #headerimg {text-align:center}

Q: How do I make the template stretch horizontally all the way?

A: Open up your styles.css file and look for this piece of code: #page {width:700px;} and replace it with #page {width:95%;}

Q: How do I add an image in the header?

A: Open up header.php and look for these lines:

<div id=”headerimg”>

<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>

<div class=”description”><?php bloginfo(‘description’); ?></div>

</div>

and replace it with this:

<div id=”headerimg”>

<p><a href=”<?php echo get_option(‘home’); ?>/”><img src=”MYIMAGEHERE.JPG” alt=”<?php bloginfo(‘name’); ?>” />

</a></p>

</div>

Got a Question? Contact me.

Variations

White as Milk is pretty easy to customize. Just open up the styles.css file from the wordpress admin area and the top few lines should tell you how to customize your copy of the template. I’ve created a few variations for you to try out. Just click on the variation you like, copy the code and replace it with the code on the top of your styles.css file.

green pink
Green (Download) Pink (Download)
purple black
Purple (Download) Black (Download)

Join the Conversation

225 Comments

  1. Whitemilk in use. 😉 translated to norwegian, still with the latest version i have problems with som margins in IE, firefox seems to work fine, the errors occour withing and article (ie. the single.php page) any tips ?

  2. White as Milk is my favorite WordPress theme!
    Is there an easy way to edit the header.php file to change the header to a clickable image instead of CSS text?
    Thanks again…PayPal donation on the way. 😉

  3. Mr. Azeez, I love your White as Milk theme. Great job! I think I’ll use it. Two questions:

    1) How do you randomly rotate the images in your blog header? That’s waaay too cool! I’d love to be able to do that.

    2) I loved the Users Online and Most ever on Line STATS at the bottom of your web site. Can I get a copy of the script?

    Thanks much.

  4. Definetly, yours is by far the coolest theme: simple, clean and classy. thanx.

    I’ve translated it into galician so to use it as a private blog for my group -if anyone interested in the translation, just get thru to me.

    just like gary posted on 18.nov I’d also like to put a random image header, i’ve messed around with the code but just couldn’t get it working by now… ;-|

    And the users online would also be a nice feat…

    By the way, I’ve learnt about whiteasmilk since it was a built-in theme in my server’s wordpress set-up.

  5. Hey, I love White as Milk. I’ve been looking for a clean, simple theme that had the look of a glossary and I finally found it. Now the hard part is learning how to apply multiple themes to one blog. I want to use White as Milk just for my glossary category. Any ideas?

    I might just have to start a second blog just for the glossary using WordPress MU.

  6. wonderful theme, really! the ultimate choice if you want your content not a fancy posh design to be the juice of your blog! and it’s great for variations… though there is one thing that i just can’t understand and it kind of spoils the “cleanness” – it’s the divider between posts! mentioned also above by Vincent… would be great if you’d advise as to where to change/disable this! thankyou!

  7. Hi, I blew my old layout, so I activated yours until I have an idea for the new one… so, thank you – but in IE, within the individual post view the posting body starts below the sidebar.

  8. Great theme go simple and you can’t go wrong.

    I wanted to know how to change the size and color of the divider that goes between posts, can you help?

    many thanks

  9. Hi! Amazing Theme!

    I’ve made some minor modifications to the layout.
    http://www.jebaloo.com/blog
    Have a look, it’s still a work in progress and the header is just blocked out so that I know what to design to go there.
    I’m a bit of a newbie when it comes to the web, so I have one main problem and I can’t work it out.

    See if you click on ay of the Archives, it doesn’t work. I have checked through the code I can’t work it out, any suggestions?

    As seperate and less important questions which are also above:
    Random image header would be great, how would I do that?
    Also, how to I get my header image to link back to the homepage? I tried, but it made every single link on the page link to the homepage too. weird!

    Any help appreciated, thanks!

    Jemima

  10. yeah! actually I am using it now 🙂 …but my white as milk skin is too naked 🙂 maybe u can make me at least a nice header 🙂 ( free!!!bleh!!) … i had installed it just now and one has already comment that he preferred your template than the other one 🙂

  11. que pasa, azeem?
    I am one those who found your WaM theme as a native option for Wp2.0 and I didn’t hesitate for a moment and whiteasmilked my dance and music company’s working web forum! [http://www.nordesia.com/info-2004/040220ngd-01.html](Howcome, I just can’t get the way to tweek the header so it dispalays a random header image… hmmmm (any clue to carry on the tweakin?) -apertas!

  12. WaM is a great looking clean theme. When I open the styles to make some modifications though, it struck me that the stylesheet is unnecessarily complicated by about 5x. Maybe this is holdover from the original version(?), but it occurs to me that for the css to be as elegant as the resulting theme, this could be pared way down and organized much differently. I’m hacking on it now. Cheers!

  13. Hello,
    I love this template… but I would like to put an avatar on the side bar… on top of this, its possible? A special place…
    Sorry, my English is not very good…
    Congratulations to your job…
    And thanks for your attention…
    I’m waiting for your response.

  14. Azeem, thanks for a very clean and friendly design. One question: We have multiple writers on our blog. The Category name appears at the end of the blog. How to make it appear at the top of the posting, so that readers know who is writing?

  15. hi azeem, great work!
    but i am stuck getting an image in the header. can u gimme a hint, how to do this? actually its 2 pix – one above sidecolum aligned right, one in the other aligned left … has it do do with “#headerimg” in the CSS??
    yo help is apreciated 🙂

  16. Great theme, Azeem! I’ve been using it on my blog for over a year.
    WordPress 2.1 came out and I upgraded but I’ve been wanting to upgrade White as Milk to handle 2.1’s new features and deprecated tags. I dropped by your site a few days ago and nothing showed up so I figured you’d quit the blogosphere… so I began making changes myself. I was planning on releasing a 1.1 version once I add support for 2.1 plus widget and lightbox support. You wouldn’t happen to have already done these things, would you? I’m not really a PHP developer, so I’m learning as I go.

  17. On IE next to Archives and other things there isn’t >>(Something) but in Firefox there is how to i remove >> next to links on the sidebar

    Peace – loving the theme dude

  18. Perfect theme. Been waiting for such a simple but functional theme for years. Thanks!

  19. Very nice theme but youtube videos are cropped in the layout.
    Can you just add some px to width?

    Bye!

  20. LOVE your theme! I feel like I literally looked through hundreds to find the perfect one. Did some custom CSS to it and added some side bar contents to it. LOVE IT. THANK YOU!

  21. Excelente theme, le hice algunas modificaciones como agregarle soporte para widgets y ademas una barra para navegar por las paginas del blog.
    Visiten mi pagina para que vean los cambios..

  22. I really like this theme, TY. It’s a perfect photoblog theme, IMHO. I do have one question though, do you offer this theme in template format? You see, I’m new to WP and would love to code the theme myself as a learning experience.

  23. Milk is white.
    But then I got thinking. Is it?
    Maybe it’s not. Maybe it’s black and no one has noticed.

    From now on I’m not going near the stuff. Thanks for bringing up the whole matter.
    Bobcat.

    P.S. I love all your stuff.
    P.P.S. Especially the table.

  24. Hi there, we’re currently putting together a blog so that a bunch of my classmates can share inspiring sites they find online. White as Milk is almost perfect for us but we can’t work out how to display the author of each post. Any help is much appreciated!

  25. Thank you very much for saving me from my perpetual procrastination in switching away form the default (Kubrick) WordPress theme. This theme is exactly what I needed!

  26. Deciding on which theme to select for your blog is like deciding on a tat. Both, once established and settled, tell volumes about you. Azeem, I choose your theme for my blog; and if it were a tattoo, it’d be tat’d somewhere on my person. (OK, that was a little weird but I think I made my point.)

    So far, so good…so to speak. If I have any specific comments/feedback I’ll let you know. THANKS!

    Nicely done!!!

  27. In IE, if the sidebar shifts down, its probably because one of the images on your posts is wider than 500px as I’ve mentioned above.

    Hmm thanks.

  28. I really love clean and smooth themes like this. Really enjoy your name for it as well, “as white as milk.” Although, truth be told, REAL milk isn’t as white when it comes out the cow until it’s sent through the whole pasteurizing process or whatever. It’s usually a bit of a yellowy color – not too appetizing at first look. However, tastes great (so, I hear.) It would be interesting if you could get a clean wordpress style like this using black – that might be quite clever.

  29. I’m a big fan of White as Milk. I use it on several sites, including my personal blog. Overall, I think the design is near perfect — clean, simple, white. The two main things I’d love to see in the next version are a header nav bar menu and some nifty AJAX stuff.

  30. Hi! I really like the white-as-milk theme, but I would love to move the sidbar to the right side. I was now searching and analyzing the css-file for a while but could not find the atributes to change. Can someone give me a hint?

  31. Hi!, I’m using your theme, is the best. The only thing, I customized it to have a black background and white body text, and now the comments are nos visible because of the white box. How can I have my boxes just outlined?

    Thnx

  32. @Tobias: Thanks for the comment. White as Milk was not designed to have the sidebar on the right side. But if you really need to have the sidebar on the right, you need to look in your styles.css file and make these changes:

    #content {
    float: left;
    padding: 0 10px 20px 0px;
    margin: 0px 0 0;
    overflow:hidden;
    }

    #sidebar {
    padding: 1px 10px 10px 0;
    margin-top:30px;
    margin-left:500px;
    text-align:left;
    }

  33. @Fernando: If you open your styles.css file, you should see something like this:

    .alt {
    background-color: #f8f8f8;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    }

    Get rid of this line and you should be good to go.
    background-color: #f8f8f8;

  34. This theme is amazing. I love the simplicity. I may do some color enhancements like you showed and add a header image, but the layout is just great. Thanks.

    Is there a mailing list to get on for updates when they occur?

  35. Azeem, thanks for this great theme.
    I’m VERY new to this…

    Question: I want to put a picture/logo on the header. I did what you say here on your blog and changed the lines you say, but:

    1. I don’t know where to upload the logo to. Other themes have a seperate “images” folder with images in it. So, I created it on the server (godaddy hosting) and put the logo in there, but didn’t work. Then I moved it to the main folder of whiteasmilk, and it didn’t work either. What do i do?

    2. When I did that, all the text of the main column went “centered” in staid of to the left margine.

    Thanks !!
    JP

  36. Azeem, ignore my previous message.. I figured it out by copying code from another template that did display the logo correctly. Now I can use your template !! cool. It turns out that the logo is on the web too … well.. don´t know how to explain it.. i don´t program..

    http://www.loctiblog.com

    Thanks again !!
    JP

  37. White as milk seems to have a problem when viewed with IE 6.

    When you view a permalink page the content gets pushed down below the left rail.

    Beautiful simple theme.

  38. I adore your template — thank you so much!

    One problem, though: a big tag results in the tag cloud overlapping into the posts. (please refer to my blog for an example)

    Is there any way to fix this? Sorry I’m such a CSS-amateur.

  39. Azeem, WordPress 2.7 has lots of new comment features – it would be great to see this implemented in your White As Milk theme. I would try to update the theme myself, but the implementation seems to be very complex. You can read detailed information on the links below:

    http://ottodestruct.com/blog/2008/09/29/wordpress-27-comments-enhancements/

    http://justintadlock.com/archives/2008/11/01/making-your-themes-comments-compatible-with-wordpress-27-and-earlier-versions

    hugs and thanks a lot for providing us with this marvelous theme!

  40. Bonjour,

    Je suis photographe amateur en France et j’utilise ce thème WP pour mon tout 1er site photo…

    Simple et efficace, c’est parfait pour mes photographies !

    Merci et à bientôt,
    Ector.

  41. Azeem –

    How can I left-justify the template? I don’t want it to float in the center.

    Thanks!

  42. @Richard Rodriguez: In your styles.css file, look for this:

    #page {
    margin: 20px auto;
    padding: 0;
    min-width: 500px;
    /* width: 760px;*/
    }

    And then remove the word “auto” from this line “margin: 20px auto;” so that it now looks like this: “margin: 20px;”

  43. love it, its a little too white tho so i was wondering if there is an easy way to make the background say black and then a white box around the content to keep it white as milk and having the black make the user focus on the center. If not ill have to make some div tags, very clean look, ive spent a many hours trying to find something simple, and clean. 🙂

  44. @Eddy : try setting an align=“right” for the <img> tag in your header

    @Scott: have you tired the “black” variation stylesheet on this page?

    @hakim : if you open sidebar.php file in your themes folder, you should be able to paste the HTML/Javascript to display your ads.

  45. So im trying to get the comments for a Page to work, on my website click on the myjavapet page and there should be comments, ive allowed them. In like every other theme i do it works and i love this theme so im asking for some help 🙂 I basically copied how the comments are on the single.php, thanks for all the help and great theme.

  46. Azeem, thank you so much for the theme. I really enjoy it.

    Is there an easy way to upgrade the theme if we’ve made customization changes to it?

    Also, has anybody noticed problems in Google Chrome. My left and right sidebar do not show correctly in Chrome and I don’t know if it’s because of a widget I have or because of the version of WAM I have installed.

  47. Azeem, thanks for the great theme. I love it on my blog. Two questions:

    Is there a easy way to upgrade and keep whatever customization we may have made?

    Also, did anybody notice their blog looking weird on Google Chrome. Not sure which version of WhiteAsMilk I have but my sidebars are all off in Chrome but they look fine in IE or Firefox.

    Thanks again.

  48. Azeem, Love this theme. I’ve said this before. But I noticed that if you use the links template to make a links page, it has no sidebar. How do I fix that?

    Again, thanks for the great theme. It’s a thing of beauty.

  49. Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s

    interesting to read ideas, and observations from someone else’s point of view… makes you

    think more. So please keep up the great work. Greetings.

  50. I’m a happy user of your White as Milk style on WordPress. I was wondering if you are able to add a rule

    img.latex {
    margin-left: 0px ! important;
    margin-right: 0px ! important;
    }

    on the stylesheet that WP is using, for the current 5px margins on the sides of inline laTeX formulas looks very, very odd.

  51. Hi – I am absolutely desperate to know how to add an image header to my blog. The following question/answer from an earlier posting doesn’t make sense to me:

    Q: How do I add an image in the header?
    A: Open up header.php and look for these lines:
    <div id=“headerimg”>
    <h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
    <div class=“description”><?php bloginfo(‘description’); ?></div>
    </div>

    Where do I find “header.php?” My blog looks perfect except for this one element, but it’s such an important one. Please, if anyone out there knows the answer, kindly let me know. Thanks!

  52. I love your ‘White as Milk’ theme too Mr. Azeez! I’m new at customizing code for blog templates (however, I have had practice with web html coding).

    I centered the blog title in my header to see what it would look like and was surprised to see that I cannot restore it back to the original look even though I replaced #headerimg {text-align:center} back to #headerimg {margin-left:28%;}

    I thought it would be simple to reverse if I was careful to restore things back as they were but now I see I have a problem. Can you advise me what I need to do to fix this?

  53. Please forgive me for asking an unnecessary question (how to restore the header back to the left). I didn’t realize it was restored because I was paying attention to the image on the page; not realizing that was not the header.

  54. I’ve worked out almost everything except for not being able to get the 3 windows above comments for entering: NAME, EMAIL, and WEBSITE to line up neatly on the left like it does for submitting comments on posts.

    I had to enter in code just to get comments to work on pages, but I can’t find anything helpful to fix the 3 odd windows which seem to remain centered.

  55. In case if no has already mentioned how to remove an unwanted white border around images given a thin black border, when they are aligned to the right or left (this doesn’t happen when they are centered), here is how I solved that annoyance:

    change padding in:

    img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

    img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }

    to read as follows:

    img.alignright {
    padding: 0px;
    margin: 0 0 2px 7px;
    display: inline;
    }

    img.alignleft {
    padding: 0px;
    margin: 0 7px 2px 0;
    display: inline;
    }

    It looked like 4px of white space, so I replaced 4 with 0 to eliminate it. I think I guessed correctly, since it worked.

  56. Hi! I really like the white-as-milk theme, but I would love to move the sidbar to the right side. I was now searching and analyzing the css-file for a while but could not find the atributes to change. Can someone give me a hint

  57. hey Guys, Azeem,
    Great theme am loving it.

    Couple of Qs tho.
    Is there a way I can create an excerpt of a post and only have a tease of it show on the home page? So that visitors then click on the blog post, get taken to that post page to read the entire post? Kinda like what happens at EmpireAve.com? (another site i do)

    I love how i can have a mini gallery on the home page within a post but would love to be able to have more info on the post for the reader should they want to click thru…

    Annnnnd is there way i can, at the bottom page, have a next page link? And only have say 20 posts to a page??

    Cheers ion advance.

    Lincoln

  58. Hi Azeem,

    Just wondering if “White as Milk” is compatible with WP 2.7.1 and if there is a 3 column (2 sidebars) version available?

    Thanks.

  59. i use the latest WaM (from the wordpress theme catalogue) with your changes for black.css – the section at the bottom of each of my posts however appears white and the comments are unreadable (displayed white on a white background). how can i fix this?

    otherwise i love this theme. i used hemingway before but it’s not so nice for short texts to be cut off at the start. thanks! will donate!

  60. so I began making changes myself. I was planning on releasing a 1.1 version once I add support for 2.1 plus widget and lightbox support. Very nice baba

  61. Do somebody know how to change the sidebar list style? i just want the names of pages one after another without those black points and bleed. thanks you!

  62. Having no problems with theme, but was wondering what is the purpose of the mobile.css template. I am curious about promoting my site for mobile users any tidbits would be appreciated.

    Also, I have made slight modifications to the blog @ http://www.marcelinoguerrero.com., and was wondering if they would have any effect on the mobile.css

  63. Hi there. I notice that when I try to create a “Page” as opposed to a blog post that I cannot get comments or pings to turn on. I’d like to be able to post static pages and allow comments. Is this just me, or have you seen the same issue?

  64. I’d like to add a small logo to the left of my header text. Is it possible to add that in the css stylesheet? Or else how is that possible. I love this theme. Thanks so much!

  65. Question – how do you remove or resize the space above the header? I have changed so many numbers at random in the stylesheet with no joy. Thanks you.

  66. Hi. I’m also stuck trying to replace the bullet points (>>) in the sidebar links. They don’t appear to be attached to any particular style, so I assume it must be generated by the PHP code somewhere. Does anyone know how that might be changed? Thanks a million, Mr. Azeez.

  67. Hi there!

    I love your theme. But I want now to put an image at the slide bar.

    I didn’t find this… Where is? Thanks a lot! “A: Open up header.php and look for these lines:

    and replace it with this:

    ””

    Where is?

  68. Azeem,

    Thank you for the excellent theme!

    I just upgraded from your version 1.0 to 1.8, so I’m just getting started on all my new tweaks, but I love all the great foundational work that you’ve done here. Way to go!

    By the way, for the people asking about removing the little >> in front of the sidebar entries, go to Stylesheet (style.css) and work on the following line:

    .entry ul li:before, #sidebar ul ul li:before {
    content: “0BB 020”;
    }

    Peace,

    mk

  69. I just thought I’d mention that I LOVE this theme. Simple, two-column, focuses on content… everything I want from a theme right now.

  70. Does anyone have an edited stylesheet with 2 navigation bars for this theme? I’d really appreciate the help. I would try myself, but the stylesheet is so freggin horrible to edit 🙁
    I’m looking for a modded stylesheet with a left and right sidebar added in.. If not, i’d gladly take one where there is two bars along the same side, left or right.. yeah.. >.<

  71. Hi! I really like the white-as-milk theme, but I would love to move the sidbar to the right side. I was now searching and analyzing the css-file for a while but could not find the atributes to change. Can someone give me a hint

  72. Dear Azeem,
    Thank you very much for your “White as Milk” theme! It’s beautiful and I’m very happy with it. It’s been easy to alter and thanks for sharing it!
    Best, Leah

  73. I have used this theme as a basis for four installations of wordpress because it is easy to modify and customize. For one site however I nmeed to change the background color of the sidebar.

    Anyone know how to change the sidebar background color in the CSS? I have tried everywhere that seemed obvious and can not seem to locate it!

  74. Hi there. I notice that when I try to create a “Page” as opposed to a blog post that I cannot get comments or pings to turn on. I’d like to be able to post static pages and allow comments. Is this just me, or have you seen the same issue?

  75. I got past my last hitch. Apparently I did something wroong on my previous attempts.

    I have another question and that is how can I make the footer appear to the right of the sidebar? I tried reducing the width of the footer and even float right , but no joy.

  76. I’m having the same problem MarkosJal is having — I’m trying to get the entire sidebar to appear on a single page, but I am unable to. Instead, part of the footer shows up. Nothing I’m doing can see to bring the sidebar to publish fully. Any ideas?

  77. 1. Great theme.
    2. Is there any way to show the “comments” link larger? (or in a different place, larger?) I’d like more people to see it and respond…

    Thankyou!!

    p.s. I lived in Urbana-Champaign too.

  78. I’m a newbie. Sorry. I’m setting up a blog for a community radio station that will have up to 30 people blogging. I’d like each to have his/her own page. I’ve read 10,000 solutions to this issue but none is intelligible to me and it seems like something people do regularly. I’m happy to have each author have a category and display his/her posts on that category page. Or an author page. But there appears to be no category page template. I know… this is dumb and I shouldn’t be allowed to use WordPress ’cause I’m dumb. But does someone have a simple step-by-step that works? I’ve been to the wordpress.org page and all the forums. I’m very very grateful for the help. It’s a good cause, honest. I’m in love with White As Milk, btw. gary@blacksheepradio.org

  79. I’m slowly converting my website from a godaddy host to straight wordpress.And am using your theme for the new layout. I love it, very minimal! Thanks for creating such a great theme! 😀

  80. Hi Azeem… something funny is happening with our template. The sidebar is appearing down the bottom of the page, instead of to the left. The smiley face is appearing to the left where the sidebar should be – any idea why that is happening?

  81. Pingback: Theme » Yeri
  82. Thank you very much.
    I’m slowly converting my website from a godaddy host to straight wordpress.And am using your theme for the new layout. I love it, very minimal! Thanks for creating such a great theme!

Leave a comment

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