Your options for a Drupal theme

There are a few ways to get a Drupal theme for your site.  These can be quite easily placed along a continuum with "Low Cost/Difficult" at one end and "Higher Cost/Less Hassle" at the other end.  It all depends on your time, skills, and budget whether you want to go more of the DIY route, hire a professional Drupal themer, or somewhere in between.

Do-it-yourself Drupal theme

If you know XHTML/CSS and know your way around a graphics editor, you may very well be able to create your own Drupal theme.  Knowing how Drupal’s bits and pieces work is more important than any kind of advanced PHP knowledge.  The difficulty of this vastly depends on how complex your desired theme is and how your skills are.  A Drupal theme can take anywhere from a day’s work to hundreds of hours.  Most of the themes you see here on TopNotchThemes took experienced designers/themers 30-50 hours to create.  Your first theme won’t be your best theme, so make sure this is an appropriate decision if you decide to go the DIY route.  For your first time, you’re probably best off trying to modify something already out there.

Free (or almost free) theme

There are tons of free and a few very low cost themes out there.  Most are available on Drupal.org.  These vary in quality and the nicest ones usually get widely used on many sites.  If exclusivity of your theme isn’t a big concern, these are a great place to look.  One of the most common approaches is to take a free theme and customize it by adding a different header or changing some styles in order to get a more custom look.  This is a great approach if you’re new to Drupal theming.  It will help you get an understanding of how things work but with a good structure beneath you.  These often have a "stock Drupal" kind of look to them so you’ll have trouble finding something completely unique.

If you’re on a tight budget but want something customized and don’t have the skills or time yourself, you can also hire a Drupal themer to spend just a few hours customizing an existing theme to suit your needs. 

Premium theme

This is really a new category in the Drupal theme world that we like to think we had something to do with  ;)  A premium theme is one that has a cost justified by the design and coding work, and support that goes into providing the themes.  These will often vary greatly from that "stock Drupal" kind of look, and are much more limited in their distribution.  A premium theme isn’t for everyone, if you’re doing an extremely low budget project or need a custom design, but they are a viable option for what’s in between.

Custom theme

A custom theme involves having a design created for your site from scratch, usually by a designer who then provides mockups (or mockups + CSS) to a Drupal themer.  Trying to pin down the cost of an "average" custom theme is kind of like asking how much a house cost — it really depends.  Bare minimum for an extremely basic, single page design would be a few hundred dollars.  Average cost for a small business site design + Drupal theme would be in the low thousands.  This can vary widely with things like number of unique pages, Drupal module support required, if you need a logo, etc., but hopefully that gives you a general idea.  It’s worth noting that there is a shortage of good Drupal themers available right now — demand is exceeding supply!

Weighing your options

The right choice for your web site project’s theme should fall into one of the categories above.  Make sure you carefully weigh your timeline, risk, budget, and skills before deciding on one of these options.  In our previous experience doing theming as part of a Drupal project team, the theme is usually 25-40% of the budget for the entire project.  Drupal’s themes aren’t just a pretty skin on a functioning website — a lot of functionality is exposed through the theme itself and it can be an uphill battle if you don’t know what you’re doing. 

 

Installation & configuration

Now that you’ve purchased your theme, the next step is uploading and installing it onto your site.

First, you should receive an email as soon as your purchase is processed. Included in this email is a link for downloading your theme in the form of a compressed archive. If you lose this email or cannot access the account, you may download this theme by going to http://www.topnotchthemes/user, logging in, and clicking on Files.

After you have saved your theme, you must uncompress the archive and upload (FTP) the theme files to the proper place on your server to use it.

If you don’t already have software on your computer to do these things, here are the free applications we recommend:

WINDOWS

• 7-Zip - http://www.7-zip.org
• FileZilla - http://filezilla-project.org

OS X

• The Unarchiver - http://wakaba.c3.cx/s/apps/unarchiver.html
• FileZilla - http://filezilla-project.org/

If you’ve never done anything like this, don’t worry! Here are the steps for uploading your theme:

1.  Download the file to your own computer. With most browsers, you may right-click on the file link and select an option such as save link as.. to save it locally.
2. Unzip the compressed file (usually by double-clicking it, or right-click on it for more options). You should see a tnt_yourthemename folder (which contains your actual theme), and then extras and documentation folders. Remember the location of this directory. 
3. Start your FTP software.
4. The program will need some connection information. The host or server field needs the domain name you’ve set for your website, or another name that your web host has specified. The username and password fields contain the username and password supplied by your web host.
5. Your FTP software will have a section labeled Local Computer and a section labeled Remote Computer, or something similar. These are the file systems of your personal computer and the web server, respectively.
6. Navigate in the local computer side to the location of the uncompressed theme. 
7. Now look at the Remote Computer side. You should see your Drupal files here, with an index.php file in this folder, or you may need to go inside a folder called htdocs or www. If you don’t see this, it’s possible that this is not the root directory of your website. Consult your web host or system administrator for the exact location in this case.
8. Inside the sites folder there should be an all and default folder. Go into the all folder and, if it doesn’t already exist, create a themes folder. Then go into themes.
9. Drag the tnt_yourthemename folder with the uncompressed theme into the new themes folder. The files have now been uploaded!

Enabling Your Theme

The next step is setting an administration theme and enabling your new theme. 

1. Log into your site with your administrator account.
2. Go to www.yoursitename.com/admin/settings/admin
3. Set your Administration Theme to Garland (or another theme of your preference, but Garland comes with Drupal 5 and is a good admin theme), check both boxes on this page and click Save
4. Go to www.yoursitename.com/admin/build/themes in your browser.
5. There should be listing of each theme available for your site. Find the thumbnail and name of the one you’ve just purchased.
6. There is an enabled column and a default column in this table. Select both of these for your new theme, and click Save.

Your new TNT theme is now activated on your site!

Configuring Your Site

There are some basic site options you may wish to go through before continuing. www.yoursitename.com/admin/settings/site-information contains several basic settings that will be used in many places. Again, you must be logged in as an administrator to use this page.

Name is the name of the site, and will be present in the header and title for all pages, unless the theme or your specific coding overrides this.

Email address is the contact page for this website.

Slogan is a tagline that most themes display near the site name.

Mission is a longer statement that themes sometimes display at the top of the content or in another appropriate area.

Footer message is a message that will be placed in the footer of each page if you fill this field in. Use this for something like a copyright statement or simple text, but menus should be added as a Drupal menu and then placed in the Footer region.

Default Front Page controls the initial page most visitors will see on reaching your website. It is initially set to node, which is usually fine. Once you get more comfortable with Drupal, you may wish to change this to something different.

Configuring Your Theme

There is also some theme-specific configuration that you will probably want to do next. On your www.yoursitename.com/admin/build/themes page, there will be a Configure link next to the theme. Click this and you can set whether your theme should show certain options, like the slogan or search box. You can also upload your own logo.

In order to fully make use of the regions and styling of your TNT theme, blocks must be configured. Blocks are displays of content that can be moved around to adjust your page layout. They could be a list of latest blog posts, a news feed, a series of images, etc. You must specify which blocks are displayed where, otherwise you will just see a simple header, footer, and your main content in the middle.

Go to www.yoursitename.com/admin/build/block, then click on the link near the top for tnt_yourthemename. Down in the table listing available blocks, use the Region drop down to select which blocks you want to display in which regions. You can use the Weight drop down to reorder them as you choose.

Note: Drupal themes from TopNotchThemes have many more regions and styles than most Drupal themes available. They are quite flexible, but there are some design constraints. You may not be able to put lots of blocks in some regions, or put a large image in a certain area, or your design will look awkward. We have tried to strike a balance between high end themes with strong aesthetic appeal, while still giving you the option to move content around where you need. Experiment to figure out what works best for your theme!

Removing Your Theme

You may wish to disable or remove a theme. The procedure is very simple.

To disable a theme, go to www.yoursitename.com/admin/build/themes, select a different theme as default, and uncheck enabled on the theme.

To completely remove a theme, FTP to your site as we did in the installation process. Navigate to the same location you used to install the theme and delete the folder you copied over initially. Once you’ve done this, the theme will be completely erased. If you want it back, you will have to redo the installation procedure.

Advanced Configuration

CREATING DIFFERENT LAYOUTS

You can use the concept of block visibility in order to create completely different layouts for different pages.  For example, you may want to have a very different layout on your home page and only use the "preface" regions on this page to show some recent content.  

Go to www.yoursitename.com/admin/build/block in order to see the regions and blocks available. Drag a block you’d like to only show on the home page into a preface region, and click Save.  Click Configure next to this block, and scroll down to the section containing "Show block on specific pages".  Make sure the second option is selected, "Show on only the listed pages", and enter <front> in the "Pages" field below.  Click Save.  Now this block (and thus the design for this section of your theme) will only show up on your front page.

MAINTENANCE PAGE

Your TNT theme comes with an "offline" template to match your site.  To enable this, you’ll need to add the following line to your site’s settings.php file:

$conf['maintenance_theme'] = 'tnt_themename';

Replace "tnt_themename" with the actual name of your theme, which can be found as the "tnt_themename.info" file in the main folder of your theme.  This page will be shown if you put your site in offline mode, or if your Drupal site is having technical issues.

 

EDITING YOUR THEME

It is also quite easy to make modifications to your TNT theme to further customize it for your specific needs. In your theme’s folder, open the local_sample.css file to see instructions on how to add changes to this file so your main theme can still easily be upgraded as new versions are released.

Theme settings available in our themes for Drupal 6

One thing you won’t find in any other themes out there is the sheer number of configurable options we make available to you in all our Drupal 6 themes. These do the heavy lifting for you, and help you to get rid of some of Drupal’s annoyances and make your theme from TopNotchThemes even more your own, without having to write a line of code!

This handbook page explains all the theme settings that are included with our themes.

The Basics

The basic theme settings built in to Drupal for any theme to use. Your logo, site name, and slogan usually appear near each other, at the top of the page.  You can use these checkboxes to turn off any of those fields, and set the text for these under Site Configuration > Site Information. The mission statement is also usually near the top, and is usually used for longer text.  You can add simple HTML to the mission statement (bold, a link, etc) for further customization. This field can also be used to easily highlight a certain promotion or featured service.

User pictures in posts and User pictures in comments are for turning the display of user avatars (icons) on and off next to nodes and comments they author, if you have this feature enabled on your site. You can turn on user pictures as User management > User settings.

Most of our themes also have an integrated search box. While you can always add a search box as a block as well, you can usually toggle a custom styled search box in a theme on and off with this checkbox.

The shortcut icon is the tiny icon (also called a ‘favicon’) that shows up next to your website’s URL in your visitors’ address bar, or next to your site name if they bookmark you. All our themes come with a custom favicon to match.

Primary and secondary links are special menus for your site. Primary links are used for your main site navigation menu, and secondary links can be either a set of sub-navigation menu items in a sidebar or other location, or also often appear as small text links in the upper right section of a theme. If you haven’t yet, you’ll want to add and configure these at Site building > Menus.

Upload your own logo and shortcut icon (favicon)

Above we mentioned your logo and shortcut icon — here is where you can upload your own if you’re not using the default that came with the theme.

Mission statement display

While the mission statement can be enabled/disabled above entirely, by default it will only ever show on your site’s front page. This is great if you want to highlight it specifically for the front page, but if you want it to display throughout your entire site, you can set that option here.

Show/hide breadcrumbs

Breadcrumbs are a trail of navigation that usually displays at the top of a page to let the user know where they are in the site. They usually look something like this:
Home > Blogs > username’s blog

You may not need these, but with a TNT theme, the choice is up to you! Out of the box, Drupal doesn’t always give you exactly what you expect to see here, especially if you’re using Views. Check out the Custom Breadcrumbs module for more control.

Anonymous usernames

This gets rid of an (in our opinion) ugly little detail when you have anonymous commenting enabled — the display of the text "Not verified" next to comments. Uncheck this to turn that "feature" off.

Details in search results

By default, Drupal’s search results give you a whole lot of text below the returned nodes, which you may not want. You can uncheck any of these fields here, so they will not display below nodes on search results.

Author & date byline on nodes

This is the "byline" that appears near the title of nodes. You may want only the author or date to show up, both, or neither. Our themes let you select how this should be displayed, per content type. For example, you might want to show dates on press release nodes, nothing on static pages, and both author and date on story nodes. Simply check the "Use custom settings…" box and then customize the settings for each content type below.

If you want to change the format of the date, go to Site configuration > Date and time.

Taxonomy & vocabularies

You can also do the same kinds of customizations per content type to many other parts of nodes. In this case, you can make several choices with how your taxonomy terms (aka. tags or categories) are displayed. You can choose from showing taxonomy terms only on full node pages, on teasers, both, or neither!

There are also two options for the display format: should all terms be together in one line (usually separated by commas or large spaces), or on separate lines? Vocabularies are containers for similar terms. For example, on a music store website, you might have one vocabulary for Genre, another for Format, and a third for tagging items as certain "Employee Picks". But this last vocabulary is only used for internal organization of content, such as if you wanted to create a block of "Kelly’s Top Picks" that only showed items tagged with "kelly".

If you choose the top option (Display each vocabulary on a new line) and only check the Genre and Format vocabulary checkboxes, your node would display its taxonomy terms like this:

Genre: Alternative
Format: CD Single

‘Read More’ links

This section allows you to control the text and properties of the "Read More" link that appears at the end of teasers. You can change all these options per content type. For example, you might want your "Article" content type’s read more link to say "Read more of this article". The tooltip is the text that displays in a tiny popup next to the mouse cursor when a user hovers over the link. You may want to put a longer description in here.

You can also add text or HTML before and after each of these links. You might want to add parentheses before and after so it shows as (Read more), or use some inline styling to make them larger, italicized, etc.

‘Add new comment’ links

These comment settings are particularly useful if you want to add your own special flair to your site’s comments, or you’re using comments for something else, like ratings or feedback. You can adjust these settings differently for each content type, for teasers vs. full nodes, and again add any custom prefix and suffix.

Link text for ‘Comments’ and ‘New comments’

Here you can completely customize the text that’s displayed for existing comments.

Search engine optimization (SEO) settings

Page titles

One of, if not the most important thing for improving your site’s ranking in search engines, is the page title tag. This is the text that displays as the title of the page in your visitors’ browsers, and what shows as the clickable link when your site shows up in search engine results. You can choose here between predefined patterns of your site’s name, slogan, mission statement, and page title. You can also add your own separator icon.

For best search engine results, we’d recommend the following settings:
Front page: Site slogan | Site name or a custom title of your choosing with lots of great keywords
Other pages: Page title | Site name — it’s best to put the title of the page first, so all pages don’t start with the same site name

For further customization of page titles for each node and things like Views, check out the (aptly named) Page Title module.

Meta tags

The text description above says it all — you can put in a basic meta description here that search engines will display with your page title. But we’d highly recommend the Meta Tags module!

Customizing your Drupal theme

Making small changes to your Drupal theme is easy! Some changes can even be made through the administrative section of your site, without having to touch any code. Explore the sections of this handbook listed in the menu to easily make customizations to your TNT theme (or any other!).

This post covers some basics of CSS and working with your Drupal theme