Download the DaBrook.org Theme for Free!

12.04.2009

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 (copyrighting) 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 DaBrook.org.  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 DaBrook.org 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.

Licensing

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.

Welcome Section

Here you put the link to the RSS feeds, link to contact information and maybe a link to the about section.

Social Networking

• 
• 

DaBrook Tweets

• I don't know ... is a field trip to London possible? http://bit.ly/a2K8Mu (03-11 1:37)
• Springbrook web 1 students are learning HTML forms today http://bit.ly/aue1mi (03-11 8:07)
• Setting up github to share CodeIgniter source code with Springbrook web dev students. (03-09 11:37)
• Just posted up information on the High School Web Conference next month http://bit.ly/9bkgXr (03-09 9:26)
• Refresh Rockville information for the meetup tonight is live http://bit.ly/aQ3DOC (03-09 8:34)
• Refresh Rockville: Project Management (Tues. night 7-8 @ MC) Will post details tomorrow (03-09 12:48)
• Just setup Web 1 students at Springbrook with accounts on welovewebdesign.com ... look for cheap hosting for all web students soon! (03-08 9:06)
• @mrbhachu Thanks about the jquery tutorial. I'll put it in the docket to make a new example for dropdown lists! (03-07 3:37)
• Just submitted the reading list for the CMS course at MC: http://digwp.com/book/ http://bit.ly/boVz1n http://bit.ly/a3teWI (03-06 10:53)
• A free event on preparing content for 508 accessibility! Great follow up on the accessibility lecture from last night http://bit.ly/bZRJUO (03-05 10:14)
• The DaBrook.org forums are now live! http://dabrook.org/forums/ (03-04 11:04)
• Great Advanced Web class tonight. I really enjoy the students this semester ... your forum is coming! (03-04 10:41)
• First example of a student using the "Steal this theme" download from DaBrook - Nice work thrasher! http://bit.ly/bI4NIX (03-04 5:19)
• It's amazing how fast the latest updates on my #ee grading module make grading. Love it! (03-04 5:04)
• The MC Advanced Web class now has an archives page! http://bit.ly/aiRUhw (03-04 9:31)
• Looking forward to subbing tonight for a class at CDIA working on WordPress theme development (03-03 2:57)
• Web 1 students are working on their portfolios. Coming along nicely! (03-03 7:43)
• First tweet for DaBrook.org Tweets http://dabrook.org (02-23 11:14)

Google DaBrook:

What's current:

• Web Design: Web Forms
• Web Development: Get blog entry’s to add to database
• ITGS: Review Justin’s ITGS Project