Who's Online
Currently 8 Guests and 0 Members Online

You are an anonymous user. You can login here or register for free by clickinghere.

Welcome to Webvida ThemeWorks Guest
Please Login or Register
Search our Website

AutoTheme HTML Theme System

Tutorial: Theme Creation - Part 3

Configuring a Theme in AutoTheme Administration (AT-Lite)

 

Author: Adam Docherty (a.k.a. Lobos)

http://www.webvida.com

 

Editor: Shawn McKenzie (a.k.a. AbraCadaver)

http://spidean.mckenzies.net



Introduction

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 templates.

 

If you are using the commercial AutoTheme 1.7, then there is a separate Part 3 tutorial that is specific to that version.

AutoTheme Administration Overview

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 Custom Modules:

 

ü      *AdminPages

ü      *UserPages

 

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.

General Configuration

We are now looking at a page with many settings broken into 4 areas:

 

ü      Templates

ü      Block Templates

ü      Styles

ü      Block Display

 

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 designThese 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 definitions.


These tables can be called by your theme template using the following commands:


<!—[open-table] --> your HTML <-- [close-table] -->

<!—[open-table2] --> your HTML <-- [close-table2] -->

 

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 from topics.

 

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.

 

Block Templates

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.

 

Styles

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 included between the head tags, i.e. JavaScript.


Block Display

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:

Custom Modules

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:

http://localhost/modules.php?op=modload&name=Downloads&file=index

 

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 downloads block.

 

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

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”.


Summary

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

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 McKenzie.

 

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 companies.