Drupal Theme Generator Version 3 - Features and Instructions

A newer version is now available. Please go here

Table of Contents

  • Features
  • System Requirements
  • How the Program Basically Works
  • Why Develop this Program?
  • Development Platform
  • Differences in Excel versions
  • Drupal Theme Generator Source Code
  • Included Sample Themes
  • Contents of each theme folder
  • Definitions and Programming Conventions
  • Developer, View-All, and User Modes
  • Spreadsheet Cell Reference Colors
  • How to view the cell formulas independent of their calculated values
  • Cell Comments
  • Brief Instructions
  • Notes
  • Sheet Usage
  • Sheet Protection
  • Sheet Descriptions
  • Cell Drop Down HTML Color Selection List Boxes
  • Uploading the New themes to your Web Server
  • 3 Simple Steps to Creating a New Theme
  • Primary Button Functions
  • Editing the Theme and Preview Code sheets
  • User Interface screen shots
  • Software License Agreement

Drupal Theme Generator including (with Source Code)
T
he source code is include in the hopes that someone in the Drupal Community may be interested in building upon the Drupal Theme Generator and re-releasing it to the Drupal Community.

Features

  • Completely Revised - with many more 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 3 modes - Developer, View-All, and User Modes
  • Preview your themes on you local computer without having to upload the themes to your Drupal site
  • Includes optional Dynamic Drop-down menus support
  • Include optional META tags support
  • Includes support for adding your own custom programming code.
  • Integrate additional CSS, JavaScript, PHP, and HTML code in to the themes via an external file or hard coded format
  • Includes both regional and block border-image and background-image features
  • Includes a Random color theme generator
  • Include a HTML Color assistant
  • Change both vertical and horizontal alignment of theme elements
  • Includes 9 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, tested in Excel 2000 & 2003, and in Windows Internet Explorer 6.0 and Firefox 1.0.7.

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.

Drupal Theme Generator Source Code
Most programs typically output results that are static. In the case of the Drupal Theme Generator program, the program outputs actual programming code to be used by other computers. Thus can be said the output is static but is used in a dynamic environment.

The program primarily functions by taking user input and running it through a series of IF-THEN formulas placed in strategic "line code" locations on multiple spreadsheets. The calculated result is a custom set of HTML, php, and CSS code blocks, which are then outputted as individual theme files to your local computer. These theme files are then uploaded to a web server and interpreted by the site's' theme engine to render the final theme to your web browser.

If you are familiar with writing formulas in Microsoft Excel, then this endeavor may be right for you. Keep in mind that all work performed on this program must be open source and publicly available.

Included 9 Sample Themes:

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

Included Sample Themes
Create multiple themes in minutes !

test

3dblue

3dolive

3dpeach

bluemarine2

 

3daframe

3dbluewt

3dolivewt

3dpeachwt

 

  Click on the images to view in actual size

Contents of each theme folder:
Theme Image files:

bottom.gif

body-top-left.png

header-left-center.png

sidebar-bottom-center.png

left.gif

body-top-right.png

header-right-center.png

sidebar-bottom-left.png

null.gif

footer-bottom-center.png

header-top-center.png

sidebar-bottom-right.png

right.gif

footer-bottom-left.png

header-top-left.png

sidebar-left-center.png

right-transparent.gif

footer-bottom-right.png

header-top-right.png

sidebar-right-center.png

top.gif

footer-left-center.png

mission-bottom-center.png

sidebar-top-center.png

logo.png

footer-right-center.png

mission-bottom-left.png

sidebar-top-left.png

body-bottom-center.png

footer-top-center.png

mission-bottom-right.png

sidebar-top-right.png

body-bottom-left.png

footer-top-left.png

mission-left-center.png

xtemplate.xtmpl

body-bottom-right.png

footer-top-right.png

mission-right-center.png

body-left-center.png

header-bottom-center.png

mission-top-center.png

body-right-center.png

header-bottom-left.png

mission-top-left.png

body-top-center.png

header-bottom-right.png

mission-top-right.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.

Definitions and Programming Conventions
All sheets within this source code version of the program are visible and unprotected for editting. Therefore, before you start editing this program, make sure you understand the functionality of the program.

Developer, View-All, and User Modes
You can change modes by clicking on the radio option buttons located at the top of the sheets.

  • Developer Mode - A developer is defined as one who is granted access to modify the code within this program. In the Developer Mode, all sheets are viewable and unprotected.
  • View-All Mode - This mode is similar to the Developer Mode in which all sheets will be visible, but certain ones will still remain protected.
  • User Mode - A user is defined as a typical end user of the product. A User is not a programmer who needs access to all the sheets to modify the program. The specifically designed User Interface sheets are visible to the user but the rest of the sheets remain hidden and protected. The sheets identified below as "hidden from user" are not meant to edited by the typical end user of the product. This is the User Mode

Spreadsheet Cell Reference Colors

  • Red font colored cell are user input cells. Enter your data into these cells.
  • Blue colored cells contain formulas. Editing of these cells should be performed by developers who want to modify the design of the theme templates themselves, therefore creating a whole different look than that of the original design.
  • Magenta colored cells are linked to and controlled by object items such as the scroll boxes and check boxes. These cells must remain intact as is.
  • Black and other font colored cells are description labels.

How to view the cell formulas independent of their calculated values
Most of the formulas in the cells are IF-THEN conditional formulas. In most cases, if the value of the condition is false, then the result will be a blank value represented by double quotes "". Cells which are evaluated as "" cannot be visually seen on the spreadsheet. To toggle a view the cell formulas in all of the cells on a spreadsheet, independent of their calculated values, hold down the use the Ctrl key and press the ` key. The ` key is to the left of the #1 key.

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.

Brief 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

    DHTML-Menus sheet
    User interface for designing optional Dynamic Drop-Down Menus

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

Sheet Protection
Some of the sheets are protected to prevent accidental editing. To edit a protected sheet, just unprotect it. Remember to re-protected it when you are finished editing.

Sheet Descriptions

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

    Settings sheet (visible to user)
    User Interface sheet that contains the initial setup parameters for the program.

    Design sheet (visible to user)
    User Interface sheet for design of the themes.

    DHTML-Menus sheet (visible to user)
    User Interface sheet for design of the Dynamic HTML drop-down menus.

    Paths sheet (hidden from user)
    Contains the calculated file paths used by the VBA macros to output the both the preview, HTML colors, and theme files. This sheet also contains the values for all the check boxes and drop-down scroll boxes used on the other sheets.

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

    preview.html sheet (hidden from user)
    This sheet is used to provide an HTML preview of the themes using the data entered in by the user on the Design sheet. The resulting IF-THEN conditional formulas are outputted as HTML code to the preview.html file to be displayed in a web browser.

    phptemplate sheet (hidden from user)
    Contains the php code for the five (5) PHPtemplate theme files. The resulting IF-THEN conditional formulas are outputted as php files.
      • block.tpl.php
      • box.tpl.php
      • comment.tpl.php
      • node.tpl.php
      • page.tpl.php

    xtemplate.xtmpl sheet (hidden from user)
    Contains the code for the Xtemplate theme file. The resulting IF-THEN conditional formulas are outputted as the xtemplate.xtmpl file.

    style.css sheet (hidden to user)
    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.

    menu.js sheet (hidden from user)
    This is the JavaScript code for the Dynamic HTML drop-down menus. This code is outputted as the menu.js file.

    Colors sheet (hidden from user)
    This sheet contains the HTML color codes used in the cell drop-down scroll lists appearing on the Design sheet

    html-colors.html sheet (hidden from user)
    This sheet contains the HTML code for previewing the color. This code is outputted as the html-colors.html file.

Cell Drop Down HTML Color Selection List Boxes
All HTML color selection cells in this program function in the same manner described below.

You can either manually enter in a 7-character color hex code, (i.e. #123456), or select a color code from the cell's drop down scroll box. If you select a color from the cell's drop down scroll box, (i.e. 376. Seashell - #FFF5EE), you do not have to remove the color's name prefix, (i.e. 376. Seashell - ), from the line of code. This program automatically uses the last 7-characters in the cell as the color's hex code.

The samples themes included with this program had their color's name prefixes removed. This was not required, but it was done only to obtain a better visual appearence.

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.

Primary Button Functions
Preview Theme
This function will create a preview.html file and open it in your web browser. Use this preview function to preview the look of the website theme using the current Design Values. This program will generate a temporary style.css and optional menu.js file for use in the Theme Previews. The temporary preview.html, style.css, and menu.js files reside in the "Preview" folder.

Note: It is recommended that you use Internet Explorer to preview the themes. Due to security issues in the FireFox web browser, you may not be able to view the theme border images on your local computer.

View Parameters
When you press the "View Parameters" button on the Design sheet, this program will open the theme_parameters_map.html file in your web browser. Use this preview function to visually see the Theme Parameter Map markers that define the regions and parameters of the web page design.

Random Colors
For some creative fun, you can have the program automatically generate random HTML colors for the active theme. The random colors generated will range between 0 and 16,777,215 in hexadecimal format. This function requires Excel's Analysis ToolPak. To load the Analysis ToolPak, use Excel's Tools >> Add-Ins menu command.

When you press the "Random Colors" button, the program will replace all the "Design Values" color values including the Dynamic Drop-Down menu color values with randomly generated HTML colors and then display the results in your internet browser.

Note: for best visual results, it is recommended that you first to turn off (uncheck) the Graphic Borders.

Before you use the random color generator, make sure you first save your "Design Values" to the Database if you want to retain your current settings. If you have not made any changes since you last pressed the "Send to >>" button, then you can restore the previous values by pressing the "Send to >>" button.

HTML Color Chart
This function will create a html-colors.html file and open it in your web browser. Use this color chart function to view the design colors you selected and their associated HEX codes. This html-colors.html file resides in the Preview folder.

Create style.css
This function will create a style.css file with the properties of the "Design Values" and place it in the active theme folder.

Create menu.js
This function will create a menu.js file containing the properties of the optional "Drop-Down Dynamic HTML Menus" and place it in the active theme folder.

Create PHPtemplate Theme
This function will create the following PHPtemplate & style.css files, and the optional menu.js file, and place them in the active theme folder: block.tpl.php, box.tpl.php, comment.tpl.php, node.tpl.php, and page.tpl.php.

Create Xtemplate Theme
This function will create the xtemplate.xtmpl & style.css files, and the optional menu.js file, and place them in the active theme folder.

Save Theme to Database
This function will transfer the "Design Values" to the Database sheet. These values will be transferred to the Database under the active named theme. Remember to save this Excel file to permanently retain your work.

Editing the Theme and Preview Code sheets
Each code section that will eventually be  outputted as individual files begin and end with a yellow color patterned cell. These two cells represent the beginning and end points of code sections. You can edit, delete, or add to any of the code or formulas cells between these two yellow color patterned cells. When a user presses the buttons on the Design sheet, the VBA macros output the values of the cells between the beginning and end points to files on your computer's hard drive.

Note:
Some of the code sections contain a credit comment in the second line of the code. This comment cell is identified by a  magenta colored font . Do not move, edit, or delete the contents of these particular cells because the macros will overwrite the contents of these cells during the output of the files.

VBA Macros
The VBA macros contained in this program both control the functionality of the program and output calculated cell values to files on your computer. The file paths and names of these files are defined on the Paths sheet. There is no need to edit the VBA macros for functionality of the program. If you need to write additional macros, then simply write them within another workbook and call them via a button placed on any sheet within this workbook. General access to the VBA macros in this workbook / program was not granted. For permission to access the program macros, contact the developer, Sam Raheb.

Defined Names
Below is a list of the defined names use in this program.

List of initially Defined Names used in the program

 

All_Design_Values

=Design!$E$24:$E$110

Apply_Dynamic_Menus

=Paths!$J$4

Design_Values

=Design!$E$24:$E$73

Design_Values_Logo_and_Background_Image_Properties

=Design!$E$12:$E$16

Design_Values_Selections

=Paths!$J$3:$J$20

Developer_or_User_Mode_Choice

=Paths!$F$3

Drop_down_menu_design_color_values_part_2

='DHTML-Menus'!$H$3:$H$5

Drop_down_menu_design_values_part_1

='DHTML-Menus'!$D$3:$D$9

Drop_down_menu_design_values_part_2

='DHTML-Menus'!$H$3:$H$9

Drop_down_menu_theme_values_part_1

=Design!$D$74:$D$80

Drop_down_menu_theme_values_part_2

=Design!$D$81:$D$87

First_Design_Color_in_List

=Design!$E$29

Path_to_block_tpl_php_file

=Paths!$C$16

Path_to_box_tpl_php_file

=Paths!$C$18

Path_to_comment_tpl_php_file

=Paths!$C$17

Path_to_html_colors_html_file

=Paths!$C$12

Path_to_HTML_Theme_Parameters_Map_file

=Paths!$C$11

Path_to_menu.js_File

=Paths!$C$21

Path_to_menu_js_preview_file

=Paths!$C$9

Path_to_node_tpl_php_file

=Paths!$C$15

Path_to_page_tpl_php_file

=Paths!$C$14

Path_to_preview_html_file

=Paths!$C$10

Path_to_style_preview_file

=Paths!$C$8

Path_to_style_theme_file

=Paths!$C$20

Path_to_xtemplate_theme_file

=Paths!$C$19

Random_Dynamic_Drop_Down_Menus_Colors_Part_1

=Paths!$N$43:$N$49

Random_Dynamic_Drop_Down_Menus_Colors_Part_2

=Paths!$N$50:$N$52

Random_General_Page_Colors

=Paths!$N$4:$N$41

Range_HTML_color_code_code

=OFFSET('html-colors.html'!$B$2,1,0):'html-colors.html'!$B$1605

Range_HTML_Colors

=Colors!$D$3:$D$440

Range_menu_js_code

=OFFSET(menu.js!$B$2,1,0):menu.js!$B$263

Range_php_block.tpl.php_code

=OFFSET(phptemplate!$B$195,1,0):phptemplate!$B$229

Range_php_box.tpl.php_code

=OFFSET(phptemplate!$B$243,1,0):phptemplate!$B$248

Range_php_comment.tpl.php_code

=OFFSET(phptemplate!$B$231,1,0):phptemplate!$B$241

Range_php_node.tpl.php_code

=OFFSET(phptemplate!$B$182,1,0):phptemplate!$B$193

Range_php_page.tpl.php_code

=OFFSET(phptemplate!$B$2,1,0):phptemplate!$B$180

Range_preview_code

=OFFSET(preview.html!$B$2,1,0):preview.html!$B$607

Range_style_code

=OFFSET(style.css!$B$2,1,0):style.css!$B$583

Range_xtemplate_code

=OFFSET(xtemplate.xtmpl!$B$2,1,0):xtemplate.xtmpl!$B$286

Scroll_Box_Items__Head__section

=Paths!$F$6:$F$9

Scroll_Box_Items_Horizontal_Alignment

=Paths!$F$28:$F$31

Scroll_Box_Items_Vertical_Alignment

=Paths!$F$34:$F$36

Theme_Values

=Design!$D$24:$D$73

Theme_Values_Logo_and_Background_Image_Properties

=Design!$D$106:$D$110

Theme_Values_Selections

=Paths!$I$3:$I$20

Themes

=OFFSET(Database!$C$2,0,1):OFFSET(Database!$C$2,0,Design!$D$5)

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 49 are referenced in the table above)

(5) DHTML-Menus sheet - User Interface sheet for design of the Dynamic HTML drop-down menus

Software License Agreement
Distribution
This Drupal Theme Generator software is not to be sold as is or in a modified condition to any other party without permission of the developer, Sam Raheb. The term party includes individuals, groups, businesses, organizations, and educational institutions.

Software License
This is a legally binding agreement between you and Sam Raheb. By installing and / or using this software, you are agreeing to become bound by the terms of this agreement. If you do not agree to the terms of this agreement, do not use this software.

Grant of License
Sam Raheb grants to you a non-exclusive right to use this software program (hereinafter the "Software") in accordance with the terms contained in this Agreement.

Upgrades
If you acquired this Software as an upgrade of a previous version, this Agreement replaces and supersedes any prior Agreements.

Ownership of Software
Sam Raheb retains the copyright, title and ownership of the Software and the written materials.

Copies
You may make copies of the Software. You must reproduce and include the copyright notice and developers name, Sam Raheb on all copies.

Disclaimer of Warranties
Sam Raheb does not offer and disclaims all types of warranties, express or implied, including, but not limited to, any implied warranties of merchantability, fitness for a particular purpose and no infringement. Sam Raheb shall not be liable for any direct, indirect, consequential, exemplary, punitive or incidental damages arising from any cause even if Sam Raheb has been advised of the possibility of such damages.

Export Laws
You agree that you will not export the Software or documentation except in compliance with the laws and regulations of the United States.

US Government Restricted Rights
The Software and any accompanying materials are provided with Restricted Rights. Use, duplication or disclosure by the Government is subject to restrictions as set forth in subparagraph (c)(1)(ii) of The Rights in Technical Data and Computer Software clause at DFARS 252.227-7013, or subparagraphs (c)(1) and (2) of the Commercial Computer Software - Restricted Rights at 48 CFR 52.227-19, as applicable. Contractor / manufacturer is Sam Raheb.

Acknowledgments
Microsoft, Windows, Windows NT, Excel are either trademarks or registered trademarks of Microsoft Corporation in the United States and / or other countries. Microsoft Corporation's web site: http://www.microsoft.com

©2005 Sam Raheb. All rights reserved. All other trademarks and registered trademarks are the sole property of their respective owners.

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.