Drupal Theme Generator Version 2 - Features and Instructions

A newer version is now available. Please go here

Table of Contents

  • Drupal Theme Generator Source Code
  • Features
  • System Requirements
  • How the Program Basically Works
  • Why Develop this Program?
  • Development Platform
  • Differences in Excel versions
  • Firefox and other Non Internet Explorer browsers
  • Included Sample Themes
  • Contents of each theme folder
  • Cell Reference Colors
  • Cell Comments
  • Instructions
  • Notes
  • Sheet Usage
  • Uploading the New themes to your Web Server
  • 3 Simple Steps to Creating a New Theme
  • User Interface screen shots

Drupal Theme Generator Source Code
The source code file contains the source code for the Drupal Theme Generator. It is the same Excel (xls) file as above without the sheet protection and with all sheets visible. I am releasing the source code in the hopes that someone in the Drupal Community may be interested in building upon the Drupal Theme Generator and rereleasing it to the Drupal Community. You can Download the Drupal Theme Generator Source Code Excel file here >> Drupal Theme Generator Source Code

Features

  • Generate an unlimited amount of site themes for Drupal CMS type websites
  • Easily create both PHPtemplate and Xtemplate Themes in minutes
  • Supports both flat (non-graphical) and graphic enhanced themes
  • Includes META tag support
  • Preview your themes on you local computer without having to upload the themes to your Drupal site
  • Includes an HTML Color assistant
  • Includes 7 graphically enhanced 3D website themes
  • Includes a theme development test area
  • Easy to use spreadsheet interface

System Requirements

  • Microsoft Excel 2000, 2002, or 2003 with Visual Basic for Applications (VBA) support
  • Any Internet web browser

How the Program Basically Works
This program was developed using both the Bluemarine PHPtemplate and Xtemplate themes as the master templates. Therefore, your new themes are based on these models. The design parameters you change basically modify the code in these templates to create new themes.

Why Develop this Program?
I have been using Drupal since May 2005 and noticed that there is a short supply of themes available for users. Also, since this time there are very few new themes introduced. It takes quite a bit of time to develop a single new theme, therefore I can understand why. For these reasons, I decided to write a program in Microsoft Excel that generates both the PHPtemplate and Xtemplate Themes based on user design inputs.

Development Platform
This program was developed under Windows XP Professional SP2. It was written in Excel 2000 and tested Windows Internet Explorer 6.0. Firefox users should refer to the notes below.

Differences in Excel versions
This program was written in Excel 2000. Since Microsoft is always changing the functionality of Excel with different released versions, functionality of this Drupal Theme Generator program may vary depending on what version of Excel you are using. The sheet(s) within the program are supposed to be protected so that the integrity of the program stays intact. The program was designed to function properly with the sheet protection. If you experience any "functionality" type issues, then please let me know so that I can make compatibility changes for all versions of Excel.

Firefox and other Non Internet Explorer browsers
To correctly display a "Graphic type" theme as intend in all web browsers, use top and bottom border images of the same pixel height.

The seven (7) "Graphic type" sample themes included with this program may not appear correctly if displayed in non Internet Explorer web browsers. These themes were designed using the Internet Explorer (IE) browser as testing platform. Part of the common theme look was to provide a small gap spacing between multiple blocks when finally displayed in a web browser. This small gap spacing is located between the different menu blocks, as shown in the seven theme screen shot images below.

Internet Explorer displays the blocks correctly as intended, but Firefox for example does not. Firefox causes a visual shift of the images used in the bottom row of the block's border as shown in the diagram below.

Neglecting the center images used in the block, these sample themes use two different image heights. The top row is composed of 3 images all of which are 18 pixel in height. The bottom row is composed of 3 images with each having a height of 10 pixels. The intent of using the smaller 10 pixel images in the bottom row of the block table was to provide a small gap spacing between multiple blocks when finally displayed in a web browser.

Use top and bottom border images of the same pixel height
If you are going to use Graphical themes, then both the top and bottom border images must be the same height. This is so that your themes will appear correctly in all web browsers. The image list below indicates which images need to be of the same height. These images are marked with an asterisk (*).

Using an image editing program, you can modify these bottom row images from the current 10 pixel height to an 18 pixel height so that these seven sample themes display correctly in all web browsers.

Included Sample Themes:

  • 3dblue
  • 3dbluewt
  • 3dolive
  • 3dolivewt
  • 3dpeach
  • 3dpeachwt
  • bluemarine2

Included Sample Themes
Create multiple themes in minutes !

3dblue

3dolive

3dpeach

bluemarine2

 

3dbluewt

3dolivewt

3dpeachwt

 

  Click on the images to view in actual size

Contents of each theme folder:
Both the top and bottom border Images marked with an asterisk (*) must all be the same height in pixels if the themes are to display properly in Firefox or other non Internet Explorer Browsers.

The sample theme images supplied with this program were designed using in Internet Explorer and therefore are not the same height. The top images are 18 pixels in height and the bottom images are 10 pixels in height. These border images need to be modified for use in Firefox or other non Internet Explorer Browsers.

    Theme Image files:

      b-bottom-center.png *
      b-bottom-left.png *
      b-bottom-right.png *
      b-left-center.png
      b-right-center.png
      b-top-center.png *
      b-top-left.png *
      b-top-right.png *
      s-bottom-center.png *
      s-bottom-left.png *
      s-bottom-right.png *
      s-left-center.png
      s-right-center.png
      s-top-center.png *
      s-top-left.png *
      s-top-right.png *
      null.gif
      logo.png

    PHPtemplate and Xtemplate Theme files:

      block.tpl.php
      box.tpl.php
      comment.tpl.php
      node.tpl.php
      page.tpl.php
      style.css
      xtemplate.xtmpl

    Other Image files:

      full-screenshot.png
      screenshot.png *
       

* The screenshot.png file is a thumbnail sized, 150 x 90 pixel image, used as an image preview of the theme in your Drupal Theme selection list on your website's Home » administer » themes page. You create this image file by taking a screen shot of your theme presented in your web browser and resizing it to 150 x 90 pixels. The thumbnail images above of the sample themes included with the program are 150 x 90 pixel sized screen shot images. This screenshot.png image file should also be uploaded to your website with all the other theme files.

Note: If you choose the graphically enhanced theme format, you can simply modify the images to get an entirely new look. If you choose use the flat (non-graphical) theme format, the images are not utilized at all.

Cell Reference Colors
• Red font colored cell are user cells. Enter your data into these cells only.
• Blue and Magenta font colored cells contain formula. Do not edit these cells.
• Black and other font colored cells are description labels.

Cell Comments (Popup Instructions)
The cell comments should explain everything and include instructions on how to use the program. You should be able to view them by hovering your mouse over the cells that have a red colored triangle in the top right corner. These comments will appear as popup comic book type comments in yellow colored boxes.

Instructions
(1)  Enter your initial design variables into the red font colored cells on the Settings sheet.
(2)  Design your themes using the utilities on the Design sheet.
(3)  Upload the newly created theme file(s) to your web server.

Further instructions are available via the cell comments.

Notes
The light and dark gray shaded regions on both the Design and Database sheets represent like colors used in the Graphic type themes (if the check boxes are checked). This like color method was used in the sample themes provided with this program. You can however change the colors to any combination you desire.

The "path reference" to the image are saved in the outputted theme files. Therefore, do not share the PHPtemplate and Xtemplate files between theme folders. Use this utility to create theme files for each individual theme. Please use lower case names for all your themes.

Sheet Usage

    Instructions sheet
    This is a static sheet for displaying instructions on how to use the program.

    Settings sheet
    User Interface sheet that contains the initial setup parameters for the program.

    Design sheet
    User Interface sheet for design of the themes

    Database sheet
    Storage area containing the full list of properties for each themes. The theme name is associated with the theme file folder.

    style.css sheet
    This is the Cascading Style Sheet (CSS) code used by both the PHPtemplate and Xtemplate themes. This code is outputted as the style.css file.

Uploading the New themes to your Web Server
This program generates both PHPtemplate and Xtemplate theme files and places them both in the active named theme folder. To utilize a particular theme format upload the following files. In either case, you will also have to upload all the theme's image files.

To utilize the Xtemplate theme, upload the following files:

  • xtemplate.xtmpl
  • style.css

To utilize the PHPtemplate theme, upload the following files:

  • block.tpl.php
  • box.tpl.php
  • comment.tpl.php
  • node.tpl.php
  • page.tpl.php
  • style.css

3 Simple Steps to Creating a New Theme

    • Enter values into the Red colored text cells (blue colored are calculated values)
    • Select a theme from the drop down scroll box
    • Press a "Create" button to output your theme files.

User Interface screen shots

(1) Settings sheet - Initial Setup

(2) Design sheet - User Interface for Designing your Themes

(3) Database sheet - Storage Location for all your theme designs

(4) Theme Design Reference Map (numbers 1 to 39 are referenced in the table above)

(5) Graphic Image Border Layout Illustration

I hope you enjoy this Drupal Theme Design utility. If you do, I would like to know.

Thanks,

Sam Raheb
http://xlecom.com

This software or the themes produced with this software are not to be sold without written permission of the developer, Sam Raheb.