Notepad Chaos: A Free WordPress Theme

Advertisement

Over the last years we’ve featured a number of designers and developers who released their work for free — among other things we presented high-quality free fonts, free WordPress themes, free wallpapers and, of course, free icons. You can find many of them in our section Freebies1.

Every release helps to make the Web a nicer place which is why we support designers and challenge them to release something for free in order to be featured on Smashing Magazine. And the results are quite often pretty impressive.

Notepad Chaos: A Free WordPress Theme2

Today we are glad to release Notepad Chaos — a free professional WordPress-theme. The theme has 2 columns, a quite vibrant design including “personal” design elements such as handwritten headings, stick-it-notes, clips and pins. The theme was designed by Evan Eckard3 especially for Smashing Magazine and its readers.

Download the theme for free!

You can use the theme for all your projects for free and without any restrictions. However, it’s forbidden to sell or redistribute the theme without both designer’s and Smashing Magazine’s permission — please link to this article if you would like to spread the word. You may modify the theme as you wish, but if you are planning to release your modification, please ask our permission first.

4

The theme has been updated to version 1.5. It’s now up-to-date with cleaner code and includes a lot more functionality (gravatars, dynamic sidebars, etc.). You can find the files and demo here9.

Motivation behind the design

Here are some insights about the design process and development from the designer himself.

“I had recently stumbled upon many websites with gorgeous, gigantic, illustrated backgrounds and wanted to try my hand at creating a site that shared that similar element. This theme was an experiment into layering multiple images and having everything line up and flow with the site’s content.

Notebook Chaos10
Among other things, the Notepad Chaos theme has handwritten search box and navigation at the top of the layout.

It was quite a challenge to develop the design after creating it, but in the end it helped me gain more experience in CSS and what we designers can do to try and create sites with plenty of visual depth. On the technical side of things, the theme doesn’t use any plugins or extras, and focuses simply on the design.

Sidebar11
Sidebar in the Notepad Chaos is designed as a post-it-note and clipped at the top.

The themes uses a custom field called “thumbnail” where the user can add an image to their post. The instructions are within the readme file along with how to set up the menu links.”

Thank you, Evan. We appreciate your work and your good intentions.

Last but not least…

We are regularly looking for creative designers and artists. You may not know it yet, but we might feature you in one of our upcoming posts.

If you would like to release a high-quality free font, a WordPress-theme, some wallpapers or an icon-set please contact us12 — we would like to support you (both financially and with the broad coverage on Smashing Magazine).

You may be interested in the following free WordPress-themes as well:

Footnotes

  1. 1 http://www.smashingmagazine.com/category/freebies/
  2. 2 http://www.smashingmagazine.com/images/notepad-wordpress-theme/chaos.jpg
  3. 3 http://www.evaneckard.com/
  4. 4 http://www.smashingmagazine.com/images/notepad-wordpress-theme/chaos.jpg
  5. 5 http://www.smashingmagazine.com/images/notepad-wordpress-theme/chaos.jpg
  6. 6 http://www.smashingmagazine.com/images/notepad-wordpress-theme/wp-theme-notepad-chaos.zip
  7. 7 http://www.smashingmagazine.com/images/notepad-wordpress-theme/notepad-chaos-psd.zip
  8. 8 http://www.notepadchaos.com/2009/11/04/notepad-chaos-version-2-0/
  9. 9 http://www.notepadchaos.com/?p=5
  10. 10 http://www.smashingmagazine.com/images/notepad-wordpress-theme/chaos.jpg
  11. 11 http://www.smashingmagazine.com/images/notepad-wordpress-theme/chaos.jpg
  12. 12 http://www.smashingmagazine.com/contact/index.php/form
  13. 13 http://www.smashingmagazine.com/2008/08/08/infinity-a-free-wordpress-theme/
  14. 14 http://www.smashingmagazine.com/2008/07/16/wordpress-fun-a-free-wordpress-theme/
  15. 15 http://www.smashingmagazine.com/2008/08/05/fervens-a-free-wordpress-theme/
  16. 16 http://www.smashingmagazine.com/2007/12/21/dilectio-a-smashing-wordpress-theme/
  17. 17 http://www.smashingmagazine.com/2007/09/07/smashing-freefont-and-wordpress-theme/

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Advertisement
  1. 1

    I would LOOOOOOOOOVE to use a theme as beautiful as this, but I can’t because it’s not coded to accommodate the built in gallery function of wordpress, i’ve only run across two or three themes that are coded for the gallery, and even they make the pictures small, i have my pictures about 800 px wide, and i usually need a fluid theme, and unfortunately i only have one fluid theme that doesn’t drop the sidebar to show my pics… i should be happy that i have found ONE such theme, but i would love to be able to use themes like yours

    1
  2. 102

    I just want to say 2 word about this theme: KEREN BANGET!! In Indonesian, it means REALLY REALLY REALLY COOL …
    Good job!! I’ll use it for my blog … :)

    0
  3. 203

    hi i really love this theme a lot too… just like comments no. 100, I would love to have the font as well. Because i wanna edit bits and pieces here. Thanks!!

    0
  4. 304

    it reminds me of webdesignerwall.com.

    but maybe it just me

    0
  5. 405

    Luis Lobo Borobia

    August 24, 2008 5:55 am

    It is really BEAUTIFUL!
    I love how it looks, very personal, it makes you see that you are really looking at the inner thinkings of the writer.
    Love it.

    0
  6. 506

    Very Beautiful Theme! applied it to CSSModel.com Thanks!!!

    0
  7. 607

    woa woa, super excelent, very very nice, thank you so much.

    0
  8. 708

    I added the archives page by using the WP write new page, and then selected the page template for archives. It worked, but the font has no css style applied to it. I’m sure people will be able to sort that out.

    I was wondering though…..

    On the home page allof the post is shown, rather than an intro or excerpt. How can I set that you only see the whole post once you have clicked on it?
    Thanks again :)

    0
  9. 809

    I am trying to set this up, but the Archives page is showing nothing!
    http://gryffn.com/blog/archives/

    Also, is there any way to get an “Edit” option on each post? (no harm in asking)

    Ingrid Balko

    0
  10. 910

    you have to create a page in WP called Archives and then at the bottom of the write new page, there is a drop down asking for a page template, use the archives template and it should work.

    0
  11. 1011

    Thank you! That’s what it needed – saving as a template and it works!

    0
  12. 1112

    Any chance of this being converted for Blogger? Love this design, it’s beautiful!

    0
  13. 1213

    No worries.

    0
  14. 1314

    wow…!!!

    0
  15. 1415

    Nice theme.. thinking of using it in my blog

    0
  16. 1516

    Hey thanks everyone for the kind words. This theme was a beast to get into HTML, so my apologies if it’s tough to customize. With so many design elements interacting with one another (and sticking w/ gif files to make the theme multiple browser compatible) when I’d get one piece of the theme working, another would break elsewhere. So the final design is pretty set in stone to get the visual effect.

    Props to dandyman for the awesome variation!

    Also, I keep getting asked about the font… unfortunately, that’s my own scanned handwriting, so no font exists. There are some good alternatives out there though that work awfully well. I’ll post alternatives here as I can find or remember them.

    Parts of the background image was taken from an iStock illustration (which I purchased the extended digital usage rights too) mixed in with multiple hand drawn elements.

    And thanks to Vitaly and Sven for allowing the theme to be free and available!

    0
  17. 1617

    breaks in Opera

    0
  18. 1718

    I say it : ” I love youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu” :) Thanks …

    0
  19. 1819

    I realize that there really are no original ideas in this world, but a couple of the elements here look an awful lot like my site. http://chrisberryonthe.net

    0
  20. 1920

    Blogger version?

    0
  21. 2021

    Can someone tell me how you would classify the background design? I’ve seen this style a lot recently, and would like to see more of it, but I’m not sure what to search for. What would you call that kind of design/art?

    0
  22. 2122

    This theme is really beautiful! If I had just any reason to open a 2nd blog I`d use this one!

    0
  23. 2223

    LOL! totallty rip of Webdesigners Wall… Lame.

    0
  24. 2324

    This theme is really cool and i want to use it, thanks a lot man. you’re awesome.

    0
  25. 2425

    I don´t get Part III of the Readme…
    What is exactly this custom field and how do I activate it?
    Please help me!

    Beautiful theme btw!

    0
  26. 2526

    I love this theme and have converted it for use on my Movable Type blog. It’s taken 3 days to get it all right and I still have some tidying up to do.

    http://mt4.juneeonline.com/test/

    Thank you so much.

    0
  27. 2627

    Oh, so great theme!
    Look it very nice, I like it so much, thanks !!!

    0
  28. 2728

    Out of all the themes that I have looked at here this one seems to have imagination and personality and there for the only one wroth downloading. You should be proud of the work you do. Please do more like this.

    0
  29. 2829

    I loved this theme so much I converted it over to Tumblr for my wife’s site. I changed a couple of things on it so it would work a little better on Tumblr. You did a really great job with the theme! I hope to see more from you.

    Here’s my post about it:
    http://www.andrewacomb.com/blog/2008/08/29/tumblr-theme-notepad-chaos/

    Here’s my wife’s Tumblr site that is using the theme:
    http://jenniferacomb.tumblr.com/

    0
  30. 2930

    Raghavendra.Padasalgi

    August 30, 2008 6:02 pm

    very nice. please advise me can this be used offline on my own pc as I am not interested in using php.
    .thanks

    0
  31. 3031

    I have requested permission from Evan to distribute this theme as a plugin for Movable Type users and am requesting permission from Smashing Magazine to do so. I have made only slight modifications, which you can see on the test design: http://mt4.juneeonline.com/test/

    I couldn’t find any contact link other than this form to request permission to use to redistribute the theme, so I’m hoping you’ll contact me with permission.

    Thanks again,
    Toni

    0
  32. 3132

    This really is a beautiful design. I’m using it for my blog and I wanted to say thank you!

    0
  33. 3233

    Very nice, Thank’s!

    0
  34. 3334

    I want this widgetized :(

    0
  35. 3435
  36. 3536

    erm kindergarten question here..

    how am i suppose to install it and make it as my theme?
    and i didnt purchase the custom CSS upgrade.

    a lil help/tutorial here plss

    0
  37. 3637

    Really nice layout, but how can i take this txt away from it

    This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content inside of WordPress.

    0
  38. 3738

    Nice theme.

    0
  39. 3839

    Hello !

    Just to say thank you for this theme, since last week I use it on my blog :

    http://blog.shigaepouyen.net

    Bye,

    JC.

    0
  40. 3940

    Just say thank u

    0
  41. 4041

    Great, great, great theme. Edited the header and footer to fit my most recent project, The Design Bus. Thank you Evan Eckard!

    0
  42. 4142

    Bardzo ładny temat, raczej na pewno go użyję.

    0
  43. 4243

    While the post title is being hovered in IE7, thumbnail moves to left.

    0
  44. 4344

    I want to add an ad on my “about” page, can you tell me how to do that? I don’t know which file I should edit.

    Also, it’ll be nice if you separate the footer paragraph and “about” page. I want to put different content in my footer and “about”, but right now they are the same!

    Really beautiful and eye-catching layout though. This is definitely love at first sight, I knew I want it the first time I saw it!

    0
  45. 4445

    Great theme, thanks.
    I need to change the color from background (#3f808a), and use one image, but still using the image in top (page-back.jpg), but dont know how to make. Can someone help, please. Is very important

    0
  46. 4546

    so cool~! I love it~!

    0
  47. 4647

    Hi, I reeeaaally like this theme, but I’ve got a problem… I have no clue how to set it up on my blog, just started my own yesterday. Did I miss any instructions??

    0
  48. 4748

    hey nice one! im using this now! :D

    0
  49. 4849

    Do you have the whole background picture of this theme? I mean a whole one,without the part of the content and sidebar picture upon it.I really like it ,if you have it, can you give it to me?

    0
  50. 4950

    this is an awesome theme, thank you so much. I edited the bg to match my theme, http://www.awkwardlions.com all credits to you!

    0

↑ Back to top