Blog

Theming Drupal 5.x, or, How To Thumb-Wrestle Drupal 5 Into Submission and Lay It Low At Your Mighty Feet, Part 1

This will be as short and sweet as I can make it while covering the entire theme development from concept to launch, with occasional pitstops for my bad humour... Whew, what an undertaking!

Web Design, The First Step to Theming Drupal

Start with a design in Photoshop. Stop using Illustrator to design web sites. Stop using Fireworks or ImageReady to cut them. For goodness's sake, if you're a designer, then be one for real. Use Photoshop. Use vector shapes and guides to cleanly define areas using a grid to setup the design. It doesn't have to be perfect but if you're making your own design then it should at least be good, otherwise you may as well go grab a free theme somewhere and save yourself some time.

Do not use images for navigation unless you are prepared to constantly edit them yourself, meaning if this job is for a client, get off your designer's high horse and use text for navigation. Its irresponsible to use images for nav when YOU won't have to maintain it, just because you think it looks pretty. Keep the client in mind. Use text.

Coding Your Drupal Theme

Code a HTML/CSS tableless template by hand. Do not use an app to export it. Just look at the darn design and visualize the rows and columns you'll need. A header is usually one row (div set), the nav might be another, the body content another, and then a footer, generally speaking. Within the rows are columns, each column is another div set. For example often the body content area has columns, in the case of this site there are 3; the left column for navigation/quotes, the center for body content, and the right column for callouts. You will define a width for these columns, then float them all left and then clear the floats afterward. If all this is mundane to you and you want a new challenge try coding so that your page content is at the top of your HTML.

I've really plowed through the design and code portion of creating a theme because the main topic of this post is the Drupal aspect, theming Drupal, and not really the creation of a design/HTML template. If you need more in depth info on those aspects I may have other articles later, or again, save yourself some trouble and pick up a free theme somewhere.

Once you have the HTML template code complete (with some dummy content in place) or have purchased a plain HTML theme elsewhere, and have tested it in FireFox, IE6 (hopefully dead soon), IE7 and Safari, you'll need to create your own theme folder. To start it may be easier to just duplicate the garland theme, then rename the folder whatever you want (hint: if you plan to have spaces in the name it is best to use underscores instead). For now let's assume your folder has been renamed "my_theme". Inside /themes/my_theme/page.tpl.php is where most of the work goes into creating a theme. If you don't know what the page.tpl.php file is, again, check into an existing Drupal theme such as Garland to see an example of the file.

The Drupal Guts Switcheroo

Next is swapping out your pieces of code for Drupal's guts. When I am creating a new theme I usually paste the entire new HTML code ahead of the old code of an existing page.tpl.php file. This makes the copying/pasting of the Drupal guts easier... Be careful to copy/paste all the region variables you'll need to ensure a smooth transition. If you see PHP in the old theme's code, it probably belongs in the new theme but you will have to learn over time exactly what you can add/keep/discard.

I'm not going through the whole list of region swaps you'll need to make but an example would be, cutting out the body content area of your HTML code and adding Drupal's <?php print $content ?> snippet. Another example is, deleting the code for what should be the left column content of your HTML template then inserting Drupal's <?php if($sidebar_left) {print $sidebar_left;} ?> region snippet.

When working on this part of the process, you'll have to consider your client's needs. Generally for my projects, clients don't need every bell and whistle. For example how often will a client change their logo? Nearly never is the answer in my case, so I don't usually use Drupal's $logo variable. Same with the mission statement ($mission variable) since most of the time designs incorporate the mission statement as a part of the logo. But you be the judge of what works best for you.

More In-Depth Drupal Theming Tips

We've covered the basics. Now it's time for the nitty-gritty...

Your theme should be well inside the ballpark now, with Drupal trying to generate its Drupally system bits in the right places, however now the devil is in the details. At this point Drupal will be inserting content in the right place in your theme, the $content variable, and even though it may be trying to insert left-column stuff in the $sidebar_left region variable, you may not have told Drupal what it is exactly that you want in that area. This is where blocks come into play.

In "administer > site building > blocks" you will see any themes that are registering with Drupal, such as garland and minelli. As long as your new theme has been enabled in "administer > site building > themes" you should see it in the blocks area. Clicking the name of your theme will allow you to instruct Drupal what content should appear in which region (the variables you just added to your new theme) Now you can control what shows in the various regions of your page, the header, left and right columns, and footer. For example if you need a copyright statement in the footer, as long as you have swapped the $footer_message into your new theme, all you need to do is add a new block called, say, "my copyright", add the copyright statement into this new block, then in the "my_theme" theme tell this new block to reside in the footer by choosing "footer" from the dropdown.

This ia a pretty simple way to get a quick site created in Drupal. The thing is... people always want to customize. They want this and that coded exactly this and that way. This leads to the need for more control over what Drupal is exporting and where it is exporting it.

For example, what if we need our main navigation to render a bit differently, say with a span tag inside the anchor, or a div surrounding each ul for special effects? What if we are creating a site for ourselves and we DO want to use images in the navigation because we know we can update the images ourselves if needed? What if we want a view to sometimes render items as a list that DOES use a proper list format (unordered or ordered) and in other cases we want a list of items that are NOT inside a list structure?

All these questions and more might be answered in Part 2, or possibly Part 3, or the way I'm rambling it could be in Part 12, after this commercial break!

• Theming Drupal 5, Part 1
• Theming Drupal 5, Part 2
• Theming Drupal 5, Part 3

Search Engine Optimization (SEO) Improvements

Improving Way Cool Web Design's SEO

This post concerns a little experiment on my search engine optimization efforts. I've had good success with my client efforts and what few pages I had on the old version of this site. But now it's time to kick it into gear and see what I can pull off for myself in this new version of the Way Cool Web Design site, launched @ beginning of March 2009.

Read more »

Improve Search Engine Optimization (SEO) By Coding Page Content At The Top Of Your HTML

While I haven't personally found any proof that keeping content as close to the top of your code as possible can improve SEO, I have seen a few articles attesting to its merit. It is a commonly held believe that the technique can improve SEO.

Improve Your Search Engine Optimization Through Good Code

There is this article as an example of the belief, again without actual proof. There are examples of top-ranking sites for tough keywords like "lingerie" which bring you to a top site, Pampered Passions. If you examine the source of this lingerie site you'll see the <h1> right at the top which is the start of this page's content. Notice its not buried halfway down the page like most sites that have navigation, search, logos, etc all in the header that comes visually before body content for most sites.

If you view source on the Way Cool Web Design site you'll see something similar. The <h1> is very near the top of the code while visually the layout suggests there should be a header with navigation, search and logo above the content.

Some immediate difference on the Way Cool site is "top of page" and "skipnav" anchors. The top of page anchor is one I find a lot of people use so I build it into every template I create so that in the event someone needs it they don't have to be concerned with going back to a template to add it into an entire site. The skipnav is also built into every template, although in the case of this site specifically we don't actually need a skipnav because we've put all the nav at the bottom of the code and so there is no nav to skip in order to get to content.

So, why not build every template this way? Well, it makes for some heavy duty browser testing - it's a challenging technique. Most clients just don't want to pay for all the extra time it takes to get it perfect just what is not a proven benefit. Those that are concerned about SEO however are often interested to learn more, and some are willing to go that extra mile with their budget.

Coding Middle Column Body Content At The Top Of Your HTML

Let's assume in a 3-column layout like this site, you have subnavigation to the left, body content in the middle, and callouts in the right column. A few years ago I may have code this as LEFT, RIGHT, MIDDLE, with LEFT and RIGHT being floated arounf the MIDDLE which has margins on the left and right. But this doesn't help our cause since it makes MIDDLE come last in the HTML. We want MIDDLE to be first.

The way I normally code columns these days is LEFT, MIDDLE, RIGHT all floated left since that is, theoretically speaking, "correct" from a top-to-bottom, left-to-right coding standpoint. I code templates this way since that is a common solution for accessibility purposes - code appears in the HTML as we would view it on-screen top/bottom, left/right.

To achieve the middle column at the top we need some CSS tricks. Code it MIDDLE, LEFT, RIGHT. First float MIDDLE to the right and LEFT to the left, with those two columns in "Container A". Then inside "Container B" float "Container A" to the left with RIGHT floated to the right. Container B now holds MIDDLE, LEFT, RIGHT. Push Container B down with a margin to make room for the header. After Container B, code the header info, position it absolutely and make it appear at the top on-screen.

Drupal Accessibility, Usability

I had a quick conversation with Duane Degler from Design for Context at DrupalConDC 2009 this past week. It gave me a great idea to try out a usability feature in my next implementation of the Drupal Content Management System, which is to use CSS to make some of the action functions appear as buttons. Links connote taking a user some place, buttons connote action.

At the moment the plan is to use them in the upper left admin navigation screen. Since the few actionable items most of my clients need can be so tough for a new user to find, I create additional links here to ease the pain such as "Edit Content", or "Edit Blocks". These, along with "Create Content" would be great candidates for action buttons.

css Zen Garden - Pseudo Sahara

Way back in the day, @2002, like many web monkeys I was salivating over css Zen Garden and the possibilities of CSS. It opened something in my brain. Although the visions of loveliness I had back then haven't quite come to fruition, it definitely changed my path from simple design and table-based HTML layout to a focus on tableless CSS-based designs.

I was inspired to try my hand at a Zen Garden theme. While the company I worked for at the time liked my enthusiasm and thought the Garden was pretty nifty, I think I was the only one who relished the implications. So I set off in the evenings working on polishing my skills and developing a theme I could submit to the Garden.

I ended up with "Pseudo Sahara" by John Barrick, accepted as css Zen Garden theme #13. I seem to recall receiving a notice from cssZenGarden.com that the theme also ended up in a css Zen Garden book but I haven't seen it so I can't verify.

I've received emails from people about the design; can we use it, do you know it has scrollbars in XYZ browser, etc. Sure, you can use it, and yes, I see in some browsers there are flaws. I made it @2002. But before you do use it just know it is called "Pseudo Sahara" for a reason... the faded script writing is actually a Tolkien font, elvish I think, but it looked Arabic to me and I thought it'd be kinda funny to use it. If I recall, the script at the top says something like, "Doesn't this fancy script make the text look important?" and the larger script underneath "the beauty of css design," says "CSS".

The Squiggly, Wavy, Curvy Vector Line

Wavy Line Hell

There have been only two or three occasions in my career when I've needed to create a curvy vector line for a design in Photoshop. Each time it took me much longer than I anticipated. I'm not sure why, but what seemed like obvious approaches before always turned out to simply not work as hour upon hour went by.

Vector Curvy Line Solution

I finally found a way! The best method I've found so far is to use the Line Segment Tool in Illustrator to create a straight line. Then use Filter > Distort > Zig Zag. Be sure to select "smooth" for the line. Be careful not to use the ZigZag inside of the Effects dropdown but instead confirm you are in the Filter dropdown before applying the distortion.

You should be able to copy/paste into Photoshop as a smart object now. I'm glad this has turned out to help so many other folks!

18

Comments

Background Image Resize

Someone asked the other day if anyone knew how to make a resizable background image. Another person, far more knowledgeable than myself (which could be about anyone at this point), replied the topic has been brought up before and no one found a solution. That often makes me want to give it a shot myself because I am a glutton for failure.

Picasso, Super-Sized

As someone else had pointed out, we’ll be getting “background-size” in CSS3 which I believe will be widely supported sometime in the year 2030. That means I couldn’t help but fail. So I dove right in. I wanted to go ahead and get my failure over with quickly.

As is often the case in this situation, I too failed to find a “real” solution to this problem. But as is sometimes the case, I found a really cheesy, down and dirty way to get around the issue, partially. Really, it’s just half-assed parlor tricks but maybe it’ll help you if you’re the cheesy, down and dirty type as well. I got tired of trying to figure out how to get it to work fully in IE so anyone that wants to offer a solution to that, feel free.

Cheese, By The Slice

So this won’t work for the vast majority of regular Joe users out there but it will work for about half of you since many viewers of this site are Mozilla users. IE users, it works but only to a degree... the slight of hand breaks down quickly.

This basically involves just slapping a DIV with content on top of another DIV that contains an image, essentially making that second DIV into a background. You use "em" for height and width of the image. Mozilla viewers will see in “Resize Image Background” that the text stays in the middle of the pizza when you change text sizes (oh, yeah, and the background gets bigger too). While IE viewers start out in the middle of the pizza obediently, they soon become unruly and their text moves up or down depending on the size. Even though the text position was not really my objective it seems like there should be an answer to this. My head hurts though, so I am stopping for now.

The CSS Sticky Footer

The Stinky Footer. Ummm... I Meant ‘Sticky’ Footer.

I see this request floating around a lot — the sticky footer. “How can I make a footer stick to the bottom of the screen and always remain on screen?”

Sticky Footer Is Child’s Play

The sticky footer turned out to be pretty simple — by that I mean I found the parts to the solution quickly on the Internet, of course! I like figuring out problems on my own but I don’t try very hard at first. Chances are, someone else has done the thinking. So I found someone on the Internet who’d done bascially done the hard part, they just couldn’t get it to be cross-browser, and of course it didn't validate. So as with most people’s code (whether they like to admit or not), this is cobbled together from other sources though I don’t remember exactly whom. Sorry.

You can see the basic solution to the sticky footer but this version doesn‘t validate because of some of the code needed. Basically you just create a margin at the bottom of the screen and then “position: fixed” a footer into it that is as tall as the margin. Of course IE falters.

Sticky Footer, Extra Toe Cheese

So, to the rescue, we have the Deluxe Model Solution to the Sticky Footer or “Sticky Footer, Extra Sharp Toe Cheese” I like to call it. Either way you cut the cheese — I mean slice it — someone’s going to balk at this code so we may as well cover the caveats right away. This version validates in Transitional but it requires some creepy IE Fandango in the HTML. We have to basically pull offending CSS code out of the CSS file and put it in the HEAD inside some tags that only only IE pays attention to. This is solely so you can say, "hey, it validates." So, not the best solution I guess, but it covers the bases that interest me. Hope this helps you with your stinky footer!

Hacking The Night Away

Someone pointed out that Way Cool Web Design likes drawing attention to the fact that that they can and do code for the lumbering MacIE5.2.3, yet last month's Web Techniques column didn’t discuss anything about the Mac. Can you guess where this month’s column is going?

A Browser For No Season

It wasn't all that many moons ago that I was in love with Internet Explorer for the Mac. During that same time, I developed a loathing for Netscape. How I came to be almost diametrically opposed in my feelings about these browsers is a boring story but I hope you make the same journey if you haven’t already.

Although Netscape is dead, its ghost lives on in very good form. Other Mozilla based browsers carry the torch now, and by golly they’re more like Klieg lights now, not torches. Mozilla FireFox is an absolute joy. Well, absolute if browsers make you happy, I suppose.

Internet Explorer for Mac is a weird little hobgoblin. I used to cherish it so. I guess now that maybe it had something to do with the feeling it gave me — a little bit of acceptance “in the real world,” where PC users frolick and play with nary a concern for compatibility issues.

Dr. Gates-enstein’s Monster

So anyway, thanks, Microsoft, for the good times. I do appreciate the attempt at putting a good browser on the Mac. I used it faithfully for a couple years.

It wasn’t until I really started getting into CSS that I discovered MacIE for what it is — a strange conglomeration of standards compliance in some cases and disregard for standards in other places. It actually does a pretty good job with CSS but darn if it doesn’t just explode in the cases where it doesn’t support some code.

Essentially, I code for FireFox, then hack for PCIE, then tweak that for MacIE. More often than not, whatever hacks I’ve added for PCIE need to be filtered out for MacIE. After that, occasionally, there’s just a few MacIE leftovers that really need special attention. That brings us to the Site Map for this web site, which we discussed last month.

MacIE Tries To Play Fair Sometimes

If you recall from last month I rambled on about using the “* html” hack to make a CSS declaration apply itself to flavours of IE only. That’s not entirely correct but for my purposes it works. If you want to know exactly which hacks work exactly where, you’ll have to consult one of the CSS hack charts available on the net.

Any-hoo, MacIE 5.2.3, like I said earlier, actually applies CSS pretty well. The problem is that you have to use the “* html” hack to get PCIE to behave, however that same code makes MacIE misbehave. So you need to apply a hack to the hack. Eekgads!

Gimme a Double-Hack With Fries, Hold The Pickles

Basically the hack for MacIE is a malformed comment in the CSS file, which you wrap around the other hacked code:

/*\*/
MacIE ignores anything in here
/**/

In our case, the previous month’s example hacked code looked like this:

* html #content-right #SiteMapList li { height: 1%; }

If we apply the MacIE hack around that, we get:

/*\*/
* html #content-right #SiteMapList li { height: 1%; }
/**/

Once we do this, we have a declaration that only PC flavours of IE will pay attention to. That hack is very handy and works in most situations. Sometimes though, if you’ve coded yourself into a corner, which I certainly have, or if you’re working on one of “those” projects (you know, where major changes come down the pike after you’ve completed a majority of the site) then there is another way to hack MacIE that I have found very effective.

Sometimes Ya Gotta Do What Ya Gotta Do

Since the very first god-awful web page I ever coded, I’ve been a big proponent of doing what you have to do to get HTML to work for you. I guess I’m a code whore. Oh, I enjoy my dash of standards and my heaping teaspoon of “top to bottom logical code flow” or whatever you want to call it, but when it comes time for the client to get what they want I have a hard time saying, “well I could make it happen but then your code wouldn’t validate.”

Go ahead, I’ll wait for your name-calling to end before I go on...

OK, so now that we’ve all sold out, let’s move on to the next Mac hack. It’s a malformed CSS import command. Thar she blows:

@import("macie.css");

With this handy-dandy little fella you can code the night away solely for the MacIE crowd if you wish. Just put it last in line of all your CSS imports, etc, so it overrides anything that came before it. No other browsers will import this bad boy. Now you could theoretically recode the entire CSS if you needed to. Heh, go for it!

Cross-Browser Coding? The Hack With That!

I feel your cross-browser coding pain. CSS hacks can be frustrating to learn. The promise however, is great: one set of pages, maybe one style sheet per theme if you’re lucky. That’s the name of the game. Learn a few hacks and never look back.

I've read arguments for and against using CSS hacks. You need to make up your own mind. I’m here to tell you I use them all the time and they save my bacon time and time again.

I have had to learn so many hacks that I can barely tell you the names... box model, Tantek, Holly, by golly. There's a varitable cornucopia of hacks that you can use now. I think I used them all and then some, mixing and matching like socks after the Sunday wash. What I learned is as far as I am concerned, in the business of making websites as skillfully and quickly as I can, I only really need 2 or 3 hacks routinely, with maybe another 1 or 2 in my back pocket for those rare issues.

A Great Cake Starts With The Right Ingredients

Before we actually get to the cross-browser code hacking we should cover a few of the basics real quick just to make sure we’re on the same wavelength. Actually I hope we’re not on the same wavelength because that means my wireless network has been compromised...

You will save yourself mucho time-o and many headache-o’s if you begin your coding with a good browser. Use whatever tool you want to write the code — some are definitely better than others, but the thing is the one I think is better you probably won’t, and the tool you swear by just pisses me off. Just use what you want. I will tell you that I have found it helpful over the years to be as clean as you can with your code. That’s partly anal retentiveness but also it really does help when you make changes. I grow less and less fond of sloppy code.

Anyway, preview your code in a good browser. Folks have their druthers but my code recipe kinda goes like this:

• add code gently while previewing in FireFox(FireFox is the most reliable-est, fastest, mostest standard-adhering-est browser I've used. Starting code in this browser means it will work in many browsers with less work down the road.)
• sprinkle < !-- Quirk on -- > at the top of each page to taste(this throws IE into QUIRKS MODE which basically means IE6 renders like IE5. We do this so we don't have to hack for different flavours of IE)
• beat and hack the CSS to work in IE6 until smooth(we will cover these hacks shortly)
• pour contents into 6x9 pan, pop into the oven, and be sure to check it with a toothpick in Mac IE 5.2.3(if you code for schools or artists don't skip this step — your cake could get burnt!)

The above recipe often yields enough yummy (acceptable from my viewpoint) servings for the following browsers. Of course, mileage varies:

• PC IE 6.0
• PC IE 5.5
• PC IE 5.0
• PC N 7.1
• PC FireFox .8 →
• PC AOL 7.0 →
• Mac Safari 1.2 →
• Mac FireFox .8 →
• Mac N 7.1
• Mac OSX AOL →

Cross Your Browser & Hope To Die

Let’s dive into some real-world examples. This website is as good a place as any to start. Lists are always the biggest pain in the ass for me. Believe me when I tell you I have some style nightmares involving lists...

So when a bug crept into my Site Map on this site it was no surprise. But still, no one wants to see it happen because it can mean from 5 minutes to 5 days of extra time trying to conquer the little bugger, depending on how anal you are about figuring things out, that is.

Holly Hack Saves Man’s Butt. News At 11.

The site map on a previous version of this website suffered display issues from browser to browser. When I viewed it in IE6 I saw small parts of Hell breaking loose as shown in the second image. I recognized the drifting bullet as something I’d seen before.

I applied a couple hacks to the most likely culprit, which in this case is the <LI> (because its background bullet was acting funky). I used a combination hack: “* html” and the Holly Hack (height: 1%). The CSS looks like this:

* html #content-right #SiteMapList li { height: 1% }

The “* html” makes the rule only apply itself to IE browsers. The Holly Hack “height: 1%” fixes another IE bug that I just happened to remember manifested itself in this way sometimes, making list item bullets indent further in this pattern, or rather the List Items were negatively indenting I suppose I should say.

This hack caused the bullets to, as the Beatles once sang, “get back where they once belong.”  But there was still a silly spacing issue. In the second example above there is undesired space above the “privacy” link and above the “resources” link. I played with some padding and margin but quickly realized there was something else even wackier than IE’s usual spacing issues going on. It became apparent that the issue was similar to the previous bullet issue in that the places where it manifested itself seemed to coincide. I applied the same combo on a whim to the second level <UL> and it immediately fixed the issue.