Designs & Drupal themes

This section covers everything Drupal theming -- installing and configuring TNT themes, and creating your own or editing an existing theme.

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

OS X

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

PANELS 2

Panels 2 is a popular Drupal module that allows you to easily (drag-and-drop!) create highly custom block layouts on a page-by-page basis. Your theme has basic Panels 2 support built in, so you can use this module to create more advanced layouts, either in conjunction with or instead of some of the regions of your TNT theme. Please see the panels.txt documentation file in this folder for more info.

VIEWS

Views is another extremely popular Drupal module that lets you create custom listing pages, blocks, and other displays of content. Install this on your site to create more ways to display and filter your content. Pages and blocks generated by Views will also have styling from your TNT theme applied.

EDITING YOUR THEME

It is also quite easy to make modifications to your TNT theme to further customize it for your specific needs. See the notes_on_themename.txt file for more details on this.