Newbie Adventures in Theming

evelyn — Wed, 16 Sep 2009 18:07:04 +0000

We recently redesigned the Growing Venture Solutions site and I was given the task of completing and theming the new design. This was only my second theming assignment and it was a tremendous challenge and learning experience; I'd like to use this post to pass on some of the resources that helped me along the way. Maybe they'll help someone else?

The original GVS site was running the Marvin theme; since we’ve been growing it was time for a custom look. The first passes at the design and new logo were done by Don Hajicek and everyone was pleased with the overall style and particularly the leaves on the logo and on the “more” links. When I joined GVS I continued where Don left off by expanding his design to include more content elements, adding the navigation tabs and the footer area. (I like the little set apart yellow tab, although we're not sure if that color choice will stay.) I then moved on to Adventures in Theming.

Adventures, indeed. This image is a diagram Greg drew for me to explain the roles of the system administrator, site builder, developer, and designer. (“There are these overlapping bubbles, see?”) This pretty much sums up where I was starting from.

About a week in, when I was near the nadir of my learning curve confidence, I found this on Nick Lewis' site and I felt some relief; I was not alone: "When you first start, its going to suck: its going to be both boring, and confusing. Can you endure the unpleasant experience of watching yourself suck, while both confused and bored?"

Being a newbie, I'm trying to keep in mind all the questions I've had and concepts I needed time to grasp in the hope that I'll be a good teacher to someone else someday. In that spirit I wanted to list some resources that were particularly helpful to me, besides drupal.org and "The Google":

1. Steve Harley:

My colleague and a patient teacher whose depth of knowledge does not obscure his ability to see things through new eyes. We spent many days implementing a very basic theme together for a client prototype site, and in this process Steve gave me a solid conceptual understanding of how Drupal is structured. Access to Greg and Ezra was also fortunate. The benefit of having an experienced Drupal developer to answer questions cannot be underestimated!

2. Books:

Using Drupal – especially chapter 11 on theming.
Drupal 6 Themes

3. Tutorials

mustardseedmedia.com, like, all of them. (Bob – I’m sending a chip in.)
Nick Lewis: The Blog

4. Zen theme documentation

Yep. Handy as hell.

Final note for Drupal theme newbies

This note is for folks like me who come from a solo freelance background serving smallish clients and not worrying too much about coding standards. Validation, sure, but not whether selectors need to be on separate lines. Did I hear a gasp? When Ezra pointed out that my css was not formatted according to Drupal coding standards I said something like, “Well I prefer it THIS way.” Everyone in the room was horrified. So I read the coding standards page in the manual and this discussion about why there should be css standards in Drupal, and I now understand the broader picture and I changed my css formatting. That’s one of the biggest shifts in methodology I have made as a designer/coder moving into Drupal: working with the understanding that these are (usually) more powerful sites built by a community where standards and version control make the process run much better for all.

Designing the site: CrackingDrupal.com - How to build a "speaking" navigation

evelyn — Wed, 24 Jun 2009 04:27:13 +0000

Hello - I'm Evelyn and I have recently joined GVS as a designer and usability tester. I have been working as a freelancer for the past seven years, and now that my daughter is entering 1st grade I am excited to be spending more face time with grown-ups!

My first task as a designer with GVS was to design a site for Greg's book: "Cracking Drupal". This was also my first real-world experience theming for Drupal and with some help, it was pretty simple.

I began by chatting with Greg about what he wanted the site to do and how it should look. I also gave him a simple design worksheet to complete with questions such as "Who is your target audience?" and "How do you want people to describe your site?" (If I could ask only one question, this last one would be it.) Greg wanted the site to draw on the cover of the book, and wanted it to be elegant, streamlined and easy to navigate.

Book Cover: As a starting point it was an obvious choice to take the book cover and modify it into the header and footer. I pulled the color palette from the cover as well, and added a burnt orange accent to offset the strong blues and blacks. In general I try to avoid black text on white, so the body copy and some headers are actually a dark blue.

Elegant: I always strive for elegance. By elegance I don't mean just "tasteful, refined or dignified" (Oxford American Dictionary.) For me, elegance in web design is integral to good usability. Even grungy, busy sites, when done well, can be described as elegant. So for Cracking Drupal that meant a clear hierarchy and harmonious color scheme taken from the book.

Streamlined and easy to navigate: Putting myself in the position of the site user, I looked at the main navigation areas Greg wanted. I have to admit that while I sort of knew what "errata" meant, I wouldn't have bet money on it. That led to the use of "Speaking Tabs" - navigation tabs that have a subtext area that describes what one will find on that page. I've seen these tabs here and there and wanted to try them out. I thought they'd be a perfect way to clarify some terminology, but they serve several other purposes as well:

liven up the header area of the site,
promote "Growing Venture Solutions" with a prominent position,
explain that clicking "purchase" will take you to Amazon.com, and
simplify the user experience by letting people know specifics like what excerpts exactly, what downloads are available, etc., without them having to poke around. (Less clicking for some folks = better user experience.)

Create Speaking Navigation in Drupal

For this site we could have just hardcoded the "speaking tabs" text into the theme, but we wanted to do this in a more sustainable way that we could actually use for clients some day. So, how to get the text onto the tabs in a way that is admin editable? We used the Primary Links and put the "speaking" part of the tabs into the "Description:" element of each menu item. Next up was to override the default theme_links function to show that text.

We created a theme specific override of the function, copied over the default code, and replaced the default line:

$output .= l($link['title'], $link['href'], $link);

With a bit more code:

if (isset($link['attributes']['title']) && $attributes['class'] != 'links inline') {
  $link['html'] = TRUE;
  $output .= l(check_plain($link['title']) . '<span class="speaking-nav">'.  filter_xss_admin($link['attributes']['title'])  '</span>', $link['href'], $link);
}
else {
  $output .= l($link['title'], $link['href'], $link);
}

The first line is an important one. The theme_links function is used for a lot of things so this conditional checks for menus that have a description set and where it's not an inline link (you know, those things under a node or comment). For this site that's a solid enough check that it only applies to the primary links, but you may need to do something more.

The fun part is inside that conditional where we tell the l function to expect HTML so that we can add a little span with the description in it and then run check_plain and filter_xss_admin on the user entered bits to stay safe (naturally).

The final result is a site that remains with the style of the book while adding a little extra fun.

Growing Venture Solutions - GVS - theming