Creating a Template
From ALSwiki
Contents |
Template Features
My first template, named "southwest" is not very complicated, but it does need to meet the following needs:
- support 3 columns
- use a fluid layout, adjusting it's width to the browser window
- drop empty columns
- support dropdown menus
- allow admin color-scheme changes
Download
Download this template at http://downloads.alstevens.org
Template files
The files are arranged as follows:
- index.php -- the main template file that determines how the modules get marked up
- params.ini -- a property file holding my list of params, currently one
- template_thumbnail.png -- a thumbnail shown when the template link is rolled over in the admin (or other) selection panel
- templateDetails.xml -- lists all of the template pieces and some of their relationships, including parameters.
- COPYING.LESSER -- the gnu/gpl (gnu public license) text
- index.html -- an empty file to prevent directory browsing
- css -- the directory holding the css files
- css/template.css -- includes for all of the other css files except the color ones
- css/article.css -- css related to individual articles, separated so that the editor can be configured use it and show only the styles it contains
- css/dropdowns.css -- styling for the dropdown menus
- css/layout.css -- overall page layout
- css/menus.css -- styling for the site menus
- css/typography.css -- styling for site typography
- css/yellow.css -- the yellow color scheme, loaded based on a parameter setting
- css/blue.css -- the blue color scheme, loaded based on a parameter setting
- css/index.html -- an empty file to prevent directory browsing
- images -- directory holding the images
- images/logo.png -- the site logo
- images/index.html -- an empty file to prevent directory browsing
Color themes
I'm supporting two color patterns: "yellow" and "blue". All pattern specific color rules are in the two files yellow.css and blue.css. Color rules that are constant across the patterns remain in the common style sheets.
Add a param to the properties file
Add this line to params.ini
colorVariation=blue
Add the param choices
To make the choices available in the admin control panl, add them to templateDetails.xml
<params>
<param name="colorVariation" type="list" default="blue" label="Color Variation" description="Overall color pattern">
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</param>
</params>
Modify the template to select the css file based on the param
Add a line to index.php to select the appropriate style sheet based on the colorVariation param. Add it after the other stylesheet declarations so that it overrides any of the other color rules.
<link rel="stylesheet"
href="<?php echo $this->baseurl ?>/templates/southwest/css/<?php echo $this->params->get('colorVariation'); ?>.css"
type="text/css" media="screen" />
Install the template
After testing locally, zip up all of the files. On the Joomla Admin page, select:
Extensions >> Install/Uninstall
Using the "Upload Package File" box, browse to the zip file and click "Upload File & Install"
Test it
On the admin page:
Extensions >> Template Manager
Click the radio button next to the template and then click the "Default". Take a look.
Put the menus and modules in the right place
user4 upper right search
top main horizontal menu main menu with no title
- Select Extensions >> Module Manager
- Click "Main Menu"
- Uncheck "Show Title"
- Set Position to "Top"
- Select "Advance parameters"
- Change the Module Class Suffix to "-nav"
- user1, user2 and user3 allow for some ordering of page components.
- These all appear in the main content, center column. The order is:
- user1
- user2
- page components
- user3
- These all appear in the main content, center column. The order is:
