M
E
N
U
search

Drupal Theme from Scratch Drupal Theme from Scratch icon
Theming a Drupal 7 Website

Create a Drupal 7 Theme from Scratch

Why would I want to create a Drupal theme from scratch? I guess because I'm a bit of a control freak when it comes to web design and front end development.

The ultimate goal for creating our own theme in Drupal is to be able to place every piece of content anywhere we want on our final rendered page without having to rely on layout based modules. Out of the box, Drupal can be very boxy. Yes, there are modules and methods available to help with content layout design, but they have their limits and are bloated with DIVs (as is Drupal core).

You could use an existing theme, download a free theme or purchase a theme, but chances are you'll have to tweak the theme to your liking. Some may require just a little tweaking and some may require a massive re-design, making you wonder why you purchased the theme to begin with. And the more complex themes give you a bunch of extras you don't need which can lead to extra headaches as you try to figure out how things work.

"This is the best Drupal 7 tutorial I have seen. This is the only tutorial I have seen with theming Drupal 7, especially at this advance level. Amazing!!"
- Ricky

"This is the best Drupal documentation I've seen so far. Thank you for all your work."
- Jim D.

"This article saved me weeks of thrashing around in the muck."
- hyperbolicnutmeg

Check out what others have said. Then come on back to finish reading. :)

I came to this realization when I joined a team of web designers who, like myself, had never designed a Drupal website before. I had worked with Drupal years ago but my experience with designing themes since then was in WordPress.

We were advised to purchase a theme that was close to what our mockup design looked like. The second we had the theme installed, I began to look through the file/folder setup. Then I looked at the list of Views and modules that were installed with the theme. Immediately, I looked at my co-workers who in return looked at me and we were all dumbfounded. None of us knew what controlled what. Hell none of us even knew the difference between a View and a Region.

I quickly came to the conclusion that if we were going to create a website using Drupal, someone had to learn how Drupal works and, more specifically, how the templates work. Because it's not just about control we're after. We also want to better understand this tool we're using. So I volunteered. This document is my research...

Creating a custom theme allows us to position specific elements anywhere we want much easier. It also allows us to minimize "code bloat" by eliminating unnecessary modules and control Drupal's DIV-itis. I'm also not comfortable entering a bunch of CSS classes into the admin UI. That's what our style sheet is for. So let's use it.

Warning: This approach is not for everyone. If you are not comfortable with HTML or CSS, this is NOT for you. I wrote this documentation with the idea that it would be read by web designers or front end developers. If you are not comfortable with PHP, I suggest you read/watch some basic tutorials. You're better off making PHP your friend because Drupal is a bitch. You will see why as we move along.

In this documentation we will work towards creating the following scenario... we have a content type called event with the following fields: title, date, location, main image, body and agenda.

Quick draft of our page layout..

Nav

Main Image

title

Date

Location

Body...

Agenda...

What Drupal Does with Your Content

Drupal's default templates insert all your page content (all your fields) into one main DIV with it's own classes assigned to it. This is fine for a boring page design and if you like bloated code, but it doesn't allow for much advanced or creative design ideas.

We need to break our content apart in order to move pieces around and add creative styling techniques. But before we can do that, we need to know how the templates are set up and how Drupal uses them.

Page

Content

*If you do not see the social network icons here, it is because you have an ad-blocker running. Deactivate it for this site if you want to share this link. It is safe. There are no ads on this site.

This page was last modified on April 18, 2018.

This documentation is a work-in-progress. As I continue to learn more about the software, I will try to keep this documentation updated. I'm no expert of anything, so if anyone feels they need to correct me about something I've written or wish to add some additional tips, feel free to mention it in the comments.

"Drupal 7 Theme from Scratch" was written by TenTen71 because no one else would.