Download the Theme for Free!

Friday December 4, 2009 Freebies

How To Steal a Theme the Hardway

If you can view source, you can steal a theme.  Front-end technologies have the major weakness (and strength at times) of leaving all your HTML, CSS, and JavaScript privy to the eyes of (copycatting) web designers.

I don’t recommend stealing themes. I do advocate checking out source code, though, when you want to know how a front-end designer accomplished a certain behavior or presentation. If you want to recreate someone’s site design or behavior, for education purposes, you would copy and paste their HTML, CSS, and JavaScript into new documents on your computer, change the links to correct paths, download any images, and you’ve got it.

Download This Theme for Free

Rather than go through all that trouble with DaBrook, I have prepared a basic template of the major elements I use on DaBrook for you in one bundled .zip file.  In it you get the HTML and CSS that I use on  At this point I do not have the JavaScript bundled, because I am not actually using that much currently.

If you want to see what this simplified template looks like, you can preview the theme here.  Or download the zip file of all the HTML, CSS, and images below:

Download the Theme

Why Download This Theme?

I had releasing this theme for free in mind when I did the original comps of the present design.  A lot of the little features on the current design are instructional in a way: the header tags in the margins, the descriptive about section, the graffiti at the bottom.  It was all about transparency and education at the same time as being innovative (I hope).

In terms of what you may learn from cruising the source code?  Some creative use of z-index and absolutely positioning, a healthy does of CSS3 techniques like rotation, negatively offsetting background images with negative margins and positive padding.  The trickiest part of this theme was maintaining the line heights cross browsers.  It works, but if you throw in an image that is not divisible by 30px, it will throw that off.  Check out the help.txt file in the download for more on that.

Finally, I am about to start an tutorial series on how to build a course site with ExpressionEngine 2.  Rather than use a premade template or design something lame from scratch, I thought it would be a cool idea to build the site using the theme from DaBrook.

What Is Not In the Download

Oh, just a few little bells and whistles that either don’t do well cross browser, only apply to DaBrook specifically, or just seemed like something that I could eliminate to make the template simpler.  Plus, I don’t want to take away from you the joy of looking at source code for a live site to see how stuff is done.


What you can do

Download it, use it, modify it, redistribute it (with credit back to this post), praise it, criticize it, improve it, print it out and hang it on your wall, or do nothing with it.

What you cannot do

Sell it, redistribute it without giving credit back to this article, claim it as your own work.

You don’t need to link back to here unless you are redistributing the theme, but I would love to know if you use it or download it.