This tutorial focuses on configuring an AutoTheme theme using
the AutoTheme Administration interface in AT-Lite (currently version .7). This
tutorial uses the HTML templates, images and style sheets that were created in
the Tutorial: Theme Creation - Part 2 “Creating Theme Ready Templates from HTML”.
The concepts presented here can be applied to any AutoTheme theme or set of HTML
If you are using the commercial AutoTheme 1.7, then there is
a separate Part 3 tutorial that is specific to that version.
After successfully installing AutoTheme, enter your CMS
Administration area and click on the AutoTheme link or icon. You will then be
prompted to select the theme you wish to modify. After clicking this you will
be taken to the theme administration area:
Figure 1 - Theme administration
The “General” link holds the settings for all module pages that
do not have custom settings. Every time we define a new Custom Module
(customization) it will be created with the same settings as those contained in
“General”, until we change them. Basically if there are no custom modules
present, these are the settings that will apply.
Below the Custom Modules setting we see a link titled:
*HomePage. This is a special Custom Module that allows you to define custom settings
for the home page (index.php) of your CMS. There are two other special kinds of
These will govern all administration pages and all user pages
(user account, registration, etc) respectively.
Below this we see an input box. This is where we add new Custom
Modules which can then be assigned different block layouts, colors and even
templates! We will cover this in more detail later on.
Finally we have Custom Blocks. Here we can add new block
designs specific to each block defined by its title. For example, you might
want your login block to have a different design from all the rest of the
blocks in a given position. Instead of designating a whole new position using
AutoBlocks, for just one block, you can just enter the title of the block into
the input box. You can then specify an HTML template containing the custom
block design. The template will need to reside in the root of your theme
folder, i.e. the same place as the other block templates.
Let’s click on the “General” link and see where it takes us.
We are now looking at a page with many settings broken into 4
Remember that you can create custom settings for any module
in this way, but this is the default configuration for the site.
First we will take a look at Templates:
Figure 2 - Templates
The Main input box defines the file name of the
template to be used for this module (as it is “General” it will display for all
modules that do not have custom settings); if we wanted to we could have a
completely different design from the homepage here! By the way, we are using
the theme we created in Part 1 and Part 2 of this tutorial so it is a good idea
to check them out first and install the theme that came with the tutorial, as
we will be using it as an example.
Table 1 and Table 2 are templates containing a
table design. These tables are not normally used by your theme or the
templates, but by different modules. This mainly depends on the module that is
being displayed, as not all modules incorporate this feature and many use them
in different ways. You will however, find that most modules use these table
These tables can be called by your theme template using the
<!—[open-table] --> your HTML <-- [close-table]
<!—[open-table2] --> your HTML <--
Below that we have Summary. This defines what file to
use as the article summary and its main use comes about when you want to have a
different article summary defined for the topics and news module from that
which is defined for the homepage.
Use Alternating Summary? This is where we can switch
on the alternating summaries feature (1=on, 0=off).
Below this is Summary 1 and Summary 2 where
we define the templates that will be used to display the alternating summaries.
NOTE: This will not work if the theme developer
has not created any files for an alternating summary. If they have included it
as a feature you should see some files present and the box shouldn’t be a
blank, like this one…
If this feature is not included and you want it, add “summary1.html”
and “summary2.html” to the blank input boxes, then create two new templates, “summary1.html”
and “summary2.html” and copy and paste the code from summary.html into them.
You then have an example to work from when creating your alternating summaries.
Below that we have our Article. This is the template
that is used when someone clicks the readmore link, or views the full article
These elements were explained in further detail in Part 2 of
this tutorial. Even if you don’t want to design a theme yourself, it is a good
idea to view the tutorial to get a good background on how the themes work.
Here we define what template is called for each of our block
areas. In the previous parts of this tutorial we created a theme that only
uses one block design, so we could use the one template for all of these blocks
if we wished.
Figure 3 - Block templates
If you have a theme that uses different block designs for
different block areas, here is where you define them. You might even have a
completely different block design for a Custom Module.
This is where we define different text and table colors for
you theme. These colors are not used by your theme or the templates, but by
different modules. This mainly depends on the module that is being displayed,
as not all modules incorporate this feature and many use them in different
ways. You will however, find that most modules use these color definitions.
Figure 4 - Styles
We can also define a different logo or style sheet. The logo
will depend on the theme design as some themes do not incorporate this, but you
can add it to a template with the <!—[logo-image] --> command.
Strip to </head>? If this option is set to 1,
AutoTheme will automatically remove all data from between the head tags of the
template. You can add code in the HEAD box for elements you wish to be
This is probably one of the most powerful features of
AutoTheme; the ability to define custom block layouts for individual modules.
Figure 5 - Block display
This feature requires that the theme incorporates all of
these block areas. If the theme doesn’t have these block areas, this feature
will not work. For example let’s say you have created custom settings for the
download module. You decide that you want a poll to show in the left column
only when the download module is active. Let’s do it:
Let’s go back to the main theme administration page and type
Downloads into the input box and click “Add”.
Figure 6 - Custom Modules
Note: You must use the exact name of the module
when creating a Custom Module. To easily find this out, view the module in your
CMS and take the name from its URL:
After you have done this you will be taken to the module
settings page. In “Block Display” you would enter “0” for Left and “1”
for Area1 in the hope that the theme designer has coded this area into
the theme. Believe me, you would be lucky if this works…and it didn’t…
Don’t worry you can make this area yourself; here’s what you
need to do.
First look through all the Custom Modules, i.e. *HomePage,
General, etc to find out what areas in Block Display have a “1” beside them. The
ones with a “1” beside them must be in use, so we cannot use them. We can see
that Area1 is not in use, this will be the position we will use for our custom
Now we are going to open “theme.html” (or whatever template
you have defined for the downloads module) from the theme folder.
Now we are going to search for this tag:
<!-- [left-blocks] -->
When we find it we are going to add this tag below it so
they look like this:
<!-- [left-blocks] -->
<!-- [area1-blocks] -->
Save the file.
Now open “leftblocks.html”. This is normally what the name
is for the blocks in the left column, but to make sure open the AutoTheme Administration
settings for the Downloads Custom Module. Then have a look in Block Templates
to see what template is associated with the Left block. Whatever it is, open it
and save it as “area1block.html”.
Then there is one more thing we must do. Open the AutoTheme Administration
and go to the Downloads Custom Module. Then have a look in Block Templates to
see what template is associated with area1 blocks, it could be area1.html, or
any number of things. Make sure it is area1block.html (or whatever you name
you saved your new block as).
Well done you have now made a Custom Module.
Custom blocks allow you to add new block designs defined by
there title. For example you might want your Login block to have a different
design from all the rest of the blocks in the same position, let’s say Left.
To create a Custom Block, type the name of the block in the Custom
Blocks box, then click “Add”. You will now see that the block is present
under Custom Blocks and you can enter the template containing the custom
block design and click “Save”.
This tutorial has shown you how to configure a theme in
AutoTheme Administration. Parts 1 and 2 of this tutorial show you how to
create theme ready HTML from a graphic template and create HTML templates for
use with AutoTheme.
For a complete overview of AutoTheme it is a good idea to
read through the entire tutorial. Even if you are not a theme designer, you
will find this tutorial a valuable resource in determining the capabilities of
AutoTheme and what it can do for you.
Copyright © 2004 Shawn McKenzie. All rights reserved.
No part of this document may be reproduced, stored in a
retrieval system, or transmitted, in any form or by any means, electronic,
mechanical, recording, or otherwise, without the prior written permission of Shawn
The content of this document is furnished for informational
use only, is subject to change without notice, and should not be construed as a
commitment by the authors or copyright holder. The authors and copyright holder
assume no responsibility or liability for any errors or inaccuracies that may
appear in the informational content contained in this document.
All names and trademarks are property of their respective