Rounded Corners for Mambo E-mail
Page 3 of 3

How it works - The Template File page.html

This file is mostly html.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
Arketec - Rounded Corners for Mambo: Page 3
<style type="text/css" media="all">@import url("http://arketec.com/templates/arketec2/css/template_css.css");</style>
</head>

But what about the Arketec - Rounded Corners for Mambo: Page 3 and the http://arketec.com/templates/arketec2?  These are variable place holders. The template engine replaces these with the values pushed in by the php side.

The rest of the template is simply html with place holders for the various parts of the page. For example, the left modules are placed in the place holder, or variable.

But what about the individual modules themselves.  How do they get rounded corners?

Each template file, like page.html, can have more than one template in it.  Each template is enclosed in xml tags like this.

<mos:tmpl name="ark_page">
...
</mos:tmpl>

There is another template at the end of page.html for the modules.

<mos:tmpl name="module" type="condition" conditionvar="position">
<mos:sub condition="right">
<div class="blue_box">
<div class="blue_"><h2></h2></div>
<div class="blue_boxbody">

</div>
</div>
<br/>
</mos:sub>
...
</mos:tmpl>

This template uses the 3 div technique to do the rounded corners.  The title is displayed using the varible substitution described above.\

This template is an example of a conditional template.  The appropriate sub template <mos:sub... is used depending on the value of the condition variable, in this case 'position'. This allows you to draw modules differently in each part of the page.  In this case, blue on the right and orange on the left.

Moving On...

Hopefully this article has helped clear up some of the confusion around patTemplte, and rounded corners.  Feel free to ask questions on the mambo forums.

Interesting note...
If you don't like the div technique you can replace this with tables, or any other technique you prefer.  Edit the 'module' template to suit.


<< Start < Prev 1 2 3 Next > End >>
< Prev