Creating a Template

From ALSwiki
Jump to: navigation, search

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