Learning How To Theme in Drupal, Starting at Square One
Note: I'm going to start regularly answering questions I get via email by blog. The reason being that email is a blackhole; and I am getting too many good questions everyday. When I have a few moments to answer, I figure I should make them available to everyone.
A reader by the name of Fouad writes:
Hi, I went through your tutorial on drupal themes, but it required a lot of programming experience. Isn't there an easier way to put together a drupal theme? For example, what if one wanted to start with an empty page, and build their theme from the groundup?
...is their a straight forward process to make 2 column/row, 3 column/row, 4 column/row themes?
Drupal themes are very straight forward... ...provided that you understand why they are straight forward, and why a more straight forward way is difficult (actually, impossible at present... that may change in Drupal 4.8 or 4.9).
Now, for the 99.999217 percent of the population that doesn't understand why drupal theming is straightf orward, I have bad news. You've got a lot of learning to do. In the beginning, the task of learning how to build a solid drupal theme is going to appear daunting, painful, confusing, sadistic, cruel, unusual, and most importantly, boring. I know these things because it wasn't long ago that I first started teaching myself HTML/CSS/PHP and began to learn how to apply it to drupal (November 2004). So forgive a LONG answer to a question that sought a short answer. Rest assured a short answer would have been a fairy tale.
In this post, I will attempt to provide those with little to no experience in web design a place to start. Let's begin with this overly simplistic but practical picture of what a drupal theme is:
Three Layers Written in Three Languages; Each with a Distinct Function
Drupal theming is an application of CSS/html/php programming. To ask "how can I learn theming without learning HTML, CSS and PHP?" is like asking, "How can I learn Jazz piano without learning how to play the piano?".
The human body serves as a metaphor for the parts of a drupal theme (my guess is that we all share that in common). Roughly speaking:
Layer 1: the Skeletal system. The HTML markup serves as the foundation for which the rest of theme depends. Without a basic understanding of HTML, you'll deprive your theme of a normal, and solid bone structure. You're theme will be deformed, weak, and probably collapse, and die at very young age. Clearly, this is a scenario that should be avoided altogether if possible. Start here, if you're just beginning.
Layer 2: the skin, and muscle. The CSS layer is more than merely "skin deep." Lots of stupid programmers think CSS is "not a real language", and is a skill best left to wimpy boys. "Real men", so the argument goes, only code in Java and Python.
This attitude always reveals itself in the ugly interfaces, and ugly, rigid markup their scripts generate. CSS is not only the path to beauty on the web, but it absolutely transforms the presentation of markup. It can make vertical menu trees turn into horizontal cascading tabs. You can markup two sidebars at the bottom of your HTML page, and squeeze them to sit nicely next to your center content. Its also the most artsy of programming languages (imho). In comparison with learning the HTML basics, and PHP syntax, CSS is by far the most immediately rewarding of them all.
Layer 3: PHP -- the nervous system, and heart. Without a brain, or a heart, what happens to people? They die, obviously. The same is true for your drupal theme. PHP is the layer which allows you to transform a dead layout into a live breathing page.
A "Quick" Sermon for Beginners
The best metaphor for learning how to build a drupal theme is learning how to play an instrument. If this introduction seems long, than I caution you: you have a long journey ahead of you. The truths about learning a new musical instrument are identical to the truths of learning how to theme for drupal. So, be forewarned:
- You must be motivated to learn by a passion, a dream, or a need to escape a present reality. Without that, you are unlikely to have the patience, and dillegence that is required to finally be able to "play for enjoyment".
- When you first start, its going to suck: its going to be both boring, and confusing. Can you endure the unpleasent experience of watching yourself suck, while both confused and bored?
- There are no shortcuts, YOU MUST LEARN THE FOUNDATIONS. Anything you perceive as a shortcut is going to cost you more time in the future, than just learning it the right way now.
- The single biggest barrier between your present reality, and your future goal is practice, practice, practice.
- Its going to take time. And it takes time for everyone. Go easy on yourself, don't expect yourself to grasp CSS floats in an hours time.
- Like anything worth doing -- getting there requires sacrifice that most people won't be willing to give.
- Even when you get to my level, you will still remain deeply unsatisfied with your present skill and knowledge. And that in itself becomes a great reward in the end.
This is just the honest truth. Its 2006, and building things on the internet is still an occult art. That is why so few people can do it well. If it were easy, and straight forward, than -- there wouldn't be so many terrible web pages.
Everyone begins with no clue as to what they are doing -- I coded my first HTML tag in the summer of 2004. My knowledge has been entirely gained from a rigorous program of aimless experiementations, disasters, and the lessons I've learned from them.
Trial and error is not merely the best way to learn -- its the only way. Luckily, you can at the jumpstart your process by learning from web designers all over the web. And, web designers love teaching.
WHERE TO TAKE YOUR FIRST STEPS
I took some time to gather the best, most readable, humorous, and free materials to help you start. Take note of the sources in this list. I've made it a point to only select the best of the best sites on web design. It is far from an exaggeration to say that not one web professional is unfamiliar with these sources.
I will divide these materials into "movements" -- merely for the fact that its a musical metaphor that can also be interpreted as a gastrointestinal metaphor. The truth indeed lies in between the two. And I'm werid.
Movement 1: XHTML Crash Course.
Forward
Back to the Basics (alistapart.com, 2001) Do read, web design is as much about philosophy as it is code.
"When you hit a fork in the road, take it." - Yogi Berra
1. Site Point: XHTML Web Design for Beginners part 2
Note that we are starting with part 2 because part 1 is theory that you don't need to worry about yet... or, come to think of it, ever. If you find yourself lost in this tutorial, try this tutorial instead: Sitepoint: The Absolute Beginners Guide to XHTML/CSS'
2. (Alistapart.com): Using XHTML/CSS for Search Engine OptimizationBelieve it or not, the quality of your markup directly affects your sites traffic. See, learning the basics IS practical!
3. (456 Berea St.) Attributes Vs. Tags Vs. Selectors So you can start to sound smart while talking about code :-)
Conclusion of Movement 1:
(456 Berea St.) Top 10 Reasons to Use Web Standards
Movement 2: On Scratching the Surface of CSS
Forward: (A List Apart): The Tao of Web Design
The Great Introductory CSS Tri-tutorial
Selectutorial -- Selectors are one of the most important aspects of CSS as they are used to "select" elements on an HTML page so that they can be styled.
Listutorial -- the basics of building background image lists, rollover lists, nested lists and horizontal lists.
Floatutorial -- the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.
The Myriads
1. (A List Apart) In Search of the Holy Grail Note, the "holy grail" is an inside joke regarding 3 column css layouts. See this old hag for more more background on the joke. I swear its funny if you had one time thought the hag was "the holy grail".
2. (Juicy Studio) Div-Mania! More and more web documents are appearing that consist of nothing more than a collection of div elements. In most cases, better use of CSS selectors could be used to avoid overusing the div element.
3. (huddletogether)Squeaky Clean CSS Tips on how to code CSS without making your life a living hell.
4. (BarelyFitz) Learn CSS Positioning in 10 Steps I wish every CSS tutorial was like this one. Oh, I forgot to mention: in css, position is everything.
Attention Shoppers: the blogger needs to get up early tomorrow and its 1:37 in the AM.
I feel no regrets, this is plenty of material to get the intended audience through a full week. Nevertheless, I'll finish this tomorrow evening. If you read me via RSS, I'll post a notice. I'm sure this list will change a lot as time passes... As it turns out, reviewing and reading material for quality is time consuming.