Rvsjoen/tutorial/Developing a Template/Part 02
From Joomla! Documentation
< User:Rvsjoen | tutorial/Developing a Template
Adding a stylesheet[edit]
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 Joomla.Tutorials
* @subpackage Template
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/
// 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! template...</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
</files>
</extension>
File listing[edit]
Testing your template[edit]
For details on how to install the template into your Joomla! site, refer to the information provided in Part 01.
Download this part[edit]
Articles in this series[edit]
This tutorial is supported by the following versions of Joomla!
