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.
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
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
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).
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.
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
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.
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.
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 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 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] -->
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.
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 Configuration.
The 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.
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
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 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”.
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.
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 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.
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.
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.