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

Index

Notes on the guide:

This guide is specially thought for beginners or non coders to give theme the possibility to have their own site look: but also experienced coders and designers could take some practic notices on how AutoTheme works and to integrate their experience to produce more complex themes...
This guide wants only to be a starting point, an exercise on how to build simple templates.
This guide builds themes that are not W3C compatible, XHTML compatible, Accessibility compliant, but uses traditional HTML coding. Our staff coders and designers are working for this compliance... so, be tuned on http://www.maxdev.com for further developments.
Normally the design concept for CMS architecture is inspired from web static design method:

- Paper sketch design => using Photoshop =>
- Dreamweaver => create content =>
- Generate html pages => convert to Autotheme
Designers and coders work usually together in team to build professional sites: this guide won't follow this professional method, but will only give basic instructions and simplify as much as possible the use of AutoTheme: the purpose is to allow everybody, designer or not, coder or not, to have their self made and customized theme working on the site. So many statements made in this guide are only for educational use limited to the purposes of this tutorial.

Used tools:

MDPro: For the purpose of this guide you need a local machine with MDPro version 1.02 or later installed and running. This means also that you need to have Apache, PHP and MySQL running on this machine :-) . Let's assume, you point to this URL on the local machine: http://127.0.0.1/mdpro to open your local test site.
Web editor: I used Macromedia Dreamweaver 4 as web editor, but Window's Block Notes or other web editors, like OpenOffice.org HTML editor (used to write this guide) or Netscape, makes it also.
A browser: I'm using IE 5.50, but it's better to have different browser to test the theme on the most used one, as Netscape, Mozilla.
A graphic tool: I use The Gimp, open source software, to create and edit images and banners: it's professional and it allows you to do all the things commercial products do...But Fireworks or PhotoShop or others makes it also.

b. Theme objects

“Regardless of how themes are built, a base understanding of CMS is needed. Standard CMS installations make use of four main elements in the layout. Left Blocks, Center Blocks, Right Blocks and Modules. You can create and modify the blocks via CMS's administration menus, but the theme controls when, where and how these four elements are displayed. Two additional elements are used for the news, the Summary Article (displayed on the Main Page) and the Full Article (displayed when the user reads the Full Article usually by clicking Read more...).” (Shawn McKenzie)

Let's look to these elements, that we call theme objects:

There are (from up to down in the picture above):

the Header: it's the upper stripe of MDPro that contains usually the site's logo, a banner, images, the language flags, the Welcome message, the top links or a drop down menu, date and time and other elements, that we will call commands, because “the locations where these objects are to be placed are specified in your HTML templates using comment commands, standard HTML comments that have an embedded AutoTheme command. AutoTheme commands are enclosed in brackets [ ] ” (Shawn McKenzie) and take the following form:

Example:

Left blocks: all the objects located usually on the left column of the site: usually because you will soon understand that with AT (AutoTheme) you're free to use or not all these locations or to place there every object you want, e.g. an image or nothing... Left blocks are usuallu the Main Menu and other blocks you place there from the Admin Panel >> Blocks configuration.
Center blocks: all the objects located usually under the header: normally the Messages from the omonym module. But you can place there other blocks: AT calls the free blocks location, that you can place freely where you want areablock1, areablock2, ....areablock9.
Right blocks: all the objects on the right column of the site: in the standard installation of MDPro you find there the Poll, Daily Archive module, etc.
Modules: it's the main central content of the page: per default, the News Module, but also the Statistic module, or Subjects or other types of site content. At's flexibility allows to show them with right blocks, and/or with central blocks, without any blocks only with header and footer, etc.
Footer: the footer is placed at the very bottom of the page: it's the standard Copyright notice that is set in the Admin Panel >> Settings >> Preferences. With the template you can also place here images, banners, everything you want...

c. The new Theme directory

- File Permissions

*** modules/AutoTheme/autotheme.cfg and any theme.cfg in your theme directories must be writeable by the web server!

The easiest way in Unix/Linux is CHMOD 777 autotheme.cfg and CHMOD 777 theme.cfg

Windows should not be an issue unless you have set custom file or directory permissions.

AutoTheme is a Theme System, not a theme. The included HTML templates and images may be used as is or modified to fit your needs, but they are only examples. You should use your own creativity to build a custom theme using the AutoTheme functionality. The template files in your AutoTheme can be named anything you wish and can be organized in any directory structure under your theme directory. Your site may require fewer files or more files.

A theme directory needs to include following files:

theme.cfg, chmod 777, writable, for the theme configuration from the Admin Panel >> Autotheme.
theme.php, that includes the AT theme engine Module.
nuclei.cfg if you use the 9 different area blocks andPostNuke systems.
The /docs subdirectory with the GPL license file or other files you may included
the /images subdirectory, where you will save the images used in the layout
the /includes subdirectory, with two files for first time run, that can be deleted after configuring theme from the Admin Panel >> Autotheme configuration. Leave that directory if you use PostNuke.
The /lang subdirectory with subdirectories for every language of the file containing a global.php file for the language variables used in the template. Not necessary for every theme...
the /style subdirectory: when you build your templates you may use cascading style sheets to define the appearance of certain tags or elements. This style sheet needs to be saved under the style/ directory of your theme directory as style.css (main style sheet) and styleNN.css (used for Netscape navigator). These may contain style differences but most likely will work if they are the same. You may include your style sheet in the header of your theme template while editing, but the <link> reference will be stripped out by AutoTheme and CMS will dynamically include one or the other depending on the viewer's browser. You may also define an additional style sheet to be included after these CMS default ones.
Download the basic ATTest theme from
that contains basic files needed for your theme and copy it into your local MDPro/themes directory.

d. The different Theme Templates you need

theme.html (main theme template)
article.html (full article template)
area1block.html (area1 block template)
centerblock.html (center block template)
leftblock.html (left block template)
rightblock.html (right block template)
summary.html (default summary article template)
all the other templates files you may want to customize, as poll.html, related_links.html, etc.

Tips for beginners (and not only): some tips to save time and efforts in developing and following the exercices of this guide: >> Don't make major modifications without backup of the previous file and without previewing it in browser.

work always on a copy of the files: it's a good use professional developpers have...this means when you open theme.html in next chapter to modify it, create a copy of the original site and call it example: themebak1.html. Edit then theme.html. In chapter f. when you reopen theme.html for further editing, copy your last theme.html and rename it themebak2.html and work on theme.html.... this way you will have a lot of back up files, but you can at the end of the guide return back at a certain point of design and begin a new way or restart coding in different way... for example to insert header images, etc. You will certainly gain in time and efforts also if something goes wrong with the modifications you last made.
Test every change you make: only way to test the HTML code is to view it with the browser: I work like this: have the HTML open in the web editor (Block Note, DreamWeaver, OpenOffice.org or what else you prefer), make the changes, save, leave the editor open, open Browser, point to the local site ( http://127.0.0.1/mdpro/index.php?theme=ATTest or http://localhost/mdpro/index.php?theme=ATTest ), make arefresh and see the modifications on line. Reopen editor, make changes, view them on browser just refreshing page, and so on. Preview in browser every little change in code ! It will be easier to track eventual errors....

e. Creating the Main Theme Template: theme.html

The Main Theme Template is the layout of the main page of your site: the index.php page where your domain points to.

It's a simple HTML page that you have to build: then you will add the AT commands that will automatically insert the objects you want to place. It will be a three column design, as in standard MDPro themes. Let's build the header, using simple colored stripes without images, for the beginning:

Ok, it's a simple, but light header, without images for now....Main theme templates should be complete HTML files containing <html>, <head>, <body> and their closing tags.

Here's the HTML code: copy it into your favorite web editor (also Block Note) and save as theme.html in your ATTest theme directory:

<HTML>
<HEAD>
<TITLE>Main Theme Template</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD>
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD HEIGHT="16" WIDTH="100%" BGCOLOR="#FFA500">The orange stripe</TD>
</TR>
<TR>
<TD>
<TABLE WIDTH="100%" HEIGHT="65" BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD WIDTH="279"> Logo here</TD>
<TD ALIGN="CENTER"> Banner here</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD HEIGHT="24" BGCOLOR="#2D6EC5" WIDTH=100%><IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="23">The blue stripe</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD BGCOLOR="#FFC22C" HEIGHT=23>The yellow stripe</TD>
</TR>
</TABLE>
</BODY>
</HTML>

As you can see, the layout uses tables (<TABLE>), built by rows (<TR>) and every row by columns or cells (<TD>). The HTML table structure (or, else, the DIV layer structure) fixes any object on the HTML page, so that different browsers or browser versions shows the page in the same way... it's like a grid on which the single objects (text, images, colors, etc) are fixed.

NOTE: Tables can be defined in a site in absolute or relative sizes: the <TABLE>, <TR> or <TD> tags contains the WIDTH and HEIGHT parameters to define :

the fixed size of the table structure in pixels (ex. <TABLE WIDTH=”800” HEIGHT=”600”>): in this case, every object of the page is fixed: visitors with higher screen resolutions, example 1024x768, will see the page as in a box on the screen and objects will always remain the same: no distorsions are possible. The whole site has to use fixed sizes.
The relative size in percentage (ex. <TABLE WIDTH=”100%” HEIGHT=”100%”>): in this case, tables and layout will resize with the screen resolution: the site will always match the visitors browser window. Some distortion are possible, mainly in splitted images resizing and, in general, using fixed size objects, as banners, images, etc. The trick is to fix the cells containing fixed objects, and leave relative the other cells:
example:

<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD>
<TABLE WIDTH="100%" HEIGHT="65" BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD WIDTH="279"> Logo here</TD>
<TD ALIGN="CENTER"> Banner here</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

As you can see from the example, the inner table uses a fixed height and a relative row with two cells: the left cell for the logo has fixed width=279 for the logo image, the right cell extends the width to reach the 100% of the table: if you don't specify the HEIGHT or WIDTH parameter, it's intended to be relative of 100%...

In this guide we will use relative table sizes as shown above, and will test the final layout with different browsers and different screen resolutions to prevent distortions (this test is always to do before pubblishing your theme....).

The theme.html cosists here of two main tables: line 9 – 34 for the orange, white and blue stripe, and line 35 – 39 for the below yellow stripe. Different colors has been used to mark the zones... you can easily change them in the BGCOLOR=”#hex” parameter of <TABLE>, <TR> and <TD> tags.

The first table contains an inner table (line 12 – 31) with one row for the orange stripe (line 13 – 16) and HEIGHT of 16 pixels (you can modify it to enlarge the stripe), another row with a table (line 17 – 27) for the white stripe, splitted in two cells (<TD>): one with WIDTH=”279” pixels for the logo, and the other completes the width to the 100% of the table (that means, it's variable to the screen resolution of the visitor). Last row (line 29) for the blue stripe, HEIGHT=”24” containing also a separator spacer.gif image.

The second table (line 35 – 39) contains the yellow stripe: it's where you can put the top link menu, the welcome message, the site's date.....

Ok, let's look how our primary theme looks like, only for curiosity: open your browser and type the URL of your local MDPro system: http://127.0.0.1/mdpro/index.php?theme=ATTest

Putting the parameter ?theme=ThemeName into the URL allows you to force MDPro to preview a certain theme. So we don't need to install it to have a preview...

You will see the header you built and by default, the News Module below: it's where the index.php points to: you set it in the basic setups of the site in the Admin Panel >> Settings >> Preferences.

f. The Three Column structure:

Ok, now let's add the three column structure to our theme.html template under the header area: left blocks, center block & modules, right blocks and footer:

Open theme.html template with your favorite web editor, and, at the bottom of the HTML code, before the closing </BODY> </HTML> tags, insert following code:

<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD>
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR VALIGN="TOP">
<TD>
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="172" VALIGN="TOP" BGCOLOR="#2D6EC5">
<TABLE WIDTH="171" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD ALIGN="CENTER" CLASS="login" > Welcome message</TD>
</TR>
<TR>
<TD HEIGHT="4" CLASS="login" ><IMG SRC="<?php echo $imgpath; ?>spacer.gif" WIDTH="1" HEIGHT="4"></TD>
</TR>
</TABLE>
<TABLE WIDTH="172" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="3"><IMG SRC="<?php echo $imgpath; ?>spacer.gif" WIDTH="3" HEIGHT="1"></TD>
<TD> Left Blocks </TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="100%" ALIGN="CENTER" VALIGN="TOP">
<TABLE WIDTH="98%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD ALIGN="CENTER"> Center blocks & Modules here
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="2" BGCOLOR="#2D6EC5"> </TD>
<TD ALIGN="CENTER" BGCOLOR="2D6EC5">
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD HEIGHT="7"><IMG SRC="<?php echo $imgpath; ?>spacer.gif" WIDTH="8" HEIGHT="8"></TD>
</TR>
</TABLE>
Right blocks</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="1" ALIGN="RIGHT" BGCOLOR="#2D6EC5"><IMG SRC="<?php echo $imgpath; ?>spacer.gif" WIDTH="1" HEIGHT="1"></TD>
</TR>
</TABLE>
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD BGCOLOR="#2D6EC5">
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="6" CELLPADDING="0">
<TR>
<TD CLASS="footer" ALIGN="CENTER" height="20"> Footer Message </TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<TABLE WIDTH="100%" HEIGHT="23" BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD ALIGN="RIGHT" BGCOLOR="#2D6EC5"></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Let's see the table structure we added:

two nested tables each with a unique row <TR> from line 40 (where the added code starts) to 100: the second table consists of some cells: one nested table containing left and center blocks (line 43 – 74), one separator cell (line 75) and a cell for the right blocks (line 76-82).
the table for left and center blocks (line 43-74) consists of a column (<TD>) with a row for the welcome message, a separator and a row for left blocks. Background color of the columns and cells is always blue (#2D6EC5): Center blocks has no BGCOLOR: it will show white per default.
forces a blank space, since HTML code recognises only one blank space between words in the text....

So you created your 3 column basic structure where to place the AT commands that will insert the real objects: blocks, variables, modules, etc. Save the theme.html file and open the MDPro site from the browser, using the usual preview URL

http://127.0.0.1/mdpro/index.php?theme=ATTest

That's what we got:

Now we have to insert the

g. AT commands

Here's the complete list of AT commands taken from the AT Module documentation by Shawn McKenzie:

Main theme commands:
[modules]	Defines the main content area where the modules are displayed
[date]	Displays current user date
[time]	Displays current user time
[user]	Displays the logged in user or anonymous
[user-welcome]	Displays Welcome Username
[user-login]	Displays a horizontal user login consisting of Username, Password, Remember me checkbox and submit button
[user-links]	Displays links for logged-in user (My Account \| Logout) and anonymous user (Register \| Login)
[banners]	Displays the banners (from PostNuke Banners)
[banners-type1] through [banners-type99]	Displays banners by ID Type 1-99 (from PostNuke .723 Banners)
[footer-msg]	Displays the Footer Message (from PostNuke Settings)
[open-table]	Starts a table, 100% width <table><tr><td>
[close-table]	Closes the table</td></tr></table>
[open-table2]	Starts a table, width sized to contents <table><tr><td>
[close-table2]	Closes the table</td></tr></table>
[table-content]	Displays the table content in your table (used in table1 and table2 templates)
[site-slogan]	Displays the site slogan from Administration, Settings
[site-name]	Displays the site name from Administration, Settings
[search]	Displays a search text field and submit button to search the core PostNuke areas of your site (comments, downloads, faqs, reviews, sections, stories, users, weblinks)
[logo-image]	Displays the standard or custom module logo image that in AutoTheme administration
{image-path}	The theme images directory
{theme-path}	The theme directory
Block commands:
[block-content]	Displays the Block Content in your block
[block-title]	Displays the Block Title in your block
[left-blocks]	Displays the Left Blocks
[center-blocks]	Displays the Center Blocks
[right-blocks]	Displays the Right Blocks
[AutoBlock Name-blocks]	Dynamic commands for each AutoBlock name
[Block Name]	Dynamic commands for each individual named block
Article commands:
[article-edit-del]	Displays Article Edit and Delete links for admins
[article-full]	Displays full Article text
[article-more]	Displays the Article Read More... link
[article-notes]	Displays the Article notes
[article-summary]	Displays the Article summary text
[cat-title]	Displays the Article category and title
[posted-by]	Displays the Article posters name
[posted-date-time]	Displays the date and time of the Article posting
[topic-image]	Displays the article topic image
[article-reads]	Displays the number of times the article has been read
Colors used by modules:
{color1}	Background Color 1
{color2}	Background Color 2
{color3}	Background Color 3
{color4}	Background Color 4
{color5}	Text Color 1
{color6}	Text Color 2
{color7}	Table Border Color 1
{color8}	Table Background Color 1
{color9}	Table Border Color 2
{color10}	Table Background Color 2

How to use AT commands:
As you design your Main Page template, keep in mind the basic layout elements of MDPro. The locations where these are to be placed are specified in your HTML templates using comment commands, standard HTML comments that have an embedded AutoTheme command. AutoTheme commands are enclosed in brackets [ ] and take the following form:

Example:

Commands that are used inside of HTML tags themselves are not placed in a comment and are enclosed in braces { }.

Example: {command}

CMS Specific Tables and Colors

Two theme tables and several colors are used by many core and third-party CMS modules. The border and background color of the tables can be configured in AutoTheme administration. In addition, you can configure templates for the Table 1 and Table 2. These will override the table colors that you specify.

Images and Other Files

The base location of your CMS page is where your CMS index.php resides. Therefore, images and other files such as scripts that are in a sub-directory of your theme directory will need to use a path relative to where the CMS index.php resides. So if you have your images in the images directory an <image> tag and <script> tag would look like this:

Example <img src="themes/AutoTheme/images/image.gif">

Example: <script src="themes/AutoTheme/javascript/script.js">

Two commands are available for referencing paths in your templates. The first is for your theme directory and the second is for your theme images directory:

Command: {theme-path}

Example: <script src="{theme-path}javascript/script.js">

Command: {image-path}

Example: <img src="{image-path}image.gif">

PHP code

Of course if there isn't a command for what you want to do or if you don't like the way a command functions, you can still use PHP code in your HTML templates.

Example: <td><?php echo $username." AutoTheme is cool!"; ?></td>

You don't understand? It's easier to show than to explain:

h. Applying AT commands to theme.html template

Open theme.html with your favorite web editor and find the code including left blocks:

<TR>

<TD WIDTH="3"><IMG SRC="<?php echo $imgpath; ?>spacer.gif" WIDTH="3" HEIGHT="1"></TD>

<TD> Left Blocks </TD>

</TR>

</TABLE>

change the placeholder <TD> Left Blocks </TD>

with the AT command for left blocks: <TD>  </TD>

<TR>

<TD WIDTH="3"><IMG SRC="<?php echo $imgpath; ?>spacer.gif" WIDTH="3" HEIGHT="1"></TD>

</TR>

</TABLE>

Replace also:

the Welcome message placeholder with the AT command
the Center blocks & Modules placeholders with
the right blocks palceholder with
the footer message placeholder with

Save the theme.html file, make a refresh of the browser or type the preview URL http://127.0.0.1/mdpro/index.php?theme=ATTest : that's what you will see:

i. Left and right blocks template

As you can see in the picture, left and right blocks have a yellow header: look at the Block templates of the theme:

- leftblock.html and rightblock.html in your /ATTest folder are the templates: for example leftblock.html:

<TR>

</TD>

</TR>

</TABLE>

<TR>

<TR>

<TD>

</TD>

</TR>

</TABLE></TD>

</TR>

</TABLE>

<TR>

<TD HEIGHT="7"> <IMG SRC="<?php echo $imgpath; ?>spacer.gif" WIDTH="1" HEIGHT="7"></TD>

</TR>

</TABLE>

The rightblock.html looks similar... It's built with 3 main tables:

the first table for the header with the yellow BGCOLOR="#FFC22C" and the AT command  where AT includes directly the Block Name defined in Admin Panel >> Settings >> Blocks by the system: when you create a new block, it will be the name you decide for the block.
the second table for the block content with white BGCOLOR="#FF9900" and AT command  to insert automatically the output of the block.
Third table is a spacer.
Note: there are no borders set up and only the width is fixed (WIDTH="165"), because the height depends on the content of the block and the width of all the leftblocks has to be alligned as included in a column.

Rightblock.html has a similar structure with some spacer cells more....

m. Including other AT commands

Let's insert the logo of the site, the rotating banners set up in the Banner Module, date and time of the site.

Open the Main theme template theme.html :

Logo: find the logo placeholder <TD WIDTH="279"> Logo here</TD>
and replace with

<TD ALIGN="CENTER" WIDTH="279"><a href="index.php"><img border="0" src="{image-path}logo.gif" alt="<?php echo _GOTOINDEX ?>"></a></TD>

Just add a <A HREF> tag to make a linkable image to the Home Page defined in the Admin Pannel >> Settings >> Preferences >> Start page. The image logo.gif is linked by the AT command {image-path} that replaces the themes/YourTheme/image subfolder, where you have to copy the image. The alt parameter is to show a little box with the alternative text that will be compiled by the Php: echo (=display) the _GOTOINDEX constant. This constant has to be added in the /themes/YourTheme/lang/eng/global.php file: open it with Windows Block Note editor or other editors, and insert that line before the closing ?> command:

define('_GOTOINDEX', 'Back to the Home page');

or the text you want to display. Save.

Remember: if you set up different languages for your site, you have to create a /themes/YourTheme/lang/newlanguage subfolder with a global.php for the defines: this location is automatically searched by AutoTheme for the theme constants. If you have different languages, AT will look for the default language set up for the site.

Banner: replace the banner placeholder in the theme.html file

<TD ALIGN="CENTER"> Banner here</TD>

with the following AT command:

Create a banner with width=300 and height=60, or copy the banner from http://www.openitalia.net to the /images/banners/ folder and rename it banner.gif

The banner has to be set up from the Admin Pannel: open it, click on Contents >> Banners: here add a banner client: insert your data, then submit. Now add a banner: select the client you just create, Show in all modules, all languages, Impressions=0 (unlimited), width=300, height=60, image URL: images/banners/banner.gif.

If you will encounter problems, copy banner.gif into the /themes/images/ path and use these tags:

<TD ALIGN="CENTER"><a href="index.php"><img border="0" src="{image-path}banner.gif" alt="<?php echo _GOTOINDEX ?>"></a></TD>

That's what the index will show:

date/hour: change the place holder for the blue stripe

<TD HEIGHT="24" BGCOLOR="#2D6EC5" WIDTH=100%><IMG SRC="images/spacer.gif" WIDTH="1" HEIGHT="23">The blue stripe</TD>

with

Top Navigation Links: Now include a simple top navigation bar within the yellow stripe:
<TD BGCOLOR="#FFC22C" HEIGHT=23>The yellow stripe</TD>

With

Let's explain the code: in a professional theme design, text should not be hard-coded: so, instead of writing:

you should write:

and add these constants (_CONSTANT) to your /lang/eng/global.php as define() for each language used on your site:

Global.php should look like this:

<?php
define('_ANONYMOUS','Guest');
define('_MYACCOUNT','My Account');
define('_NEWACCOUNT','Register');
define('_REMEMBERME','Remember me');
define('_WELCOME','Welcome');
define('_URL1','index.php');
define('_URL2','modules.php?op=modload&name=subjects&file=index');
define('_URL3','modules.php?op=modload&name=Topics&file=index');
define('_URL4','modules.php?op=modload&name=Web_Links&file=index');
define('_LINK1','HOME ::');
define('_LINK2','DOCUMENTS ::');
define('_LINK3','TOPICS ::');
define('_LINK4','WEB LINKS ');
?>

This method of using lang contants allows you to easily change link and url definitions by editing them simply in the language global.php file. This should be done for any text appearing in the theme template...

Site name/slogan: inserting site name and slogan at top of the page on the upper orange stripe:

<TD HEIGHT="16" WIDTH="100%" BGCOLOR="#FFA500">The orange stripe</TD>

Replace with

That's how it looks in the preview:

You can change position of AT commands in the <TD ALIGN=”LEFT, CENTER, RIGHT”> tag, and the style in the <FONT CLASS””> tag.

Marquee text: put it in the upper orange stripe, where you put site name and slogan:

Remember to activate the <MARQUEE> tag in the Admin Panel >> Settings >> Preferences >> HTML Options.

n. Creating and including customized area blocks

When you create a new block or modify an existing block in the Admin Pannel >> Settings >> Block, you have to choose also the Position of the block from a drop down list: left, right, center, area1, area2, etc. These positions define not only the location of the block in the site's layout, but also the related template layout that will build the block as defined in the related templates files in the /ThemeName folder: leftblock.html, rightblock.html, centerblock.html. So if you create a new block and place it to the left, it will look like all the other left blocks as defined in the leftblock.html file.

You have just seen how to modify these templates in step i. Left and right blocks template. Remember only this few things if you want to edit them:

leave the WIDTH fixed: 165 pixel is a good size
to insert images to the block layout, read on the relative step of this chapters
to format content of the block (title or text content), use CSS styles as

<TD CLASS="blocktitle2"></TD> just adding the blocktitle2 style into your /styles/style.css file.

Let's see now how to add customized block locations, called AreaBlocks:

If you want to place a block in a different position or want the block to have a different size or look, you have to create a specific block template, that you call area1block.html, area2block.html, etc. (Note: you can call thiese templates how you want, but then you have to make several changes in other files, as theme.cfg, and the template name isn't shown in any place, so leave area1block.html, etc.). You can create up to 9 area blocks in the default AutoTheme Lite version included into the MDPro installation.

As an exercice for this guide, you will create 3 areablock templates, then you will insert their desidered location into the theme.html, create 3 new example blocks in the Admin Pannel and assign each new block to one areablock template, finally preview in browser. If anything works, you will modify the areablock templates to customize them at your need.

a. The theme engine: AutoTheme

b. Theme objects

c. The new Theme directory

d. The different Theme Templates you need

e. Creating the Main Theme Template: theme.html

f. The Three Column structure:

g. AT commands

h. Applying AT commands to theme.html template

i. Left and right blocks template

l. CSS styles

m. Including other AT commands

n. Creating and including customized area blocks

Step 1: Create General Area block templates:

To see how area block templates work, you will create 3 different areas located in the central column of the theme, just between the top links and the center blocks: the fastest way to create these templates is to copy the code from the leftblock.html and save it as area1block.html, area2block.html, and area3block.html in the same folder of theme.html. Then you can make the required modifications to these files to fit your needs. Remember all the template files, except for theme.html, don't have <html>, <header> and <body> tags. Here's the general code:

<TR>

</TD>

</TR>

</TABLE>

<TR>

<TR>

<TD>

</TD>

</TR>

</TABLE></TD>

</TR>

</TABLE>

<TR>

<TD HEIGHT="7"> <IMG SRC="<?php echo $imgpath; ?>spacer.gif" WIDTH="1" HEIGHT="7"></TD>

</TR>

</TABLE>

Step 2: Inserting area blocks into theme.html

Open the default theme template theme.html, find the line with the left blocks command and around line 77 add the below code in bold : I put also the old code to let you see where exactly to paste it...Excuse me for using upper and lower letters for HTML tags, HTML tags should always be written in lower letters... it's for the use of this guide :-)

Save.

</TR>

</TABLE>

</TD>

<table border="0" cellpadding="0" cellspacing="0" width="98%">

<tr HEIGHT="3"></tr><tr>

<td valign="top" width="66%"></td>

<td> </td>

<td valign="top" width="33%"></td>

<td> </td>

</tr>

</table>

<table border="0" cellpadding="0" cellspacing="0" width="98%">

<tr>

<td valign="top" width="100%">

</td>

<td> </td>

</tr>

</table>

<TR>

So you inserted two new tables with relative sizes and width=98% (98% to have some distance from left and right blocks...) before the center blocks:

a. the first <table> includes two cells: one for the area1block that covers 66% of the row, the second for area2block covering the restant 33% of the table. Over them, a little <tr> row of Height=3 pixels to separate the blocks from the above top links stripe.

b. the second table is entirely covered 100% by the area3block.

Step 3: Creating 3 new blocks in the Admin Pannel

Open your browser and point to your MDPro installation: http://127.0.0.1/mdpro/index.php , login as Admin, open the Settings Section >> the Blocks link to manage the blocks of the site. The block admin table will appear:

<theme9.gif>

Note there is just a block located in the Area1 position: it's the Karma Module of the default installation.

To add 3 new blocks, click on the Add block or New block link just over the table on the left: that's what appears:

<theme10.gif>

Area1block: Fill in as Block Title: Image block (to remember what it will contain)

Block Type: select Core/HTML from the drop down list

Position: Area1 ; Langauge: All and click the Commit button.

Next page that appears, in the Content text area, insert only a placeholder for now, example: Image here.

Create in the same way the other 2 blocks with following data:

Area2block: Block Title: Small links block (to remember what it will contain)

Block Type: select Core/HTML from the drop down list

Position: Area2 ; Langauge: All and click the Commit button. Content text: Small Links

Area3block: Block Title: Big menu block (to remember what it will contain)

Block Type: select Core/HTML from the drop down list

Position: Area3 ; Langauge: All and click the Commit button. Content text: Big menu block

That's how it looks like, returning to the Theme preview link http://127.0.0.1/mdpro/index.php?theme=ATTest

<theme11.gif>

It's not that amazing, is it? Important it works for now...

Step 4: Customizing area block templates

Now you have to customize the three area block templates:

Start opening area1block.html with your favourite web editor and edit it as below (delete your content and copy&paste this... it's faster): what has been done:

<TR>

<TR>

</TD>

</TR>

</TABLE></TD>

</TR>

</TABLE>

<TR>

<TD HEIGHT="7"> <IMG SRC="<?php echo $imgpath; ?>spacer.gif" WIDTH="1" HEIGHT="7"></TD>

</TR>

</TABLE>

The original area1block contains 3 tables: one for the block-title, one for the block-content and the last for the spacer. In this new template the block-title table was deleted to not display the yellow block header and the block title name, Image block, you filled in during block creation in the Admin Pannel.

....work in progress :-)

- File Permissions

A theme directory needs to include following files:

CMS Specific Tables and Colors

Images and Other Files

PHP code