Premium Drupal themes, or *Drupal templates* as they are sometimes referred to, are themes that are beautifully designed paired with advanced features such as theme settings, color, style and layout options. There are a few open source (free) premium themes and most are sold by commercial Drupal theme vendors.
Advanced features could be loosely defined as anything beyond what Drupal core offers out-of-the-box. There are two main types of featuresâ€”end user features and developer/themer features. In the first of this two part series we will explore end user features and follow up next week with developer features.
End User Features
End users are not web professionals so they need features that allow them to customize the look and layout of their Drupal website without any coding. Drupal give us the tools to build such features, but they are not easy to build and designing a beautiful theme to take advantage of them takes extra work.
End user features include features such as:
* Advanced theme settings.
* Layout options.
* Color and style options.
Drupal Themes for Sale?
Some freebie themes come with advanced theme settings and other features but most do not, so the selection of beautiful themes with the added functionality is not great. The main reason for this lack of feature rich themes (that are also top notch designs as well) is that these types of Drupal themes are expensive to build. Costs easily run into several thousand dollars and up, and while open source module code can be reused, design elements are seldom reused at all (only in low end themes such as Artiseer or Template Monster type themes), and thus are unique and original to that one design.
Premium Drupal themes allow you to have a unique and compelling design for a fraction of the cost of building one from scratchâ€”around 1/10th to 1/5th compared to building a custom theme.
The only way to make these types of themes available on a wider scale is to sell them, and usually at a fraction of the cost of having a totally unique theme built for your site. Some people object to the sale of Drupal themes, however, if we ever want to have a wide selection of beautiful Drupal themes to choose from then the people building them need to make a living. It requires a huge investment of time and energy to design and build these premium themes and the historical approach to Drupal themes (free and open source) has undeniably failed to deliver the high end themes sought after by a large proportion of the Drupal community.
While these "Drupal templates for sale" are not one hundred percent unique to the same extent that a custom theme would be, when you combine the additional theme settings and other features included in premium themes you go a long way towards having a unique look and feel for your website.
Pair this with a couple of hours of custom design work and you have yourself a unique and compelling website design all for a fraction of the cost of building one from scratchâ€”approximately 1/10th to 1/5th when compared to a custom theme build.
At the end of the day a totally unique theme is not always the major consideration when selecting a theme. Other criteria may be more importantâ€”such as being able to easily change the configuration of the theme, price and buying from a reputable vendor. You can take your chances with a freelancer and get a cheap, quick and dirty theme or you can purchase a beautifully coded, highly configurable theme from one of several first rate premium theme suppliers.
Lets move on and start looking more closely at these advanced features in more detail starting with *theme settings*.
Advanced Theme settings
Theme settings typically change what and how information is displayed in your theme. Drupal comes with a basic set of theme settings but we can build custom settings and make them show up in the theme configuration page so end users can easily tweak the look and feel of their Drupal site.
These point and click modifications to the look and content of your pages normally require expensive custom coding, so theme settings are a cost effective way of customizing the look of your theme.
Theme settings can be grouped into categories, so lets take a look at whats possible in Drupal.
* Display the Drupal mission statement only on front page or on all pages.
* Display breadcrumbâ€”yes, no, or only on admin pages.
* Custom breadcrumb separator (type in the separator of your choice).
* Show the *home page* link in the breadcrumb.
* Append the separator to the end of the breadcrumb, useful when the breadcrumb is placed just before the title.
* Include the content title at the end of the breadcrumb.
* Display "not verified" for unregistered users (e.g. on comments).
* Control what is displayed on search results, such as a text snippet, content type, author name, posted date, comment count and attachments.
With node settings you can adjust which information is shown with your content, and how it is displayed. Themes can include settings that can control these by content type, or globally. Here are some examples of what can be done with nodes from our range of themes setting in all our premium themes.
* Display author's user name.
* Display date posted.
* Control when taxonomy terms be displayed such as never displayed, only on teasers or only on full nodes.
* Control how taxonomy terms are displayed such as each vocabulary on a new line or all taxonomy terms together in single list.
* Control which taxonomy vocabularies are displayed.
* Set the link text for the *Read more* link.
* Set the link text for comment links such as the *Add new comment, Comments and Comment count* links.
Its possible to include basic SEO settings such as:
* Configuration of the Page Title such as Site title | Site slogan, Site slogan | Site title, Site title | Site mission, or enter a custom value.
* Set global meta tags (less useful for most sites but it can be one).
Theme settings are great and offer a lot of options for site owners, but they are more display options which is good but not the whole story. How we can really make our premium theme rock is to include *design options*.
Again there are several major categories of optionsâ€”color options, layout options and style options.
Some Drupal themes can be recolored from within the Drupal administration using the color picker or selecting from preset color scheme options. These are known as *colorable themes*. Drupals default core Garland theme is a colorable theme.
Colorable themes are the hardest to build IMO. Getting the color schemes to balance correctly can be extremely difficult and usually only a handful of the preset options actually look any good. That said, they do allow you to at least have a semi-unique theme.
There is a second category of colorable themes that do not use the color picker but instead allow you to select from preset CSS *colorized* stylesheets. Two popular free themes that do this are Newswire and Tapestry.
Layout Options: Regions
Drupal places blocks of content in *regions*. A region is a predefined *box* somewhere on the pageâ€”such as a sidebar. Drupal themes can have unlimited numbers of regions although for practical reasons having hundreds would probably be difficult to manage.
Normally when a region is not being used it collapses to make room for other regions or content to expand into. These are known as *collapsible regions* and all good Drupal themes have them.
All premium themes come with additional regions over and above Drupal 6 cores default 5 regionsâ€”header, left, right, content and footer. Some have more than others and most AdaptiveThemes premium themes will ship with 40+ regions. Using the blocks system its very easy to place blocks and mini-panels in these regions and quickly configure a very advanced layout for your site.
Layout Options: Fluid or Fixed
Many premium themes can be easily configured to be fluid or fixed width. While fixed width sites are the most popular, fluid width can be useful in certain applications such as forums, galleries or when you have large content items such as wide tables.
Our base theme supports both layout options, but it depends on the style of the design to a large extent and not all designs are able to support this. Some designs simply do not work well at 100% width, while many will work as a *flexible width theme*, where there is a minimum and maximum width and the theme can compress and expand between the two widths.
...each site section, even different pages, can have a totally different layout such as fluid, fixed, flexible, left and right sidebars, two left sidebars, two right sidebars and so on and so on.
Some premium themes allow you to set the width in a theme setting. While this can be handy it's also rather inflexible and it's more beneficial to have a *layout system* where you can control the width (fluid of fixed) of any site section. The theme setting approach will be site wide, so it takes away the option of having your various site sections laid out differently.
For example your business brochure section might be fixed width, whereas your client forum might be 100% width.
This is the direction AdaptiveThemes has taken and each site section, even different pages, can have a totally different layout such as fluid, fixed, flexible, left and right sidebars, two left sidebars, two right sidebars and so on and so on.
While it will take a themer to set this up for you its a very easy and inexpensive task for us or your regular web developer to perform.
Layout Options: Multi column layouts
A multi column layout is where you have 2 or more columns sitting side by side across the screen. Often these are seen on the home-page or in the footer with a menu in each column. There are endless possibilities for these more advanced layout options and a common user of them are newspaper and magazine sites.
There are three main ways to achieve this.
1. Build it from scratch (not attractive to end users...).
2. Use a layout module such as Panels, powerful but currently in the testing phase.
3. Include them in the theme by default, but allow the use to be optional.
Building from scratch is not an option for most. It requires sound knowledge of CSS and HTML and most people are not web programmers. Enough said.
The vast majority of themes can support the Panels module, however at the time of writing is not available as a stable release, although from my testing it appears to be working well.
The third option to embed the columns in the page layout is one many premium themes offer. Our themes support Gpanels, which are multi column snippets we can place anywhere in the theme.
All our themes have at least one or two them included in the core theme and its very easy to add more, which allows us to offer an amazing array of out-of-the-box layouts.
Once Panels module is stable will build custom Panels layouts also and include these in our themes, so you can select these custom Panel layouts from within the Panels administration and place content in them. These will be available for all themes and as a free upgrade for themes sold before Panels becomes stable.
How do themes offer style options? The most popular way is to allow blocks, nodes and comments to have a preset design applied to them within the Drupal admin.
Put simply, when you configure your block you will be able to select a particular style using a check-box. The styles are preset so theres nothing more to do. The block will be automagically restyled in the front end site.
Preset design options allow you to have radically different block designs and apply them where and when you like...
This simple explanation hides the massive scope and extensibility of this ideaâ€”you can have radically different block designs and apply them where and when you like.
And its not just for blocksâ€”node types, comments and even Views can be styled this way.
Not all Premium Drupal themes can do this and only very high end Premium themes will offer configurable style options because of the additional work to needed to support this feature. While these *super premium themes* normally cost a little more than your average Drupal template the cost to benefit ratio is well worth it, especially when you consider custom coding would cost a lot more.
While many of these can be enabled using free Drupal modules most are not well styled, and require theme and design work to make them beautiful or indeed even usable in a professional website.
* Slideshows for home-pages and other promotional pages.
* Animated drop menus.
* Animated slider and/or accordion menus.
* Pop over modal boxes (for login or comments).
* AJAX submit for comments and contact forms.
* Advanced image galleries and gallery widgets.
* Collapsible blocks or other expand/collapse features.
* Scroll boxes.
* and many many more...
While some free themes have such features the additional work to include and design for them means they are much more commonly found in professional Drupal themes.
One more thing - Admin themes
Our professional themes all come with a built in administration theme that styles the admin pages and the node add/edit pages. This helps separate the *front-end* from the *back-end* more logically to ensure the front-end theme does not interfere with administrative operations.
You can turn the admin theme off in the theme settings if you prefer, and you can choose whether or not to use it for node add/edit pages also.
While Drupal core supports the use of a dedicated admin theme, it requires you to install and maintain a second theme.
Its also easy to brand the admin theme for clients so they not only have a beautiful front-end theme, but a fully branded, highly usable back-end theme to boot.
Next week I'm going to dive right into the code of our base theme and discuss the developer features we have incorporated to make building commercial premium Drupal themes a whole lot more enjoyable.
Last updated 13th May, 2010 - 5:42am