Artisteer for Creating Drupal Themes

Synopsis: For the longest time, the developers and owners of Drupal-based websites have had limited options for obtaining a Drupal theme, especially one not already in use for other websites. Artisteer is desktop software that aims to solve that problem, by allowing designers and non-designers alike to quickly and easily create attractive Drupal themes, using a point-and-click interface. This in-depth article discusses the problem being solved, the Artisteer software in general, the specifics of how to use it, and the results produced — all from a Drupal perspective.

If you want to obtain a theme for a Drupal-based website, there are essentially five possible strategies:

• Template vendors offer for sale commercially-built Drupal themes. But such themes have most likely already been purchased for other sites, so your site could end up looking like others. Furthermore, the number of such copycat sites will only increase unless you pay the premium price to block further sales of that particular theme.
• A professional designer could be hired to create a custom theme. But cost-conscious clients are oftentimes not willing to pay extra for those services or even the cost of a pre-built theme.
• If you have the web design and Drupal theming skills, you could create a stand-alone theme from scratch. But this can involve a substantial investment of time and effort — defining the theme's regions, creating the .info and CSS files (including style overrides for Internet Explorer), and possibly also making custom templates, a favicon, and a screenshot image.
• Similarly, you could use one of the many starter themes as a base theme. But this would require you to perform much of the work anyway, proportional to how unique and elaborate you wanted the theme to be.
• If you have no available time or budget, you could use an existing free theme, such as those hosted on Drupal.org. But these are rarely suitable for client websites, and any customization is similar to using a starter theme.

In essence, the more that you want the theme to be unique to your site and tailored to its content, the more time and/or money must be invested in its creation, with no guarantees as to how it will turn out — except in the case of an existing theme that does not need to be modified, which is rarely the case.

Yet there is now an additional strategy that may be ideal for many situations. Artisteer, the "Automated Web Designer", is desktop software that allows you to craft a website design, and then export it as a working theme for the leading CMSs, including Drupal.

It is built and marketed by Extensoft, a software company apparently headquartered in Seattle, Washington, with its Artisteer team located in Henderson, Nevada.

Features and Requirements

According to its website, Artisteer is "the first and only Web design automation product that instantly creates fantastic looking, unique website templates and blog themes." Aside from the hyperbole of so-called instant results, just the prospect of being able to easily create unique website themes is enticing — particularly to web developers who dread trying to create an original theme, knowing that they lack either the required CSS skills or the artistic talent.

To quickly get an idea as to the capabilities of Artisteer, you can view the demo video, which demonstrates how to create a new design project, request random suggested designs, use any of the provided samples, and customize your new theme's page colors, page layout, header options, stock images, and text styling. The demo may lack a voice-over, but it does provide a brief overview of the product.

The Artisteer website also offers screenshots of various controls and site templates, as well as a datasheet — all of which suggest that the software offers many additional features: a dynamic site preview, WYSIWYG editing, management of multiple projects, prebuilt color schemes, numerous available page layouts, menu styling, and image editing (namely, slicing and modifying images without any external graphics programs).

The latest version of Artisteer is 3.1, which introduced such capabilities as typography editing, embedded video, content layouts for articles, two-colored textures for page backgrounds, and color palettes based on a user-provided image. Future versions will presumably debut more features. Anyone interested in receiving product announcements can subscribe to the company's free email newsletter, or follow them on Twitter (@ArtisteerTeam).

The software runs on Windows 2000, XP, and Vista. It is also available for Mac OS X 10.5 and 10.6 — as a release candidate, because the product stability has not been confirmed (they are apparently using Mono for the Mac version). It requires the Microsoft.NET Framework, and is claimed to work fine with 1 gigabyte of RAM and 100 megabytes of free disk space. The user interface supports 16 human languages (English, Arabic, Chinese, Czech, Danish, Dutch, French, German, Hungarian, Italian, Japanese, Portuguese, Polish, Russian, Spanish, and Swedish), but Czech and Hungarian are not listed during the installation process.

The "Home & Academic" edition, costing $49.95, provides you with most of the design capabilities (including design suggestions, textures, gradients, and glares), over 50 color and font schemes, free product upgrades for 12 months, and the ability to export any theme you create as plain HTML (specifically, XHTML + CSS), a WordPress theme, or a Blogger template. The "Standard" edition has all of the above features, and also provides more textures, gradients, and glares; more color and font schemes; dialogs for customizing CSS settings; and the ability to export any theme in a format suitable for Drupal, Joomla, DotNetNuke, ASP.NET, or CodeCharge Studio.

Getting Started

While online demos and marketing copy may give one a decent sense of an application, the only way to completely test it is to install and run it. Fortunately, you can try Artisteer without any financial commitment, using their trial version — which allows you to run both editions, and thus see its capabilities for Drupal.

The installation process should go smoothly, and not take much time, but only if you already have Microsoft.NET Framework present. The Artisteer installer file is roughly 104 megabytes, and the fully installed software consumes about 164 megabytes on disk. Upon start-up, the program tries to connect to artisteer.com; however, it works fine even if such requests are denied (manually or automatically by your firewall).

The trial version of Artisteer begins with a dialog that prompts you to start running either of the two versions, or purchase or activate the software, or quit the program.

By default, the program initially displays a start-up dialog from which you can choose the type of a new project as a foundation upon which to build your own design. You can start with a static HTML website, or one of 14 built-in samples (from three categories: "Personal and Professional", "Business", and "Community"), or one of 145 online samples (grouped into 24 categories, from "Art and Entertainment" to "Travel"), or one of seven frameworks, including Drupal. The online samples are generally attractive, and are listed on the "Free Website Templates" page.

Choosing a new Drupal project from scratch results in a start-up window somewhat different from the generic one that is displayed if you dismiss the previous dialog without choosing a new project type.

The largest region in the Artisteer user interface, the "preview area", shows the current state of the design, using generic content in cases where none has been entered by the user or if the design is targeted toward a CMS — in which case content is added later, into the CMS's database. Above the preview area are the command bars.

The customizable Quick Access command bar contains a File menu, which allows you to: start, manage, and export projects; modify the program preferences; preview the current state of your project in any installed web browser; and activate the product with license and activation keys. It also has buttons for undoing and redoing the most recent action(s). An exported project can be saved as a ZIP file or as a folder containing multiple HTML or theme files, with the option of including the Artisteer project definition file, which has a ".artx" extension.

In File > Preferences, you can modify the human language used for the interface, and toggle the Quick Start dialog, auto-preview feature, and preview highlights. With auto-preview enabled, the preview area is automatically updated with whatever option you happen to hover your mouse pointer over for just a moment. This can be annoying when it changes your design even though you had no intention of choosing that option; even worse is when you do not notice the change taking place. With preview highlights enabled, each region in the preview area is automatically outlined with a yellow border when you hover your mouse pointer over it.

Design Controls

The ribbon itself contains a dozen tabs, each of which groups commands for some of the major aspects of a web design: colors, fonts, page layout, content, background, sheet, header, footer, menus, blocks, and buttons. Some of these can be automatically set using controls in the first and default tab, "Ideas", seen in the figure above. Repeatedly clicking one of the nine buttons will prompt Artisteer to change that particular value — whether the page colors, the fonts, or any of the others — as it cycles through the available options. For instance, each time you click "Suggest Header", the preview area changes to display a new permutation of the elements of the header (the background and foreground images, the site headline and slogan font colors and location, etc.).

While this approach may be the most efficient for generating a unique theme (one probably never seen before), most of the possible combinations are not especially attractive; for instance, the colors of the header images often clash with those of the sidebar and the main content region. You can influence the suggestions by disabling any of the 12 styles, using the "Styles" menu.

A more direct approach to defining the look of a theme under development, is to use the controls in the other 11 tabs. Some themers like to start a new design by selecting the colors of any backgrounds, borders, and text, as well as making other typographical choices. This can be done using the second tab.

Naturally, you can set all the colors of your design individually. But it is faster and more convenient to use one of the 164 color themes, which are organized into nine categories. You can have Artisteer derive a color palette from an image — which, for instance, could be valuable for exactly matching a header image mandated by the client. Similarly, ten built-in font sets are available.

You can set the layout of your theme to any one of 25 configurations, with various options for the relative positions of the header, the content, and the primary menu, but not the footer. These options can be set individually, as can the margin for the footer. The overall wrapping div ("the sheet") can be set to a layout of fixed or fluid, and its margin and padding can be chosen from numerous preset values, or entered manually. The margins and padding for the main content area can be set. All of the dimensions for all of these elements, are specified using pixels and percentages, but not ems, rems, or other units. The sheet can be organized into one, two, or three columns, with customizable widths. The columns can be unstyled, or have a single color for the background, with optional transparency and one of 156 different background designs ("glares"), including circles, cloud formations, and other shapes.

As the name suggests, the Content tab allows you to customize a variety of aspects of all nodes in the main content region: the headings, text, links, images (including what appears to be a primary image for the first node), tables, pull-quotes, margins, line and character spacing, bullets, text justification, and node headers and footers. In fact, these controls are likely the ones most heavily used when crafting a new theme.

The Background tab has controls for setting the sheet to a solid color, with or without some sort of gradient (from 23 options, some of which allow a second color to be added) and/or texture (from a plethora of patterns, as well as some abstract images). You can also add an additional pattern (a "light effect") at the top of the sheet; all of the aforesaid "glares" seem to be included in this extensive list.

You can set the width, margins, padding, corners, drop shadows, and borders of the page wrapper, using the Sheet tab. It also has controls for specifying a fill color and a transparency for the regions within the sheet.

The layouts and positions of the header and footer are modifiable using the Layout tab mentioned earlier, but the Header and Footer tabs allow for more fine-grained control of the content within these areas — including individual styling of all properties of the text, independent of similar styling for the main content area. You can also set fill colors, textures, and gradients, similar to that of the theme's sheet. Each of the two regions have unique properties; for instance, the header can include a stock photo or Flash-style motion within its background pattern, while only the footer has easy inclusion of an RSS feed icon. Unfortunately, the height of the header apparently cannot be set through the user interface; as a result, tall header images are vertically centered within the header region, with the top and bottom portions chopped off.

Consistent menu styling can be one of the most challenging steps in crafting a theme for a website. In the Menu and Vertical Menu tabs, Artisteer provides the themer with a remarkably wide range of options for styling parent and child menus, and the items within them: fill color, border, text properties, width, margin, tab shapes, alignment, and separators for horizontal menu items. You can specify different styles and colors for when a menu label is passive, active, or has mouse hover.

In Artisteer terminology, a "block" is equivalent to the same term in Drupal, at least on a visual level. The Blocks tab allows you to choose from 26 different block styles, consisting of different combinations of header and wrapper positions and borders. The text in the header and the block's content area can be given any kind of styling, and you can add an icon to the left of each block title.

The form buttons within those blocks, and within the main content area, can be customized using the Buttons tab. You can set the shape, background texture, gradient, drop-shadow, border, and typography values, as well as the buttons' fill color for a default state, mouse hover, and mouse click.

The only obvious flaw in the user interface is that the Menu tab and Vertical Menu tab should be positioned next to one another, since they are so topically similar — rather than separated by the Blocks tab. Aside from that, the Artisteer UI is quite straightforward and intuitive.

In terms of functionality, the only weakness is the lack of support for allowing the dimensions of page elements to be set using ems or rems.

The Results

Once you have finished creating a theme, and wish to add it to an existing website, you can export it so it will work with Drupal — with the choice of Drupal version 5/6 (the default) or version 7.

Prior to exporting your theme, you can set a number of options, including the direction of the text (left-to-right is the default), a favicon, a CSS prefix (presumably added to all the CSS classes and IDs), and a watermark on every page (which could be valuable in the delivery of a new website for which final payment has not been received).

But if you are still running a trial version of the software, then even though you can go through the export process, no files are saved to disk, and thus you will be unable to see if they would work.

However, you can add any of the 145 online samples to a Drupal installation, and it will work, with no preset watermarks. (Admittedly, none of these sample themes will likely win any design awards, but that is not the fault of the software.) Looking beneath the surface, you can get a thorough idea as to the sort of code that Artisteer would generate for your own themes.

That code is organized into 33 files in the top-level directory of the theme, 20 files in an "images" subdirectory (with some variation among the sample themes), and two files in a "templates" subdirectory. Oddly, most of the template (.tpl.php) files are not in the templates subdirectory, and it is not clear as to why this approach was taken. Also, all of the online sample themes — which have unique and fairly relevant names — are named "Temp" in their code.

A ReadMe.txt file explains how to install Drupal themes, how to add a single navigation menu to the Menu region, and how to customize the Footer region.

An examination of the HTML generated using any of the themes reveals that they use XHTML 1.0 and a CSS-based layout, with relatively lean markup. The documentation states that the code complies with W3C and CSS 2.0/2.1 standards, and will validate. There is no mention in the documentation as to whether any of the generated themes are mobile-ready, but a perusal of the code suggests that none of them are.

In all the theme .info files, there are defined the same 24 regions: Left sidebar, Left vertical menu, Content, Menu, Banner 1, Banner 2, Banner 3, Banner 4, Banner 5, Banner 6, User 1, User 2, User 3, User 4, Extra 1, Extra 2, Copyright, Top 1, Top 2, Top 3, Bottom 1, Bottom 2, Bottom 3, Footer. Presumably, these are standard for all Artisteer-generated themes. Eight of them use what is named "block style"; five of them use "article style"; and the remaining 11 are unstyled.

Some of the online sample themes appear to increase the size of the item labels in the menu generated by the Administration menu module. Far more importantly, some of them in my testing exhibited strange results, and in one case even displayed some HTML markup as text on the web page.

That erroneous display of HTML innards suggests that the markup produced by Artisteer is subpar. When trying one of the sample themes, I encountered several problems: Firstly, the resultant HTML suffered from a terrible case of div-itis, with even the simplest content buried under an incredible 18 layers of divs, for no apparent reason. This increased the amount of time spent when analyzing the code in Firebug. Secondly, the class names — such as "art-hmenu", "art-header", "art-box", "art-box-body", "art-postcontent", "art-post-inner", "art-postheader" — are not entirely clear in their meaning. Thirdly, most of the class names begin with the same prefix, "art-" (although not consistently, e.g., "arttabs_primary"), making them more difficult to read in the HTML and CSS files. Lastly, designs that looked fine when styling a simple home page layout, tended to break down with the use of more complex elements on the page, such as sub-tabs. In my use of this particular theme, I lost a lot of time in fixing quirky positioning problems.

Support

Technical support for Artisteer is available through their support request page and their forums, which appear to be fairly active, and one of which is devoted to Drupal. The documentation section of the Artisteer website has links to a 208-page user manual and a datasheet (for version 2), as downloadable PDF files. Their articles page offers links to several review articles and tutorials, some with videos. The program itself does not have embedded help information, and the Help menu item simply takes one to the documentation page.

In the forums, there are more than 700 posts related to Drupal, most with responses by other users. Unfortunately, many of those responses are simply confirmation that a problem exists, without any apparent resolution by the Artisteer staff or any workarounds. At least for Drupal 7 issues, many of the posts describe an Artisteer-generated theme causing problems not seen with Bartik or any other Drupal theme built in the conventional manner. A worrisome problem is the apparent inability of Drupal developers to get cascading behavior in a vertical menu on mouse hover.

For online Drupal-specific information. consult the documentation page titled "Installing and Using Drupal Theme Created with Artisteer", which has the ReadMe.txt information mentioned earlier.

Licensing

According to the Artisteer license agreement, the product can be used only on a single desktop computer or on a single laptop, or both if the laptop installation is used only for travel (when the license holder is presumably away from the desktop machine).

There are no limits on the use of the software for your own websites and those of your clients. However, in terms of themes created for distribution, you are allowed to resell or redistribute any theme that you create and export, provided that you do not include any of the stock Artisteer foreground photos within the theme's header, because they are licensed only for your own use, and not that of the recipients of your themes. You can include any of the stock background images, as well as any of the other decorative images.

Even though I will not get into the details of it here, there is an additional benefit to using Artisteer for building your themes: Any website built using such a theme can be hosted, at no extra charge, on Artisteer.net.

The Future of Design?

One question that comes to mind, is: Can Artisteer replace the services of a dedicated designer? In terms of quality, it most likely is not a substitute, unless you have solid design skills, as many coders do not. Yet in terms of cost, a full license for this product will in most cases be only a fraction of what you would pay an outside designer. Furthermore, such a designer would provide you with only one theme, instead of the ability to generate an effectively unlimited number of themes.

Earlier I considered the major options for obtaining a Drupal theme. Using Artisteer appears to combine many of the advantages of the aforesaid strategies, and has the potential to significantly reduce the workload of building a custom Drupal theme, with a minimum investment of time or technical knowledge. Saving the hours required to edit CSS code by hand, may alone make it worthwhile. On the other hand, for this software to ever be a popular tool for professional design work, including Drupal theming, the vendor should try to improve the quality of the HTML and CSS generated.