e. Creating the Main Theme Template: theme.html

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:

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:

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