Creating A Template For Joomla 25

Creating a Template for Joomla 2.
5
http://www.grimmster.com/development/creating-a-template-for-joomla-2-5-part-1 For many people, dealing with templates in Joomla is a very hard task. They prefer to work with the standard templates or get one available on the internet. However if you are a web designer, you want create your own template and apply it to your website. In this tutorial I am going to show how you can create your own template and use it inside Joomla. Template Files and Directory Structure If youre going to use a template within Joomla you must meet some requirements, such as: templates must have some specific files and some specific directory structure. Talking about the directory structure, all templates must be inside the Joomla/templates folder. Each template has its own directory and this directory must be called exactly as the name of the template. For example: If my templates name is myTemplate, I must create a folder called myTemplate and all my templates files are stored inside it. Watch out: Joomla is Case-sensitive, so if the template is named myTemplate its directory name must be exactly the same. In Joomla a template depends on at least two main files: templateDetails.xml and index.php. These files must be called exactly as mentioned because Joomla will be looking for. Watch out: The D (in templateDetails.xml) must be in capital letter. Most of templates have other files or folders, such as: css/template.css, images/logo.png, template_thumbnail.png, js/script.js. However those you can place and name as you want to. The template_thumbnail.png is a small image (usually with 140 pixels wide x 90 pixels high) that shows the look of your template. It will be available in Joomlas administrator area so the user can see how the template seems before apply it. The css/template.css is a/one of the cascading style sheet (CSS) used by the template. Its name and location is optional, so you can name and place it wherever you want to. A template can have more than one CSS file and this is totally fine in Joomla. Feel free to create and organize the styles used by your template as you want to. As well as the templateDetails.xml file, the directory /images is a Joomla standard. It will store all images that youre going to use in your template. The file templateDetails.xml is an xml file that informs to Joomla which are the files that your template is using. All files used by your template must be listed in this file. It also keeps the technical information about your template, such as: author, version, name, date of creation, copyright, and so on. This file is required when installing a template in Joomla environment. See an example:
The index.php file contains the presentation code that displays text, components, and modules. It will be the in charge of loading your website modules, parsing Joomla template data, and handling the primary display. It is a combination of PHP and (X) HTML code and usually looks like this:
Since a template structure can be very tricky and confuse, in this second part were going to do a simple Hello World Joomla template. This is a very simple structure but will help us to understand better how to work with templates inside Joomla. In the end of this article, Im going to show how to install and apply a new template in Joomla. Before starting, lets make some things clear:

You can use any editor you want to; and Make sure your PHP server is on and your Joomla is working.
Create our template folder To begin, lets create our template folder. Create a folder where youre going to store your templates files. Im going to call mine helloworld. Feel free to choose any name you want to, just make sure of naming your template with the same name. In this folder, create a file called index.php. Open this file in your preference editor. Copy the following lines in your index.php. <html> <head> <jdoc:include type=head /> </head> <body> <jdoc:include type=message /> <div class=center align=center>Hello World!</div> <jdoc:include type=modules name=debug /> </body> </html>
This index.php file has a very basic structure. It doesnt even compile the HTML rules, such as DOCTYPE parameter. However lets keep it as simpler as we can so were going to understand better this whole process. Analyzing this code, the first Joomla statement that we find is the <jdoc:include type=head />. This statement inserts your template information into the header. When Joomla finds this kind of statement what basically happens is it changes this statement for a bunch of HTML statements defined within other files, such as:
<title>helloworld</title> <meta name=generator content=Joomla! 2.5 /> <meta name=description content=Simplest template in the Joomla world. /> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <meta name=helloworld content=index, follow /> <meta name=keywords content=hello world, joomla /> <link href=http://localhost/favicon.ico rel=shortcut icon type=image/x-icon/>
The second Joomla statement is <jdoc:include type=message />, which includes any server messages in the post. Usually it doesnt have any message, so no extra content will be added. The final Joomla statement is <jdoc:include type=modules name=debug />. This statement refers to the debug module. Normally this module doesnt display anything. But if your debugging mode is on and you got an error while your website is running you will be able to see the error message describe the execution of the template page on it. To complete the template, lets create its xml file. To meet the standards, it must be called templateDetails.xml and be inside your template folder. As said before, this file contains the template technical information, and list of used files. So open this file in your preference editor. Copy the following lines into it.
<?xml version=1.0 encoding=utf-8?> <install version=1.5 type=template> <name>helloworld</name> <description> Simplest template in the Joomla world. </description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> </files> </install>
Installing a new template in Joomla As any other extension in Joomla, a template can be installed through the Joomla Extension Manager. There you will find three ways to install a new extension: Uploading a Package file, installing from a directory (by default: Joomla/tmp directory) or from a URL. Lets use the first option: Uploading a package file. To install your template: First you must to compact the whole template folder in a Zip file; Second, go to your Joomla administrator area, and then the Extension Manager; and Third, go to the Install tab, push the Choose File, localize your template zip file, and click on the Upload & Install button.
Applying a new template as default Considering that you did everything well and your template was successfully installed, go to Extensions>Template Manager. There youre going to see your template amongst the available ones. Click on the checkbox beside of the desired template and then on Make Default button.
Doing this, your template will be used by your website. Check it out!
User:Rvsjoen/tutorial/Developing a Template/Part 01
< User:Rvsjoen | tutorial/Developing a Template
Developing a Basic Template

Alright, lets get cracking on this awesome adventure towards template independence. Creating a basic template is in reality pretty simple, all we need is two things.

A template manifest A template index file
Creating the index file

This is where it all starts, the "root" of your template so to speak, this file is responsible for rendering a properly structured HTML document. This file will exists in all templates. With your favorite editor, create the following file: index.php
<?php /** * @package * @subpackage * @copyright * @license */ Joomla.Tutorials Template Copyright (C) 2005 - 2010 Open Source Matters, Inc. License GNU General Public License version 2 or later
// No direct access to this file defined('_JEXEC') or die; ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this>language; ?>" lang="<?php echo $this->language; ?>"> <head> <jdoc:include type="head" /> </head> <body> <jdoc:include type="message" /> <jdoc:include type="component" /> </body> </html>
As you can see, this is a very basic PHP file, yet in only a few lines of markup we have accomplished the following things

We have declared the document type to be <!DOCTYPE html> which means that we are creating a HTML5 template. For a complete list of recommended doctypes please see [1] We have enforced our document to conform the XHTML namespace with the xmlns attribute We have included a head in the html document We have included a body in the html document
Pay special attention to the jdoc include tags, these are what makes Joomla! able to insert content into your template. For now, we told Joomla! to include all header-specific information inside the <head> element. We also told Joomla! that we want system messages to appear in the top of the <body> element and that we want to include the component here as well. The component is the main part of a rendered Joomla! page such as an article. There are several other types of jdoc include tags that we will cover later in this tutorial. What is important to know is that whenever you see one of them, it means that Joomla! may or may not insert content in it's location.
Creating the manifest

With your favorite editor, create the following file: templateDetails.xml
<?xml version="1.0" encoding="utf-8"?> <extension version="2.5" type="template" client="site"> <name>helloworld</name> <creationDate>Once upon a time</creationDate> <author>John Doe</author> <authorEmail>john.doe@example.org</authorEmail> <authorUrl>http://www.example.org</authorUrl> <copyright>Copyright Info</copyright> <license>License Info</license> <version>0.0.1</version> <description>Description of the Hello World!</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> </files> </extension>
Installation and Testing

Before testing your shiny new template you have to install it. In Joomla! there are two ways of doing that, either by packaging the extension into an installable zip package or by using the discovery method. Both methods are described below but I recommend using the packaged zip file as a beginner because it is more hostile towards errors especially in the XML manifest.
Installing your template
If you have used Joomla before reading this tutorial, you have noticed that extensions are installed using a compressed file containing all the things which are needed for installing and uninstalling them. A new feature made available in Joomla! 1.6 is "discover." That means you can place the files in the correct places inside your Joomla! installation (The proper file path for this module will be in templates/helloworld within the Joomla! root), and the "Discover" option within the extension manager will install it, when selected.
Packaging an installation zip file
Create a compressed file of your extension directory using the structure shown in the file listing section of this page or download the provided installable package. When you have this package, install it using the extension manager.
Adding a stylesheet
Alright, time has come to add some styling to our template. After all, without some proper styling our (yet to be) awesome template is just another blob of nasty markup. Let's start with a really simple stylesheet, doing nothing except setting the background color of the whole document. With your favorite editor, create the following file: css/styles.css
html, body { background: #ccc; }
Now that we have created our basic stylesheet we also need to tell the template to load it, we accomplish this by adding a style tag to the document header. With your favorite editor, edit the following file: index.php
<?php /** * @package * @subpackage * @copyright * @license */ Joomla.Tutorials Template Copyright (C) 2005 - 2010 Open Source Matters, Inc. License GNU General Public License version 2 or later.
// No direct access to this file defined('_JEXEC') or die; ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this>language; ?>" lang="<?php echo $this->language; ?>"> <head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" /> </head> <body> <jdoc:include type="message" /> <jdoc:include type="component" /> </body> </html>
In the style tag we are using some variables, these are automatically provided by Joomla! for convenience and can be used to refer to the base url and the template name respectively.
The last step in adding this stylesheet to our template is to make sure that it is copied into the correct location when the template is installed. Since the stylesheet lives in the css folder of our template all we have to do is specify a <folder tag with the css folder. With your favorite editor, edit the following file: templateDetails.xml
<?xml version="1.0" encoding="utf-8"?> <extension version="2.5" type="template" client="site"> <name>helloworld</name> <creationDate>Once upon a time</creationDate> <author>John Doe</author> <authorEmail>john.doe@example.org</authorEmail> <authorUrl>http://www.example.org</authorUrl> <copyright>Copyright Info</copyright> <license>License Info</license> <version>0.0.1</version> <description>Description of the Hello World!</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <folder>css</folder> </files> </extension>
Adding module positions

With your favorite editor, edit the following file: index.php
<?php /** * @package * @subpackage * @copyright * @license */ Joomla.Tutorials Template Copyright (C) 2005 - 2010 Open Source Matters, Inc License GNU General Public License version 2 or later.
// No direct access to this file defined('_JEXEC') or die; ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this>language; ?>" lang="<?php echo $this->language; ?>"> <head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this>baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <jdoc:include type="modules" name="header" /> </div> <div id="left">
<jdoc:include type="modules" name="left" /> </div> <div id="main"> <jdoc:include type="message" /> <jdoc:include type="component" /> </div> <div class="clr"></div> <div id="footer"> <jdoc:include type="modules" name="footer" /> </div> </div> </body> </html>
Once we have added the module positions with the accompanying div elements for use in styling, we can use CSS to create the layout. In this example we are creating a simple 2-pane layout with a header and footer. With your favorite editor, edit the following file: css/styles.css
html, body { background: #ccc; } div#container { margin: 0 auto; background: red; width: 960px; } div#header { background: green; height: 160px; } div#footer{ background: blue; height: 80px; } div#main{ background: yellow; min-height: 320px; width: 800px; float: left; } div#left{ background: orange; width: 160px; float: left; } .clr { clear: both; }
The CSS code itself is not the important part here and the result will look quite ugly, the point is to get a basic idea on how module positions work and in order to be able to do that we need a basic template structure. With your favorite editor, edit the following file: templateDetails.xml
<?xml version="1.0" encoding="utf-8"?> <extension version="2.5" type="template" client="site"> <name>helloworld</name> <creationDate>Once upon a time</creationDate> <author>John Doe</author> <authorEmail>john.doe@example.org</authorEmail> <authorUrl>http://www.example.org</authorUrl> <copyright>Copyright Info</copyright> <license>License Info</license> <version>0.0.1</version> <description>Description of the Hello World! template...</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <folder>css</folder> </files> <positions> <position>header</position> <position>footer</position> <position>left</position> </positions> </extension>
Adding translation
So, we would like our template to support translation, which essentially means that instead of hard-coding strings, we would like the strings to be read from translation files. This makes it very easy to provide multiple translations since all that has to be done to change the language is to read a different set of language files. Create the following file: language/en-GB/en-GB.tpl_helloworld.ini
TPL_HELLOWORLD="Hello World!" TPL_HELLOWORLD_XML_DESCRIPTION="Hello World! template description"
As you can see, language strings are namespaced. This is a very good practice for avoiding that strings override each other. As an example these strings start with TPL_HELLOWORLD to indicate that they belong to our template. In order to provide translation during the installation process, in the extension manager and in the menus, another language file is required in the backend. The difference between these two files can be daunting at first, but usually the sys.ini contains a lot less translation strings and this file is loaded in scenarios where the loaded component is not com_helloworld itself, but minimal translation is still needed.
Create the following file: language/en-GB/en-GB.tpl_helloworld.sys.ini

TPL_HELLOWORLD="Hello World!" TPL_HELLOWORLD_XML_DESCRIPTION="Hello World! template description" With your favorite editor, edit the following file templateDetails.xml <?xml version="1.0" encoding="utf-8"?> <extension version="2.5" type="template" client="site"> <name>TPL_HELLOWORLD</name> <creationDate>Once upon a time</creationDate> <author>John Doe</author> <authorEmail>john.doe@example.org</authorEmail> <authorUrl>http://www.example.org</authorUrl> <copyright>Copyright Info</copyright> <license>License Info</license> <version>0.0.1</version> <description>TPL_HELLOWORLD_XML_DESCRIPTION</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <folder>css</folder> <folder>language</folder> </files> <positions> <position>header</position> <position>footer</position> <position>left</position> </positions> </extension>
Adding parameters
With your favorite editor, edit the following file: templateDetails.xml
<?xml version="1.0" encoding="utf-8"?> <extension version="2.5" type="template" client="site"> <name>TPL_HELLOWORLD</name> <creationDate>Once upon a time</creationDate> <author>John Doe</author> <authorEmail>john.doe@example.org</authorEmail> <authorUrl>http://www.example.org</authorUrl> <copyright>Copyright Info</copyright> <license>License Info</license> <version>0.0.1</version> <description>TPL_HELLOWORLD_XML_DESCRIPTION</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <folder>css</folder> <folder>language</folder> </files> <positions> <position>header</position> <position>footer</position> <position>left</position> </positions>
<config> <fields name="param"> <fieldset name="advanced"> <field name="backgroundcolor" type="text" default="" label="TPL_HELLOWORLD_FIELD_BACKGROUNDCOLOR_LABEL" description="TPL_HELLOWORLD_FIELD_BACKGROUNDCOLOR_DESC" /> <field name="templatewidth" type="list" label="TPL_HELLOWORLD_FIELD_WIDTH_LABEL" description="TPL_HELLOWORLD_FIELD_WIDTH_LABEL" > <option value="fixed"> TPL_HELLOWORLD_WIDTH_FIXED </option> <option value="fluid"> TPL_HELLOWORLD_WIDTH_FLUID </option> </field> </fieldset> </fields> </config> </extension>
Giving the Front Page a different style from other pages

There are several ways to differentiate your Front Page from other pages in your website.
Assigning a Different Template to the Front Page
In the Administrator site, you specify which template is "Default" for your site. However, you can assign a template other than the default to any menu item you like, including the Front Page. Go to Extensions -> Template Manager. Determine which template is currently your default by looking for the star icon beside it. Now click the name of one of the OTHER templates. In the Menu Assignment box, change the radio button from "Never" to "Select from List". You can now chose one or more pages from the tree view that you would like to apply this template to (for example, your mainmenu's Home item). Anything not selected here will still use your default template.
Assigning Modules to the Front Page
Perhaps the simplest way to make your Front Page different from other pages in your site is to create modules and assign them to the front page only. In the Administrator site, go to Extensions -> Module Manager and click "New". Select the type module you would like to appear on your home page only. Depending on the module you select, there are additional properties you will have to set. One of the most important is to select the position you would like this module to appear in. But to make it appear on the home page only, you will be using the "Menu Assignment" section on the bottom left of the Module properties. Select "Select Menu Item(s) from the List" from the radio buttons at the top of the section. Then select ONLY the "Home" item from your menu structure, leaving all the other deselected. Click "Save" at the top right. No other special or technical knowledge is required. Go to your site and verify that your module only renders on the front page.
Creating Custom CSS for your Front Page Assigning CSS on the component
Another easy way to add styling elements to your Front Page only is to use the Page Class Suffix property on the menu item which points to your home page. In the Administrator Site, go to Menus -> Main Menu. I will assume that your home page link is here. Click on your home page menu item to open its property page. In the right-hand Parameters slider, click Parameters (System) to find the Page Class Suffix parameter. the text you enter here will be appended to the CSS class names on your Front Page ONLY. This will allow you to create style sheets which affect the styles on only that one page. A knowledge of CSS is required to use this technique. For example, if you type "_frontpage" as the Page Class Suffix and then click OK, the Front Page's title will be inserted into a a div tag like this:
<div class="componentheading_frontpage">{home page title goes here}</div>
You can then write a CSS rule which styles the componentheading_frontpage differently than the headings on every other page in your site.
Assigning CSS style on the body element in your template
You can also adding CSS style to your body element in the template. Edit the file "index.php" in your default template directory
<?php $active = JFactory::getApplication()->getMenu()->getActive(); ?> <body class="<?php echo $active->alias; ?> ">
The alias of your active item will be inserted as a class on your body: <body class="home "> Then, you are able to write CSS rule which style the component differently on the body.home page.
body rightcolumn { /* rule for every page */ } body.home rightcolumn { /* different rule for homepage */ }
Create or Update a Frontpage Blog Layout Override
You can create a layout override to affect the way your Frontpage Blog content renders. In your Joomla! site, go to \templates\{your template}\html\com_content\frontpage. If that directory does not exist, create the necessary directories. If no files exist in that directory, you should copy the Joomla! Core files as a starting point. Take the files that end with ".php" from \components\com_content\views\frontpage\tmpl and copy them into \templates\{your template}\html\com_content\frontpage. Once the files are there, you can edit the files to create specialized or different HTML and/or styling information. Knowledge of PHP, HTML, and CSS are required for this more advanced technique.
Customising the way modules are displayed

This article is for Joomla! CMS Version(s)
Counting modules in a given module position

The countModules method can be used within a template to determine the number of modules enabled in a given module position. This is commonly used to include HTML around modules in a certain position only if at least one module is enabled for that position. This prevents empty regions from being defined in the template output and is a technique sometimes referred to as collapsing columns. For example, the following code includes modules in the 'user1' position only if at least one module is enabled for that position.
<?php if ($this->countModules( 'user1' )) : ?> <div class="user1"> <jdoc:include type="modules" name="user1" style="rounded" /> </div> <?php endif; ?>
The countModules method can be used to determine the number of Modules in more than one Module position. More advanced calculations can also be performed. The argument to the countModules function is normally just the name of a single Module position. The function will return the number of Modules currently enabled for that Module position. But you can also do simple logical and arithmetic operations on two or more Module positions. For example, to determine the total number of Modules enabled in the 'user1' and 'user2' positions together, you can use the function call:
$this->countModules( 'user1 + user2' );
Although the usual arithmetic operators, +. -. *, / will work as expected, these are not as useful as the logical operators 'and' and 'or'. For example, to determine if the 'user1' position and the 'user2' position both have at least one Module enabled, you can use the function call:
$this->countModules( 'user1 and user2' );
Careful: A common mistake is to try something like this:

$this->countModules( 'user1' and 'user2' );
This is pretty much guaranteed to always return false regardless of the number of Modules enabled in either position, so check what you are passing to countModules carefully.
You must have exactly one space character separating each item in the string. For example, 'user1+user2' will not produce the desired result as there must be a space character either side of the '+' sign. Also, 'user1 + user2' will produce a PHP error message as there is more than one space separating each element. Example: The user1 and user2 Module positions are to be displayed in the region, but you want the region to not appear at all if no Modules are enabled in either position.
<?php if ($this->countModules( 'user1 or user2' )) : ?> <div class="rightcolumn"> <jdoc:include type="modules" name="user1" style="xhtml" /> <jdoc:include type="modules" name="user2" style="xhtml" /> </div> <?php endif; ?>
Example: The user1 and user2 Module positions are to be displayed side-by-side with a separator between them. However, if only one of the Module positions has any Modules enabled then the separator is not needed. Furthermore, if neither user1 or user2 has any Modules enabled then nothing is output.
<?php if ($this->countModules( 'user1 or user2' )) : ?> <div class="user1user2"> <?php if ($this->countModules( 'user1' )) : ?> <jdoc:include type="modules" name="user1" style="xhtml" /> <?php endif; ?> <?php if ($this->countModules( 'user1 and user2' )) : ?> <div class="greyline"></div> <?php endif; ?> <?php if ($this->countModules( 'user2' )) : ?> <jdoc:include type="modules" name="user2" style="xhtml" /> <?php endif; ?> </div> <?php endif; ?>
Notice how the first countModules call determines if there any Modules to display at all. The second determines if there are any in the 'user1' position and if there are it displays them. The third call determines if both user1 and user2 positions have any Modules enabled and if they do then if provides a separator between them. Finally, the fourth call determines if there are any enabled Modules in the 'user2' position and displays them if there are any.
Collapsing columns
A common requirement when designing web pages in Joomla! is for a Module position to be removed when no Modules are enabled in that position so that the space is available for other page elements. The region removed is referred to as a "collapsed column". This can be achieved using the countModules function. For example, if you want to include a "user1" module position only if there are modules enabled in that position, then you could use this code:
<?php if ($this->countModules( 'user1' )) : ?> <div class="user1"> <jdoc:include type="modules" name="user1" style="xhtml" /> </div> <?php endif; ?>
Notice that the <jdoc:include /> tag and its surrounding <div> are only included if the countModules call returns a non-zero value (the PHP if statement treats zero as being false and any non-zero value as being true. Sometimes you may want a pair of module positions to collapse either singly or together.
<?php if ($this->countModules( 'user1 or user2' )) : ?> <div class="user1user2"> <?php if ($this->countModules( 'user1' )) : ?> <jdoc:include type="modules" name="user1" style="xhtml" /> <?php endif; ?> <?php if ($this->countModules( 'user2' )) : ?> <jdoc:include type="modules" name="user2" style="xhtml" /> <?php endif; ?> </div> <?php endif; ?>
Notice how the region (which is styled by the CSS class "user1user2") is only output if either 'user1' or 'user2', or both, have at least one Module enabled. If you want a divider to separate the two Module positions then you must be careful to only output the divider if both Module positions have Modules enabled in them. For example,
<?php if ($this->countModules( 'user1 or user2' )) : ?> <div class="user1user2"> <?php if ($this->countModules( 'user1' )) : ?> <jdoc:include type="modules" name="user1" style="xhtml" /> <?php endif; ?> <?php if ($this->countModules( 'user1 and user2' )) : ?> <div class="divider"></div> <?php endif; ?> <?php if ($this->countModules( 'user2' )) : ?> <jdoc:include type="modules" name="user2" style="xhtml" /> <?php endif; ?> </div> <?php endif; ?>
See also

PHP if statement PHP else statement PHP elseif statement Alternative syntax for PHP control structures Operators for use with the countModules function
Creating rounded corners

Introduction
Using (X)HTML and CSS, it is easy to place rectangular borders around parts of a web page. Usually, this is done by incorporating the code for that part of the web page in <div>...</div> tags (or similar), and then applying a border to the <div> using the CSS border property. However, it is not currently possible to create a non-rectangular border using just (X)HTML and CSS. (Non-rectangular borders are referred to in this tutorial as 'rounded corners', since that is the most common implementation. However, the corners do not need to be rounded - this technique can be used to create many different shapes and styles of border.) In order to overcome the limitations of CSS borders, we can use one or more images to provide the border appearance. This is very easy to do when you know how big your <div> is going to be - you simply create an image of the correct size showing the border you want and set it as the background for your <div>. In general, however, we will want web page elements to change their dimensions (width, height, or both) according to their contents. This is particularly true for template designers using a CMS such as Joomla! - if we don't know what content is going to be placed on the page, we can't possibly know what size the <div> needs to be! The main focus of this tutorial is therefore on creating rounded corners that are 'fluid' - that is, that can resize to accommodate different sizes of contents.
The theory
In order to avoid the problems described above, we use separate images to provide the four corners of our rounded box. In order to ensure that the border of our rounded box is always continuous, these images need to be big enough to completely fill our container at the maximum permissible size. To provide our rounded box at sizes below this maximum, we place the images into four layers, overlapping one another, to create the illusion that the border of our rounded box is unbroken.
Rounded corners 1. Firstly, a large image containing the left-hand and top borders, and the top-left rounded corner, is placed at the top left corner of our container <div> (outlined in red for clarity). The image is bigger than required for this container, and so extends beyond the bottom and right-hand edges; this is shown in partial transparency in the animation to illustrate the process, but would not be seen in practice. 2. Next, a thin horizontal image containing the bottom border and lower-left rounded corner is placed at the bottom left corner of the the container <div>, on top of the first image. This image has been given a thin border in a darker pink to illustrate the process; this border would not normally be used. Again, it can be seen that the image extends beyond the right-hand edge of the container. 3. Thirdly, a thin vertical image containing the right-hand border and top-right rounded corner is placed at the top right corner of the container, on top of the second image. 4. Finally, a square image containing just the lower-right rounded corner is placed at the lowerright corner of the container. Putting it into practice - creating the images
To create the images we need, we will use the open source vector drawing program Inkscape. Unlike raster drawing software (such as the GIMP), which deals in individual pixels, vector drawing software works with geometric shapes. This makes it much easier to create rounded corners having exactly the geometry we want. We will use Inkscape to create a simple rounded box with a pink foreground and a white background, and a drop shadow at the lower right corner. This is the same box as shown in the animation above.
1. Create a new Inkscape image To begin, we need to decide what maximum size we want for our box. As stated above, this will determine the size of image we need to use. Since a larger image will have a greater file size, and hence cause a website to load more slowly, there is no point making the image any bigger than is necessary. For the purposes of this example, we will use a maximum size of 800px wide by 600px high. We therefore create a new document in Inkscape having these dimensions. The document dimensions are set by choosing File > Document properties from the menu, and entering the correct values in the dialogue box that appears. Also in this dialogue box, we need to change the default background from transparent to white (ffffffff). After closing the dialogue, we will change the name of the default layer (go to Layer > Rename layer...) to "Rounded rectangle".
2. Draw a rounded rectangle We will leave a 5px margin around our image. In addition, we will need 5px width of shadow on the right-hand and bottom edges of our rounded box. We therefore need to draw a rounded rectangle with a width of 785px and a height of 585px. We will also give the rounded corners a 5px radius. To do this, select the rectangle tool from the toolbar at the left, and left-click-drag anywhere within the blank document. The exact size of rectangle you draw doesn't matter at this stage. Then go to the options toolbar and enter the following settings: W:783.00 H:583.00 Rx:5.000 Ry:5.000 px. Why the difference in sizes? These dimensions don't include the width of the border. We are going to give our rectangle a 2px border, which will therefore increase each dimension by 2px.
3. Set the fill colour
and the the border width
Next, we need to adjust that border, and set the colour of our rectangle. With the rectangle selected, go to Object > Fill and Stroke on the menu bar, or press Shift + Ctrl + F, to bring up the Fill and Stroke dialogue. Under the 'Fill' tab, choose the colour of the foreground fill. We are going to use the hex colour #ffd7eb, so enter 'ffd7ebff' in the RGBA input. (The final 'ff' hex value sets the alpha transparency level for the fill - in our case, completely opaque). Under the 'Stroke paint' tab we set the border colour. In our case, we want a black border, so we can leave the RGBA input at the default value of 000000ff. Finally, under the 'stroke style' tab, we set the stroke (border) width to be 2.000px.
4. Set the position of the rectangle
We now have our rectangle, but it is not in the correct location. Inkscape measures positions from the lower left corner of the document, so we need to place our rectangle at x=5 and y=10. Choose the selection tool from the toolbar at the left, left-click anywhere inside the rounded rectangle, and enter the position values in the options toolbar.
5. Hide the current layer
6. Create a new layer Next, we need to create a new layer to hold the drop shadow. First, hide the original layer ("Rounded rectangle") by clicking the eye icon at the bottom of the main window. Then, go to Layer > Add Layer... on the menu bar, and create a new layer named "Shadow" below the current layer. We can then create another rounded box in this layer. Make this one 785px wide, 585px high, with corner radii of 5px, and located at x=10 and y=5. In the 'Fill and Stroke dialogue, set the fill RGBA to '00000081', and the blur slider to '0.6'. On the 'stroke paint' tab, select the 'no paint' icon. This will produce a rounded rectangle in a grey colour, partially transparent, and with slightly blurred edges.
7. The complete image! Finally, unhide the "Rounded rectangle" layer, by selecting it in the drop-down box at the bottom of the main window, and left-clicking the eye icon again. Congratulations - you can now see how your rounded box will look! You may want to save your image at this point as an Inkscape .svg file so that you can easily come back and change it later. 8. Now we need to create the four separate images we will need, and save them in a web format. Inkscape also makes this very easy - simply go to File > Export Bitmap... and select the 'Custom' button in the dialogue box. We can export the relevant parts of our image by entering the coordinates in the x0/y0 and x1/y1 boxes. Remember that all coordinates are measured from the
bottom left corner! The best place to cut the image is just before the curve of the rounded corners on the bottom and right-hand edges. We might therefore use the following settings: Image Top left Top right Bottom left 0 x0 x1 785 y0 y1
15 600 15 600 0 0 15 15
785 800 0 785
Bottom right 785 800
Putting it into practice - Editing your template
To implement the rounded corners on a Module, we will use the 'rounded' Module chrome, by including the following <jdoc /> statement:
<jdoc:include type="modules" name="POSITION" style="rounded" />
This creates the following code in the final web page:

<div class="module_menu"> <div> <div> <div> <h3>Main Menu</h3> <ul class="menu"> <li></li> </ul> </div> </div> </div> </div>
The four nested <div>s give us the layers we need for our four images. We can use the class name of the outer <div> to ensure that we really are dealing with the correct <div>s, and then use the nesting relationship to apply the correct image to each layer. This is most easily done using an external style sheet, having the following rules:
div.module_menu { background: url(../images/rounded_topleft.png) 0 0 no-repeat; padding: 0; } div.module_menu div { background: url(../images/rounded_bottomleft.png) 0 100% no-repeat; margin: 0; border: 0; } div.module_menu div div{ background: url(../images/rounded_topright.png) 100% 0 no-repeat; } div.module_menu div div div { background: url(../images/rounded_bottomright.png) 100% 100% no-repeat; }
The padding, margin and border are needed to ensure that each <div> completely fills the one above. The image URLs are specified relative to the CSS file location. There is just one more slight problem to be aware of: CSS rules are not exhausted, they are only overridden. This means that, if our Module content includes a <div>, these CSS rules will also apply to that <div> (since it is a <div> inside a <div> inside a <div> inside a <div class="module_menu"> - regardless of the fact that there was an intervening <div>). To overcome this, we need to add another, more specific rule:
div.module_menu div div div div{ background: none; }
And that's it - happy coding!
What is Module chrome?

Module chrome allows template designers to have a certain amount of control over the way the output from a Module is displayed in their template. Essentially, it consists of a small amount of predefined HTML which is inserted before, after, or around the output from each module, and which can then be styled using CSS. Module chrome is commonly used to provide borders around modules, especially with rounded corners, but it can be used for much more than that. Module chrome is determined by using the 'style' attribute in the statement calling the module. For example, the following statement may be used in the index.php file of a template to insert the Modules in the 'user1' position and apply the 'custom' Module chrome:
<jdoc:include type="modules" name="user1" style="custom" />
It can be seen that the same Module chrome is applied to every Module in that position - in other words, if you want to have two Modules in a column, but want them to have different Module chrome, then they would need to be set up as two different 'positions' (e.g. 'user1' and 'user2'). The standard Joomla! 1.5+ package includes six default Module chrome styles. However, the flexibility of the template system means that you are not limited to these styles - it's very easy to create as many new styles as you want! Note that this example includes class additions because the examples are taken using mod_mainmenu. The suffix "_menu" to the div class and the "menu" class on the ul tag are not present with other modules.
Comparison of the Joomla! 1.5/1.6 standard Module chromes Style Output

<div class="module_menu"> <div> <div> <div> <h3>Main Menu</h3> <ul class="menu"> <li></li> </ul>
table
horz
<table cellpadding="0" cellspacing="0" class="moduletable_menu"> <tr> <th valign="top">Main Menu</th> </tr> <tr> <td> <ul class="menu"> <li></li> </ul> </td> </tr> </table> </td> </tr> </table>
xhtml
<div class="moduletable_menu"> <h3>Main Menu</h3> <ul class="menu"> <li></li> </ul> </div>
outline
<div class="mod-preview"> <div class="mod-previewinfo">left[outline]</div> <div class="mod-preview-wrapper"> <ul class="menu"> <li> </div>
Custom chrome attributes
It is also possible to pass further attributes into the Module chrome function using the same <jdoc:include /> statement that sets the Module chrome. These additional attributes can be anything you like, and are stored in the $attribs array. Take the following example Module chrome function:
<?php function modChrome_custom( $module, &$params, &$attribs ) { if (isset( $attribs['headerLevel'] )) { $headerLevel = $attribs['headerLevel']; } else { $headerLevel = 3; } if (isset( $attribs['background'] )) { $background = $attribs['background']; } else { $background = 'blue'; } echo '<div class="' .$params->get( 'moduleclass_sfx' ) .'" >'; if ($module->showtitle) { echo '<h' .$headerLevel .'>' .$module->title .'</h' .$headerLevel .'>'; } echo echo echo echo } ?> '<div class="' .$background .'">'; $module->content; '</div>'; '</div>';
You would then set the values for background and headerLevel in the <jdoc:include /> statement as shown below. If no values are set, the attributes default to 'blue' and '3' respectively.
Passing attributes to Module chrome from <jdoc:include />

<jdoc:include /> statement
Output
<div> <h3></h3> <jdoc:include type="modules" name="user1" <div class="blue"> style="custom" />  </div> </div> <div> <h3></h3> <jdoc:include type="modules" name="user1" <div class="green"> style="custom" background="green" />  </div> </div> <div> <h1></h1> <jdoc:include type="modules" name="user1" <div class="yellow"> style="custom" headerLevel="1"  background="yellow" /> </div> </div>
Further information about passing attributes to Module chrome can be found in jtopic:115953.

Creating A Template For Joomla 25

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Creating A Template For Joomla 25

Uploaded by

Copyright:

Available Formats

Creating a Template for Joomla 2.

Developing a Basic Template

A template manifest A template index file

Creating the index file

Creating the manifest

Installation and Testing

Packaging an installation zip file

Adding module positions

Create the following file: language/en-GB/en-GB.tpl_helloworld.sys.ini

Giving the Front Page a different style from other pages

Create or Update a Frontpage Blog Layout Override

Customising the way modules are displayed

Counting modules in a given module position

Careful: A common mistake is to try something like this:

Creating rounded corners

3. Set the fill colour

and the the border width

4. Set the position of the rectangle

5. Hide the current layer

785 800 0 785

Bottom right 785 800

Putting it into practice - Editing your template

This creates the following code in the final web page:

And that's it - happy coding!

What is Module chrome?

Comparison of the Joomla! 1.5/1.6 standard Module chromes Style Output

rounded (default for menus on milkyway)

<ul class="menu"> <li></li> </ul>

Applying custom Module chrome

Custom chrome attributes

Passing attributes to Module chrome from <jdoc:include />

You might also like