Changing the design
The three options for your site's design
- You can leave everything as it is. Then, your site will look like demo.awf-cms.org.
- You can just change the stylesheet but not the template itself. The filename of the stylesheet for the default template templates/designs/awf2.html.tpl is css/awf2.css. That is a good option for the start, as stylesheets are very powerful tools in XHTML and actually determine how a site looks. All the different Mediawiki skins work like this, for example.
- You can change both, the template and the stylesheet. This will be lots of work, and is only recommended if you are an expert, or if you don't wanna use XHTML but normal HTML templates generated with a software like Frontpage.
To learn about, how a template looks and what variables you can use, it's best to have a look into the default template. The most important object is $awf - using that as starting point, you can access almost every variable and method of AWF (a method is a function of an object, like $awf->init() - variables like $awf->cms->request_string don't have the brackets at the end).
Location and naming conventions of templates
The main templates are supposed to be located in templates/designs/, but the actual path depends on the configuration in inc/design/Design_Name.ini. AWF templates for the HTML output format always have the extension ".html.tpl" - if you also want to provide a WML version of your site, you would have to create a second template with the same basename but the extension ".wml.tpl".
How to create a completely new design
- Create an INI file in inc/designs/. It should contain at least the keys delimiter, template and css. Example:
delimiter = " - "
template = designs/awf2
css = css/awf2.css- Create a new (X)HTML template in templates/designs/. It should contain at least the (X)HTML header and footer as well as the {$content} wildcard:
<div id="main">
{$content}
</div>- You can insert meta information into the header like this:
<head>
<title>{$page_title}</title>
<meta name="charset" content="{$charset}" />
<meta name="generator" content="AWF-CMS.org" />
<meta name="description" content="{$metadata.description}" />
<meta name="keywords" content="{$metadata.keywords}" />
</head>- You can also access the values defined in your INI file:
<link rel="stylesheet" type="text/css" href="{$design.css}" />- To include Blocks, you have to use a foreach loop at the position you want them to appear. Example:
{foreach name=outer item=module from=$modules.left}
<div class="panel">
<h4>{$module.caption}</h4>
{$module.content}
</div>
{/foreach}- The last step is to create a new stylesheet in the directory css/, which is the most difficult part. In our example, the stylesheet filename would be css/awf2.css. It's hard to give an example of how a stylesheet for AWF should look like. A stylesheet for our template should at least contain definitions for the id "main" and the class "panel":
#main {
margin: 0.5em 17em 0 17em;
padding: 2.0em 0;
min-height: 30em;
}
.panel {
margin: 1em 0 0;
padding: 1em 1em 0 3em;
border: 1px dotted #FFF;
}Created: 08.01.2006 23:12 CET, Last Change: 24.01.2006 14:20 CET by admin
