MAXdev :: MDPro the most easy to use and feature rich GPL CMS

AutoTheme for Beginners

Author: Whix

Translation: A. Gagliani, capra@maxdev.com

... screenshots are in italian :-o

As most users know, there is in MDPro the possibility to manage graphic templates by using a tool called AutoTheme Lite. AutoTheme allows you to create a customized layout for every section of your site assuring a total control on the fundamental aspects to consider when publishing the site.

First of all let's see how AutoTheme Lite works: so we need to know some technical words and definitions (often users call the objects of the CMS with the wrong word :D ).

The main objects are:
Block: Area of the page containing a particular object (often the output of a Module).
Module: it can be defined as a small web application that provides new features to your web site.
Module Template: HTML page containing the definition of block and modules area layout.
Block Template: HTML page containing only the single block layout.

In the following image you can see examples of the mentioned objects:

Let's see how to set up a general module template and a general block template, then we will see how to customize every module or block of our web site. [pagebreak]

General Module Template (theme.html)

First of all you need to create an HTMNL page with the desidered layout: here's a step by step description:
- open the /themes directory in MDPro and make a copy of one of the exixting themes, e. g. MDPro.
- rename the new directory with the new theme, e.g. MyTheme.
- open /MyTheme and set chmod 666 to the theme.cfg file.
- open theme.html file with your favorite web editor.

Now feel free to customize the HTML code as you want, BUT DON'T TOUCH OR DELETE any HTML comments (beginning with <-!-- [something] --> ) from the code. Let's explain what these comments are for:

<TABLE
WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="3"><IMG SRC="{image-path}spacer.gif" WIDTH="3" HEIGHT="1"></TD>
<TD VALIGN="TOP">



</TD>
<TD WIDTH="100%" ALIGN="CENTER" VALIGN="TOP">
<TABLE WIDTH="98%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD ALIGN="CENTER">



<BR>



</TD>
</TR>

</TABLE>

</TD>

<TD VALIGN="TOP">



</TD>

<TD WIDTH="3" ALIGN="RIGHT"><IMG SRC="{image-path}spacer.gif" WIDTH="3" HEIGHT="1"></TD>
</TR>
</TABLE>

These comments has known names, you just met in the previous image. The name of these comments just say what they are for: so if you move one of these comments, also the relative block area will be moved in your page layout.

NOTE:

Insert these comments with the right syntax: you need to leave the blank spaces where needed, before and after [], otherwise AutoTheme will not be able to process these commands :-)) Example::

 will be correctly processed by AutoTheme

 will not be processed by AutoTheme [pagebreak]

General Block Template (leftblock.html, rightblock.html, centerblock.html)

Once the general module template is configured, you can set up the block templates.

First thing you create a customized block template, then we see how to create and apply these templates to the single blocks.
Let's see the files included in your new theme directory MyTheme:
- leftblock.html
- rightblock.html
- centerblock.html
Open for example leftblock.html ( the other files work in the same way): now we will modify this file:

<TABLE WIDTH="160" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD HEIGHT="28" ALIGN="CENTER" VALIGN="TOP" BACKGROUND="{image-path}mdpro_block_top.gif">



</TD>
</TR>
<TR>
<TD>
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="1" BGCOLOR="#25323B"><IMG SRC="{image-path}spacer.gif" WIDTH="1" HEIGHT="1"></TD>
<TD>
<TABLE WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="4">
<TR>
<TD HEIGHT="20">



</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="1" ALIGN="RIGHT" BGCOLOR="#25323B"><IMG SRC="{image-path}spacer.gif" WIDTH="1" HEIGHT="1"></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD><IMG SRC="{image-path}mdpro_block_bot.gif" WIDTH="160" HEIGHT="14"></TD>
</TR>
</TABLE>
<TABLE WIDTH="160" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD HEIGHT="7"><IMG SRC="{image-path}spacer.gif" WIDTH="1" HEIGHT="7"> </TD>
</TR>
</TABLE>

The comments define the title of the block and the position of the block content in the template.
To modifiy the template, you need only to recreate the page as you desire, inserting images or other graphic elements and positioning the comments commands in the place where you want the block title and the content to be displayed.

NOTE:

in the default theme many block titles are associated to images, so it can happens that these images will be displayed and not the title. If you modify the colors and the layout of the template, you may notice that this image does not match with your design: so follow these steps if you are going to delete or modify the block title image:

Case I - Modifying the image of the title to associate it to the page's design:

1.go to the MyTheme/images/eng directory (you need to repeat these settings also to the other languages you use in your web site).
2.search for the block title image and change it with yours (the image name has to remain the same).

Case II - Deleting the title image to insert a text title

1.go to the MyTheme/images/eng directory (see above about other languages)

2.search for the title image and delete it.

Notes:

Consider please, that all the blocks positioned on the left for which you haven't modified customized templates, will be shown using the leftblock.html template: same thing for central blocks and right blocks ( centerblock.html and rightblock.html templates).

This means: when you build the layout of the page, if you have not created a customized block template for a block in a certain position, this will be displayed with the default template for this position. [pagebreak]

Customizing a Module Template

We have just seen the simplier customization of the site's layout. Now let's see, how to personalize every single component of your site.

AutoTheme allows to display every single module with a different template: so we could have a template for the home page, and a totally different one for the Subjects page, e. g. without left and right blocks or with different colors.

NOTE: change in your site Preferences the default theme you want to modify to another theme to avoid corruptions of .cfg files. To see a preview of the modfiications you were making, just type http://www.mysite.com/index.php?theme=Name_of_ModifiedTheme and you will not risk corruptions. Then you can go on with further modifications.

The steps are quite simple:

1. Create a new module template and call it subjects.html and save it in the /themes/MyTheme/modules subdirectory you have created..

2. Insert the comments commands of the blocks and modules areas you want to use
(... etc...): we could put the areas in different positions as in the theme.html general module template.

3.Open with the browser the admin page of your site and click on AutoTheme..

4.Select your new theme (MyTheme)

5.The following window will appear:

6.Let's click on the subjects module link and following screen will appear:

7.Change the main template from theme.html to modules/subjects.html

8.Set to 1 the blocks you want to be shown in the page. You can also set them all to 1: if you have not inserted them in the subjects.html template, they will not appear, but it's better to set to 1 only the blocks used in the template.

9.Save the settings.

It's done! Open with your favorite browser the subjects module and see the customization made. . [pagebreak]

Customizing a Block Template

This is one of the most interesting feature of AutoTheme: it allows you to show every block of the site with a different layout.

Suppose you want to modify the Poll block, with different colors. Let's see how to do it

1.Create an html page for the new block template and call it poll.html and
save it in the /themes/MyTheme/blocks subdirectory created before.

2.Define where to put the comments commands (,) for the customized areas in the template.

3.Click on Administration >> AutoTheme links.

4.Select the theme you want to modify: MyTheme

5.At the bottom of the page there will be a text box where you can write the name of the new block (Poll) being careful with capital letters, because PHP is case sensitive, and click on the Add button.

6.Next screen we will find the new item Poll together with the other customized blocks (Sondaggio in the image) with an empty text box on the left.

7.Edit the path of the new block template here: blocks/poll.html (blocchi/sondaggio.html in the picture) and save.

Simple, or not?

This was the first part of AutoTheme for Beginners. Hoping to be useful to all newbies of MDPro,
Whix