Chapter 4: 
Enough Technical Stuff - It’s Design Time!

Now that we know where everything is located, we have looked at the basic anatomy of a theme and how all the theme files work together, we can start the design process.

Quick Summary

1. Where to Begin
2. Understanding custom.css
3. Customizing Views
4. Attention to Detail
5. Adding Images
6. default.master.tpl Revisited

Where to Begin

First we need to create our own theme structure. We will start by duplicating the Brand Friendly theme and modifying its files.

1. Copy the /themes/BrandFriendly folder and rename it to your theme name so it sits in the root theme folder like this: /themes/your_theme_name.
2. Open the "about.php" file and edit the information to reflect your theme's information.
3. Brand Friendly comes packaged with a custom.css file in the "design" folder. *If your were started from scratch you would need to create this file.
4. Go to your Dashboard > Themes, and apply your new theme.
5. Edit the custom.css file to your heart's content. The custom.css file is added *after* the base theme's css. Alternately, you can completely replace the base theme file (style.css) by copying it from the /applications/dashboard/design folder into your theme's design folder.

Understanding custom.css

Now that we have our structure in place we can start building our customs.css file. But first, let's take a quick look at how custom.css works. custom.css allows you to isolate all of your design changes without ever having to touch the original stylesheet — thereby futureproofing your site against inevitable upgrades! On top of that, it would be a long and tedious undertaking for you to go through the default stylesheet and hack it up to your needs. Your Vanilla theme will still rely on the default stylesheet to handle all the little bits of Vanilla that don't affect your design. This way you only need to worry about the elements that make your theme unique. Vanilla automatically looks for a custom.css file onload, and loads it after the default stylesheet overwriting any elements you have modified.

Let's get started!

The first thing we need to do is enable our new theme in the Dashboard. If you followed the steps above your theme should be enabled, if not do so now. In the Dashboard click on "Visit Site" and make sure you have custom.css open and ready to edit. As previously mentioned in Chapter 1 - Your Arsenal we are going to use Firefox with the Firebug Add-on so we can easily inspect the code and determine which CSS elements to add and modify in our custom.css file. Let's start by making some changes to the Banner Using Firebug look for the Banner element:

Notice that .Banner ul supercedes any element in the default stylesheet. Let's make a quick change to the css:

.Banner ul {
   background: #000;
   padding: 0;
   margin: 0;
   width:600px;
}

The result:

As you can see custom.css is very flexible. We can grab any element in the default stylesheet, copy it, paste it into custom.css, and make changes. Simple!

Customizing Views

Views are the building blocks of your Vanilla theme. Therefore, it is essential to understand how each view is structured in CSS and how to modify it to your design. We'll start by looking at All Discussions, the default landing view within our Content element. The Discussions view is contained within ul.DataList. Each Discussion item is wrapped inside li.Item. One of the neat things that Vanilla does is separate which Discussion items belong to you. For example, when you are logged in you will notice that there are 2 different color highlights for discussion items: 1. Light blue, discussions you have started, and 2. White, all other discussions in the community.

Let's dig deeper. Inspecting the code reveals that there are multiple child classes appended to li.Item.

With these child classes we can have even more control over our design. For example, if we add the following code to custom.css:

.Mine { background: #E3F4FF; }
.Alt { background: #EEEEEE; }
.New { background: #FFFFDD; }

The result

Now let's take a look at a single discussion view. Similar to All Discussions, the single discussion view is contained within a <ul>, ul.MessageList. The initial post or FirstComment, as referred to in the code, is wrapped inside li.Item, as well as each reply or Comment.

If we add the following code to custom.css:

ul.MessageList li.Comment{background: #FFFFDD;}
ul.MessageList li.Mine{background: #FFFFFF;}

We get:

Simple!

Targeting Specific Views

In certain situations you may want to alter the look and feel of specific views. Lets say you want to change the width of the Content element on the Activity view. If you were to add #Content to custom.css and change the background color, or add a border this would affect every view across your entire theme. Why? Because the Content element is global. This is where child classes come in to play. If we inspect the code on each view we will notice that the Body element has a variable that adds a child class for each view.

If we add these classes to our custom.css and prepend them to an element like Content we can target a specific view. For example, if we add the following code to custom.css:

body.Activity #Content {
   width: 600px;
   background: #FFFFDD;
   border: 1px solid #000000;
   padding: 10px;
}

We get:

Attention to Detail

As a designer you know it's all in the details. That's why we created the dummy content file. If you read through Chapter 1 - Your Arsenal, you should have already downloaded the dummy content file. If you have not already downloaded the dummy content file you can grab it here. Using our dummy content let's take a look at the discussion entitled "Use this post to edit all CSS elements". This post has all the basics you need to fill in the gaps of your design. Let's take a quick look - Inspecting the code of the dummy post we can begin isolating all the small bits and pieces, such as h1 through to h6 tags, font styles and weights, link states, blockquote, etc.

Detail Checklist

1. All typographic elements in the post entitled "Use this post to edit all CSS elements"
2. All Discussions list item titles, meta, and options menu
3. Single post view messages and replies
4. Single post view comment box
5. Start a Discussion view
6. Activity view list items, titles, meta, and replies
7. Inbox view list items, title, meta, and replies
8. Start a Conversation view
9. Profile view Panel items, activity feed, notifications, discussions, status, and replies
10. Searchbox
11. Panel modules - Categories, tags, etc.
12. Guest Box
13. Signup and Signin popup windows and views
14. Popup windows
15. Message boxes

You get the point! I'll leave the rest up to you.

Adding Images

Adding images to your theme is simple. All images associated with your design should be stored inside the design folder of your theme. For more information on theme structure see Chapter 3 - How Vanilla Themes Function. When calling images in custom.css we do the following:

body{
background: url(bg_tile.jpg);
}

Notice that we do not prepend images/ or any other folder. Simple!

default.master.tpl Revisited

Ok, now that we have spent some time looking at custom.css let's quickly revisit the default.master.tpl. Not everything can be handled directly through CSS. Your design might have features that require you to load scripts like jQuery, custom stylesheets, or even change your favicon. To do this we use the {literal} tag to add code in our <head> section after the {asset name='Head'} tag.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
<link rel="stylesheet" type="text/css" href="yoursite.com/theme/css/styles.css" media="screen" />
 
<link rel="shortcut icon" href="yoursite.com/theme/favicon.png" type="image/x-icon" />

The {literal} tag can also be used to add meta tags, such as keywords or descriptions, and Google Analytics.

{literal}
<meta name="description" content="descriptions here" />
<meta name="keywords" content="keywords here, and here" />
 
  <script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-12345678-9']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
 
{/literal}

There may be a need to add new classes to accommodate your design. For example, you might want to add banners to the Panel, or as illustrated in Chapter 3 - How Vanilla Themes Function, add a twitter feed. To do this we will need to modify the default.master.tpl file. Let's start by adding a small banner to the Panel. First we need to add the following code to default.master.tpl inside Panel just below {asset name="Panel"}.

<div class="BannerAd">
   <img src="http://vanillaforums.org/applications/vforg/design/images/services-advert.png">
</div>

Then we need to add this to custom.css:

.BannerAd{
   margin-top: 10px;
   width: 250px;
}

We get:

This is just the beginning of what you can do. Change up the default structure as much as want and add as many new elements to the default.master.tpl as needed.

A few examples of how far you can take your theme

Check out more examples on the Vanilla Showcase

Structure your HTML wisely!

When coding up your theme you should consider 2 important goals: lean code and meaningful code. Using as little markup (HTML tags) as possible and making sure that the markup is meaningful by using semantic class and ID names that refer to their content, not how they “look” (class=”widget-area” instead of class=”sidebar-left”). Don't suffer from Divitis; including too many unnecessary <div> elements in your code. In other words, too much meaningless structure. Obviously we’re going to have some. But we don’t want too many or ones without meaning. We want enough structure using the <div> tag that we can reuse our code for multiple theme layouts. We want to code something we can come back to and use again. I recommend creating a static HTML file first! Mainly because it will make the development process a lot easier. I usually create a HTML file for every template that I need, test it across all browsers, validate both HTML and CSS markups, then all I have to do is cut & paste the code.

The Ultimate Theme Guide for Designers

Table of Contents
Chapter 1 - Your Arsenal
Chapter 2 - Installing Vanilla on localhost
Chapter 3 - How Vanilla Themes Function
Chapter 4 - Enough Technical Stuff - It's Design Time!