Notepad Chaos: A Free WordPress Theme
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 Freebies.
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.
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 Eckard 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.
- Preview (0.4 Mb)
- Download the theme (.zip-package, 0.5 Mb)
- Download PSD-sources (.zip-package, 5 Mb)
- Notepad Chaos 2.0: Official Release and Download page
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 here.
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.
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.
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 us — 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:
Elaine
August 23rd, 2008 2:41 pmI 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
gari
August 23rd, 2008 10:15 pmI 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 … :)
sweska
August 23rd, 2008 10:35 pmhi 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!!
jack
August 24th, 2008 1:07 amit reminds me of webdesignerwall.com.
but maybe it just me
Luis Lobo Borobia
August 24th, 2008 5:55 amIt 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.
CSS Model
August 24th, 2008 6:39 amVery Beautiful Theme! applied it to CSSModel.com Thanks!!!
vu
August 24th, 2008 7:22 amwoa woa, super excelent, very very nice, thank you so much.
Gavin Steele
August 24th, 2008 11:02 amI 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 :)
Ingrid Balko
August 24th, 2008 11:31 amI 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
Gavin Steele
August 24th, 2008 11:59 amyou 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.
Ingrid Balko
August 24th, 2008 2:41 pmThank you! That’s what it needed – saving as a template and it works!
Di
August 24th, 2008 3:38 pmAny chance of this being converted for Blogger? Love this design, it’s beautiful!
Gavin Steele
August 25th, 2008 12:44 amNo worries.
Rogério
August 25th, 2008 6:59 amwow…!!!
Grace
August 25th, 2008 11:41 amNice theme.. thinking of using it in my blog
evan
August 26th, 2008 8:44 amHey 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!
altrd
August 26th, 2008 10:54 pmbreaks in Opera
Emre
August 27th, 2008 12:23 pmI say it : ” I love youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu” :) Thanks …
Chris Berry
August 27th, 2008 12:33 pmI 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
Nytryk
August 28th, 2008 8:33 amBlogger version?
Justyn
August 28th, 2008 3:29 pmCan 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?
bee
August 28th, 2008 10:45 pmThis theme is really beautiful! If I had just any reason to open a 2nd blog I`d use this one!
Kenneth
August 29th, 2008 4:26 amLOL! totallty rip of Webdesigners Wall… Lame.
Heroe
August 29th, 2008 7:30 amThis theme is really cool and i want to use it, thanks a lot man. you’re awesome.
Arno Nym
August 29th, 2008 10:00 amI 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!
Toni Hambilton
August 30th, 2008 1:34 amI 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.
Stone
August 30th, 2008 4:04 amOh, so great theme!
Look it very nice, I like it so much, thanks !!!
Daw
August 30th, 2008 9:01 amOut 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.
Andrew Acomb
August 30th, 2008 9:41 amI 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/
Raghavendra.Padasalgi
August 30th, 2008 6:02 pmvery nice. please advise me can this be used offline on my own pc as I am not interested in using php.
.thanks
Toni Hambilton
August 30th, 2008 9:11 pmI 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
Grace1129
August 31st, 2008 6:21 pmThis really is a beautiful design. I’m using it for my blog and I wanted to say thank you!
Zackshinra
September 1st, 2008 6:57 amVery nice, Thank’s!
Vivianne
September 1st, 2008 12:46 pmI want this widgetized :(
Onur
September 4th, 2008 12:01 pmBlogger version here :
http://gosublogger.com/2008/09/blogger-notepad-chaos-wordpress-template/
Anne
September 4th, 2008 9:06 pmerm 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
Patrik Blom
September 5th, 2008 5:13 amReally 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.
charles
September 5th, 2008 7:12 pmNice theme.
Shigaepouyen
September 7th, 2008 11:59 pmHello !
Just to say thank you for this theme, since last week I use it on my blog :
http://blog.shigaepouyen.net
Bye,
JC.
Night.Walker
September 8th, 2008 7:58 pmJust say thank u
Urbanbricks
September 8th, 2008 10:28 pmGreat, great, great theme. Edited the header and footer to fit my most recent project, The Design Bus. Thank you Evan Eckard!
Marcin
September 10th, 2008 2:51 amBardzo ładny temat, raczej na pewno go użyję.
m[e]s
September 11th, 2008 2:58 amWhile the post title is being hovered in IE7, thumbnail moves to left.
Ailsa
September 12th, 2008 5:36 amI 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!
Jcarlos
September 13th, 2008 7:36 amGreat 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
cici
September 13th, 2008 7:56 amso cool~! I love it~!
Johanna
September 14th, 2008 2:53 amHi, 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??
hugolim
September 14th, 2008 7:23 pmhey nice one! im using this now! :D
asiapan
September 14th, 2008 7:26 pmDo 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?
Awkwarlions
September 15th, 2008 5:42 pmthis is an awesome theme, thank you so much. I edited the bg to match my theme, http://www.awkwardlions.com all credits to you!
evan
September 16th, 2008 10:15 amGot a new one for you all… http://www.evaneckard.com/?p=36
Mario
September 17th, 2008 8:05 amThe font used for this awesome theme It’s called “Jerry’s Handwriting Font”. You can find it here:
http://www.dafont.com/jerrys-handwriting.font
Mario
September 17th, 2008 10:05 amOh, sorry for my previous comment, but I have been verifying the font used in the template and incledibly “it is really hand made“. Why do I know?? Ok! check the images in the template folder and compare the “E” used in all the images that contains it, and you will see that every “E” is different. So, now you know, type the letters with your own hand, scan it and insert it in the template PSD file.
Good Luck.
nyunyu
September 17th, 2008 6:42 pmI saw this theme and try to see if it is a custom theme. Luckily you did put smashing icon on the footer and that is how I know where to find this theme.
Thanks a lot!
drlovecat
September 20th, 2008 6:51 amthank for your kindness
this theme makes me inspiration
chokilala
September 21st, 2008 11:32 amnice one. really really like it. keep up the good work
Milthon
September 22nd, 2008 7:40 amHEy!
Great work, Congratulations, now you theme arrive to latin America.
Jonathan
September 23rd, 2008 5:03 amLooking for a widget version….
And for some reason my Archive does not work…just says “No input file specified”
tlukem
September 23rd, 2008 7:10 amHands down this is a very creative template. My only problem is that there is no way to add pages. Can anyone help me to find a workaround to add pages (doesn’t have to be added to the top navigation). Someone above suggest wp_list_pages() but this only display’s pages does not allow you to create further pages.
fikri fadzil
September 23rd, 2008 7:36 amu know what… this is the greatest theme i ever seen in my life. i love it so much!!! TQ… i’ll use it for my blog soon. i’m still building it rite now. will use it tomorrow. insya-allah :)
tlukem
September 24th, 2008 7:05 pmMy mistake. You can ad pages via the Write> Page in the CP of your WP. Also drop the wp_list_pages template code into your sidebar.php file so you can access these pages.
Once again great template!!!
Sailesh
September 24th, 2008 9:30 pmHi, can anyone tell me if this theme will be updated to support widgets??
faBer
September 25th, 2008 4:41 amnice theme…im still newbie here..can i ask a question..
what is PSD sources is all about?? is it the plugin for wp?
technorino
September 27th, 2008 9:31 amAll i can say is……..AWESOME!
jber
September 29th, 2008 5:53 pmThis is a fabulous theme. The only thing I can’t figure out is how to add pages to the sidebar.
tlukem wrote: “ad pages via the Write> Page in the CP of your WP. Also drop the wp_list_pages template code into your sidebar.php file so you can access these pages.”
Can you, or someone explain this more fully?
I love this theme!
DragonXP
September 30th, 2008 2:17 pmHow someone could help me, I want to edit something specific. I would like to know where publishers to remove the contour of the links and change the colors of the link.
Roger
September 30th, 2008 10:10 pmHello there. I use this wonderful theme in my personal blog but I can’t make work pages and archives. Anyone can help me please? romeosantos612[yahoo.com] Btw congratulations for this awesome skin. Saludos from Chile!
hackworm
October 2nd, 2008 6:29 amgood colors
Kit
October 5th, 2008 11:25 pmWow, what an incredible theme! Really took the cake for me here.
A question: How do I get the posts to show the poster’s name?
rizkivmaster
October 8th, 2008 4:04 amVery beautiful. I like it. Thanks.
It’s simple and suitable for diary contents.
ko pyae
October 8th, 2008 6:17 amgood
goodgoodgoodgood
good
good
good
good
goodgood
good
goodgoodgood
goodgoodgood
good
good
good
good
good
goodgoodgoodgood
good
good
good
good
goodgood
good
goodgoodgood
goodgoodgood
good
good
good
good
good
goodgoodgoodgood
good
good
good
good
goodgood
good
goodgoodgood
goodgoodgood
good
good
good
good
good
goodgoodgoodgood
good
good
good
good
goodgood
good
goodgoodgood
goodgoodgood
good
good
good
good
good
goodgoodgoodgood
good
good
good
good
goodgood
good
goodgoodgood
goodgoodgood
good
good
good
good
good
goodgoodgoodgood
good
good
good
good
goodgood
good
goodgoodgood
goodgoodgood
good
good
good
good
good
goodgoodgoodgood
good
good
good
good
goodgood
good
goodgoodgood
goodgoodgood
good
good
good
good
good
goodgoodgoodgood
good
good
good
good
goodgood
good
goodgoodgood
goodgoodgood
good
good
good
good
good
goodgoodgoodgood
good
good
good
good
goodgood
good
goodgoodgood
goodgoodgood
good
good
good
good
good
goodgoodgoodgood
good
good
good
good
goodgood
good
goodgoodgood
goodgoodgood
good
good
good
good
good
goodgoodgoodgood
good
good
good
good
goodgood
good
goodgoodgood
goodgoodgood
good
good
good
good
good
goodgoodgoodgood
good
good
good
good
goodgood
good
goodgoodgood
goodgoodgood
good
good
good
good
good
goodgoodgoodgood
good
good
good
good
goodgood
good
goodgoodgood
goodgoodgood
good
good
good
good
Patricia
October 9th, 2008 8:38 amTruly gorgeous theme. Congratulations Evan, you’re a gifted designer!
Misfir
October 9th, 2008 3:00 pmnice i will check
MK
October 13th, 2008 1:19 pmThis is a beautiful design, color scheme and concept. Thank you for releasing the .psd. It has inspired me to teach myself how to design and code themes for WP for my own websites.
To everyone who compares this to WDW – newsflash… WHO CARES? Just because this theme has artwork coming out of the header as an illustrative design, that somehow devalues the coding, the design and color scheme itself and the art? Not at all.
There are many ways to tell the artist’s story. This is one of them. You can’t please everyone… so if you don’t like it… don’t use it.
Again, thank you for the time and effort in your creation of this theme.
Naceira
October 13th, 2008 3:16 pmAwesome template!! Congratulations!!
tsquez
October 13th, 2008 6:21 pmJust wanted to say this is an awesome looking theme. Nicely done!
Eduardo
October 14th, 2008 9:40 amGracias Evan, un saludo desde Chile
Te pasaste, una plantilla hermosa, Felicitaciones
Very beautiful theme. Congratulations Evan!!
Thanks.
Sara Y
October 15th, 2008 4:22 amIt’s not that hard to make this theme – or any them – widget ready. You just need to modify the sidebar.php code to make it dynamic. Just do a quick search on wordpress.org and you’ll find everything that you need.
Sanjay M
October 15th, 2008 3:55 pmSmashing… was looking for a new theme after ages and was absolutely thrilled to see this one thanks a ton!
Praful Kumar
October 16th, 2008 5:32 amBahut hi achha Design hai. I like very much.
And thanks for developing this themes…
Fuzzy
October 18th, 2008 8:32 amI know this is an older article, but has anyone tried this in FireFox? I loaded the theme and the sidebar is all jacky on the home page. Individual posts look fine, but the home page has the sidebar info under all the front posts. (and therefor the posts are without the post style applied ) I’m going to try and look and see if I can find the problem, but this is my weak area (coding).. Any ideas out there?
On another note, thank you Evan—> this is an awesome theme .. and inspiring.
Fuzzy
October 18th, 2008 2:31 pmHey- for anyone reading this.. my last post was my error. The theme looks purdy! in FireFox. I had coded a post incorrectly that thru all themes off. Disregard my FF post above.
and thanks again Evan
valerie
October 19th, 2008 4:03 ameye-candy layout, nice! can i use this one? i’ll still figure out how to customized though, but thanks! :)
Thomas Wigington
October 19th, 2008 8:23 pmThis is my all time favorite theme. I’m using it now. Thanks for such a great gift. I’ll be checking back often.
Kimberly
October 21st, 2008 5:38 pmThanks for offering this awesome theme! I’ve modified it for my needs and design for my website: http://www.beeclectic.net.
This theme has inspired me to work on designing my own themes from scratch in WordPress.
BIG thanks!
linuxwj
October 24th, 2008 7:20 amfantastica!
Kir
October 25th, 2008 10:20 amhi,
anybody can help me?
try to use it, but
“notepad-chaos/header.php on line 2″
this line contain <html xmlns=”http://www.w3.org/1999/xhtml” >
Thanks, Kir
Kir
October 25th, 2008 10:21 amand php with language_attributes()
eman
October 27th, 2008 9:59 pmi love this theme, so beautiful….great work!!
erwin15155
October 28th, 2008 1:31 amthanks yo……….
zulaut
October 28th, 2008 4:10 amhmm, i’m sorry, but it doesn’t work for me …
after i did install the theme, idid get this alert:
“Fatal error: Call to undefined function language_attributes() in …/wordpress/wp-content/themes/notepad-chaos/header.php on line 2″
Does anyone know, what’s to change? i do use WP 2.0
Cheers,
zulaut
Kir
October 28th, 2008 5:06 amthe same problem.( can’t understand.
zulaut
October 28th, 2008 11:20 am@ Kir :
change line 2 within the „header.php“ it with:
//html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"//
( // means ) and choose your language-attribute like „en“But – if this problem is gone afterwords … possibly the real problem should not!
for me the theme will not work, just a disfunctionally „picture“ will appear … without any links, stuff etc. i think, i have to upgrade my WP first ;-(
Philipp
October 29th, 2008 8:59 amHey, i’m a 15-year-old free-time designer from Germany… :)
Am I allowed to use parts of the .psd file for my personal, non-wordpress blob & portfolio?
zulaut
October 29th, 2008 11:03 amps: i did it! Upgrade to WP 2.3.6! Now it works fine! ;-)
zulaut
October 29th, 2008 3:14 pmähm: i meant upgrade to WP 2.6.3! ;-)
and THANKS a lot for this exciting work!
Bayounette
October 30th, 2008 1:52 pmSuch a beautiful theme !!!!
I like it ! I want it ! I download it ! I got it !
Alexa
October 31st, 2008 7:25 pmA very beautiful notepad theme! I absolutely love the colors and the pattern.
buzz
November 4th, 2008 3:02 pmIt’s a great job ! I use it to an adaptation for Dotclear (www.dotclear.net) … [pub] Dotclear possesses a rich functionality that makes it a high quality publishing tool, equaling and even outperforming other similar tools in some aspects. Beyond the core functionality, Dotclear is designed to provide the user with the most comfortable experience. [/pub] Thanks a lot for this theme !
pete
November 5th, 2008 8:58 amThe menu-holder where the home, about ,achive buttons don’t work properly it just links back to home page!
How can I change this?
Good theme