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

Creating a Theme in AutoTheme Administration (AutoTheme 1.7)

 

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 AutoTheme 1.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 AT-Lite (currently version .7), then there is a separate Part 3 tutorial that is specific to that version.

 

* AutoTheme 1.7 is still in beta and the functionality as well as the layout of the administration interface is subject to change.  Actually, the next beta already has some significant changes that increase functionality tremendously.

AutoTheme Administration Overview

After successfully installing AutoTheme, enter your CMS Administration area and click on the AutoTheme link or icon. You will then be presented with the main AutoTheme administration screen.

 

Figure 1 - AutoTheme Administration


AutoThemes

This is where you can add and configure your AutoThemes. Once you have selected a theme you can configure default theme templates, block display and colors, as well as Custom Module templates, block display, and colors.  You may also configure custom templates for individual blocks and add some theme information to your theme.  It is also possible to preview a theme from here without having to select it as your site or personal theme.

 

Figure 2 – AutoThemes

 

Creating a New Theme

You may also create a new theme by typing a name into the Create new theme from box and clicking either Blank, which creates a directory of this name and copies required files and directories (no templates) or Example, which is the same as Blank but also copies examples of all required templates (you can use these to get started).

 


Theme Configuration

From this screen we have the option to configure our General settings, create and configure Custom Modules, create and configure Custom Blocks and configure the theme Information.

 

Figure 3 - Theme Configuration

 

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.

 

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

ü      Block Display

ü      Styles

 

Remember that you can create custom settings for any module in this way, but this is the default configuration for the site.

Figure 4 - General configuration

 

Templates

The Page Template 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.


Strip out head content (from <head> to </head>)? If this option is set to Yes, AutoTheme will automatically remove all data from between the head tags of the template. You can add code in the Default Head Content box (shown later) for elements you wish to be included between the head tags, i.e. JavaScript.

 

Summary Article 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.

 

Below this is First Alternating Summary and Second Alternating Summary 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, 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.  Next, select them in the appropriate drop down boxes.

 

Use Alternating Summaries? This is where we can switch on the alternating summaries feature.  If Yes, then the First Alternating Summary and Second Alternating Summary templates will be used and alternate.  If No, then the Summary Article template will be used for all.

 

Below that we have Full 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.

 

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.


Block Display

The Show Block by Default? settings are probably the most powerful feature of AutoTheme; the ability to define custom block layout for individual modules.

 

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.  You would select No for the Left block and select Yes for the block area that you only want to show for the Downloads module. We will cover this in the AutoBlocks section of the tutorial.

 

First Table and Second Table 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] -->

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.

 

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.

 

You can add code in the Default Head Content box for elements you wish to be included between the head tags, i.e. JavaScript.


Custom Modules

Here is where you can customize the display of module pages.  You may also preview the modules that you have configured.

 

Figure 5 - Custom Modules

 

The Preview feature will allow you to preview a Custom Module with all current configuration settings.  Custom Modules with Modules Options (explained later) are not currently able to be previewed.

 

Configure takes you to the Custom Module configuration page which was discussed previously in General ConfigurationThe same concepts apply and the settings are identical.

 

Clicking Remove will remove all settings for the Custom Module. The module will revert back to the General Configuration settings.

Adding a Custom Module

By defining a Custom Module we can create a unique configuration that will only be used when the respective module pages are displayed. To define a new Custom Module select an existing module from the drop list then click add.

 

In addition to the modules that you have installed, there are 3 special Custom Modules that allows you to define custom settings for the home page (index.php), administration pages and all user pages (user account, registration, etc) respectively:

 

ü      *HomePage

ü      *AdminPages

ü      *UserPages


Module Options     

You can create a Custom Module with no Module Options and it will be labeled “default” and will apply to all pages of that module.  You can also create a Custom Module with Module Options, something in the URL that differentiates a module page from the other pages of the same module.  You can get this info by viewing the URL of the page that you want to create a Custom Module for.

 

Example 1:  To create a Custom Module for the Downloads in category 1, the Module Options would be cid=1.

 

Example 2:  To create a Custom Module for listing all articles in a specific topic, such as when you go to:

 

modules.php?op=modload&name=News&file=index&catid=&topic=2

 

You would use topic=2 as your Module Options.

 

You can also combine the options to make it even more unique and flexible, for example:

 

file=somefile&option=10

 

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.

 

Figure 6 - Custom Blocks

 

To create a Custom Block first choose an existing block from the Add a custom Block drop down box, then click “Add”.  You will now see that the block is present under Blocks. Now select the template containing the custom block design and click “Save”.

 

Information

This allows you to enter information about the theme and optionally have it included in the HTML source of all pages that use this theme.

 

Figure 7 - Information

 

Name of the theme (determined by the directory name).

 

Version is whatever version number has been assigned to the theme.

 

Description could contain any description, copyright information, etc.

 

Author of the theme is obviously the author’s name.

 

Contact may contain the email or website of the theme author.  This can help if you need support for the theme.

 

Include this information as a comment in the HTML source? Choosing Yes here will add the above information as an HTML comment to the HTML source of all pages that use this theme.


AutoBlocks

Here we can define new block positions (in addition to Left, Center and Right) for our theme, which can then be used in General or Custom Modules. If you need to create a custom block layout or area of multiple blocks for a Custom Module, this is the place.

 

Figure 8 – AutoBlocks

 

To create a new AutoBlock position, enter a name for this position and click “Add”.  After you create a new AutoBlock it will then appear in the AutoBlocks list. It will also be available in the General and all Custom Module configuration areas, where it can be assigned a template.

 

You can then assign blocks to these positions and display them in a template.  To use an AutoBlock position in a template, use the following tag syntax:

 

<!—[AutoBlock-blocks] -->


Commands

Commands are an easy way to add code snippets (PHP, JavaScript, HTML) to your theme templates while retaining the ability to edit the template with a WYSIWYG HTML editor.  These commands also allow you to further extend AutoTheme and your templates.

 

Figure 9 – Commands

 

For example you may want to add this code to your template:

 

<?php echo “AutoTheme is cool”; ?>

 

You would then give the command a name i.e. “widgets and add this to the Add a Command input box, after which you would choose what user types could view the command, and then add the PHP code to the Action field.

 

From now on all you have to add to your template is:

 

<!-- [widgets] -->

 

And the result of the PHP will be automatically inserted when the theme is displayed.  The same can be done for JavaScript and HTML.


Languages

For now, this area lets you define what languages should cause the theme to display Right-To-Left (RTL).  The CMSs that AutoTheme supports and AutoTheme itself ship with English which reads Left-To-Right.  Some languages, Arabic, Farsi and Hebrew (that are already added here) read from right to left, and AutoTheme will adjust the theme accordingly when the site language or the user’s selected language is one of these.  The text is printed RTL and other objects (tables, images, form inputs, etc.) are aligned to the right and all controls including the scroll bar are positioned on the left.

  

Figure 10 – Languages

 

To add a language that reads RTL, just enter the three letter abbreviation for the language as defined by ISO 639-2 and click “Add”.  The list of abbreviations can be found at http://lcweb.loc.gov/standards/iso639-2/englangn.html.

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.