Learning Drupal Theming
Are you new to Drupal theming? Do you know enough about CSS to be dangerous? Are you tired of using other people's themes and editing them to fit your needs? Do you learn better by seeing versus imagining? Are you ready for a different way of evaluating and planning a Drupal theme? If you answered yes to these questions, you are in the right place.
There are several books out on the subject of Drupal theming. There are video tutorials and articles explaining the concepts of Drupal theming. I have looked at many and conceptually have an idea of what's going on. They do a good job, for the most part, providing the facts of Drupal theming. When it comes to creating the code, however, my mind just doesn't think the same way as the text I have been reading. I am a visual person, I like to see it versus imagine it. I need to see the layout unfold in front of me to get a true grasp of the process. But how do I create a visual of a theme given there are anywhere between three and 15 files working together to define a theme? The answer, start with the layout files and merge them together.
The articles below will provide, what I believe to be, a unique look at one of Drupal's more popular themes called Zen. The primary objective of the articles is to enable you (and me) to create a Drupal theme. We will start by considering the inputs, tools, and controls associated with basic theme development.
Then we will dig into all the pieces and create a method for "seeing" and understanding the task of building a theme.
Assumptions
As I share my learning experience with you, I am assuming you have done the following:
- Reviewed the Drupal 6 Theme Guide.
- Taken at least a lesson or two in CSS to understand how it works. If not, try W3Schools CSS Training.
- Taken at least a lesson or two in PHP to become familiar with the basic syntax. If not, try W3Schools PHP Training.
- Downloaded and unpacked Zen onto a local drive.
- Followed the instructions on "How to build your own sub-theme (6.x)"
- You have uploaded Zen and your subtheme to a Drupal site. (Note: if you do not have a Drupal sandbox, you can enable Zen and your subtheme and then assign it as the site admin theme so others can't see you work.)
Zen: Div Framework
Learning how to theme in Drupal when you aren't used to creating sites with CSS layouts can be quite a jump. It is a little like trying to jump up four steps, doable but a strenuous. I needed a way to make the leap a little less strenuous.
Instead of jumping between CSS files, php templates, Firebug, and the Drupal interface trying to image how the page will look if you change some code or CSS, I decided to put CSS and code together. So, I opened up the Zen page.tpl.php file and started studying the div tags to see what the page was doing. Long story short, the code creates a bunch of boxes within boxes.
In case you are not aware, div tags create virtual boxes or containers in a page. This makes sense because historically, web page layouts were created using tables (e.g., a bunch of boxes). With a WYSIWYG editor, you can create a table with a bunch of columns and rows and easily imagine the site title in one table cell and the site menu in another table cell and so on. It gets harder to imagine what a layout would look like when you create the table code by hand. Now jump to creating a CMS theme layout with HTML, PHP, and CSS in code view. It gets even harder.
So, back to the Zen theme. What is the relationship between the code and the CSS? It is a bunch of boxes with CSS inside. Take a look at the HTML page (attached below) to see the divs as boxes and the applicable default Zen CSS for each div. Now look at the boxes as they appear on the screen of this demo site. By taking all the CSS information used to shape the layout of the page and placing it inside the div framework, you can quickly see what is being used to create the layout, how many instances that div tag can be influenced, and what CSS values are being used to create the default layout.
For me, this was the first step towards visualizing the layout of a page with code. The next step was to use the div boxes as my visual aids and manipulate them into a screen layout. This is the subject for the next article.
| Attachment | Size |
|---|---|
| zenpagetpldivs-css.html | 21.8 KB |
Zen: Reshaping the Divs
In the previous article, I considered the structure of the code and how the default CSS was set to configure the page. Once I had this information in hand, I could see better if and/or how the div boxes were going to be influenced by each other and their applicable CSS. My next step was to take the div boxes and move them around so that they resembled the page layout I actually wanted to see.
Using div boxes to create a layout
In my last article, I used HTML tables to illustrate the code layout and CSS together. Another way to illustrate the div-box-framework is to simply draw the boxes. You can use any tool that you are comfortable using. I used PowerPoint because it was fast and easy to share with you.
- In this first PPT, you will see the code boxes for the Zen page.tpl.php page.
- Then I took the default and started moving things around. I create a second PPT and moved the boxes around to create the layout that I was looking for. In this same PPT, I then converted the layout to code structure so I could see where the code needed to be.
- Then I created an HTML version of the new layout so that I could insert the default CSS and see how it needed to change in order to accommodate the new structure.
- Then I inserted the default CSS into my new layout<>/a> to see what needed to be defined.
Code order and CSS
From what I understand about CSS, you don't always have to put your code in the order in which you want the content to appear on the page. But, I found, that when I changed the shape of an outer box, the boxes inside that box were affected (hence "cascading" styles). And on the flip side, when I tried to reshape an inner box, other boxes were sometimes affected as well. So, if I wanted to reshape a div without compromising other div layouts, I knew I needed to move some code to be able to create the layout I wanted.
Now that I knew how my code needed to be organinzed (conceptually), I needed to actually move the code around. This is where knowing a little about how PHP integrates with HTML is helpful. Trust me, I am not a "coder." I took a few lessons in PHP to get a feel for the syntax and I used some basic logic. For example, IF statements are like HTML, if you open it, you need to close it. So, make sure you know what the IF is asking and you know when it is done so you don't break a code. This is the page.tpl.php I created in order to accommodate the new layout.
Next step, to create the CSS that displays the div boxes where I want them on the page. Assuming you aren't practiced in creating CSS layouts, I am going to walk through the big steps first and then consider some details. So, next article will look at using negative margins for layouts.
Zen: Negative Margins
If you are new to CSS layouts, negative margins might bewilder you. I am going to try and explain how Zen uses negative margins to accomplish side-by-side layouts. When you understand the formula, it becomes almost easy to use this approach anywhere you want to position divs next to each other.
Lets' start by converting CSS into a table. The table below takes three separate vertical CSS blocks and arranges them horizontally into a table so that you "see" the layout they are creating and so you can see how the values change to make the layout.
Default Zen Layout
| CSS attributes | sidebar-left div | content div | sidebar-right div |
| float | left | left | |
| width | 200px | 560px | 200px |
| margin-left | 0 | 200px | 760px |
| margin-right | -200px | -760px | -960px |
The formula for margin-right = width plus margin-left converted to a negative. The Zen CSS notes this. The rest of the formula has to do with calculating the margin-left value for the other divs. The formula for margin-left = sum of the previous div widths. So in our example, the sidebar-right has a margin left of 760px or 200px + 560px.
Let's see how the margin formulas work when different divs are active.
| CSS attributes | sidebar-left | content |
| float | left | |
| width | 200px | 760px |
| margin-left | 0 | 200px |
| margin-right | -200px | -960px |
| CSS attributes | content | sidebar-right |
| float | left | |
| width | 760px | 200px |
| margin-left | 0 | 760px |
| margin-right | -760px | -960px |
All Right Layout
More and more sites are experimenting with placing the sidebars next to each other on the right or on the left. The example below assumes that both sidebars are active on the page. Using the formulas, we get the following.
| content | sidebar-left | sidebar-right | |
| float | left | left | left |
| width | 560px | 200px | 200px |
| margin-left | 0 | 560px | 760px |
| margin-right | -560px | -760px | -960px |
With just the right sidebar active.
| content | sidebar-right | |
| float | left | left |
| width | 760px | 200px |
| margin-left | 0 | 760px |
| margin-right | -760px | -960px |
Now for the decision. If you only have a left sidebar active (no right), do you keep the empty space where the right is supposed to be? See example below. Your choice.
| content | sidebar-left | |
| float | left | left |
| width | 560px | 200px |
| margin-left | 0 | 560 |
| margin-right | -560 | -760 |
This same approach can be used to position the site name -> next to the site slogan-> next to the search box. OR it can be used to position the mission next to the header-blocks region. Draw your div boxes, decide where they are in relationship to each other. Decide the width for each. Apply the formula. Here is some example CSS layout code.
Now that you have your groups of divs next to each other, you can start stacking them. Of course, you can stack and then align left and right but I started with the left-right objective because that was the most challenging to visualize.