Actions

User

Difference between revisions of "Rvsjoen/tutorial/Developing a Template/Part 02"

From Joomla! Documentation

< User:Rvsjoen‎ | tutorial/Developing a Template
(Part 02 - Adding styles and scripts)
m (Part 02 - Adding a stylesheet)
Line 1: Line 1:
 
= Part 02 - Adding a stylesheet =  
 
= Part 02 - 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.
+
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.
 
+
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
 
With your favorite editor, create the following file

Revision as of 05:53, 16 April 2012

Contents

Part 02 - 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     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

Testing your template

For details on how to install the template into your Joomla! site, refer to the information provided in Part 01.

Download this part

Articles in this series

This tutorial is supported by the following versions of Joomla!

Joomla 2.5