User

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

From Joomla! Documentation

< User:Rvsjoen‎ | tutorial/Developing a Template
m
Line 1: Line 1:
−
= Part 02 - Adding styles and scripts =  
+
= 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.
 +
 +
With your favorite editor, create the following file
 +
 +
<span id="css/styles.css">
 +
'''<tt>css/styles.css</tt>'''
 +
<source lang="css">
 +
html, body {
 +
    background: #ccc;
 +
}
 +
</source>
 +
</span>
 +
 +
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
 +
 +
<span id="index.php">
 +
'''<tt>index.php</tt>'''
 +
<source lang="php" highlight="18">
 +
<?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>
 +
</source>
 +
</span>
 +
 +
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 <code><folder</code> tag with the '''css''' folder.
 +
 +
With your favorite editor, edit the following file
 +
 +
<span id="templateDetails.xml">
 +
'''<tt>templateDetails.xml</tt>'''
 +
<source lang="xml" highlight="15">
 +
<?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>
 +
</source>
 +
</span>
  
 
== File listing ==  
 
== File listing ==  

Revision as of 05:53, 16 April 2012

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

Joomla 2.5

Retrieved from "https://docs.joomla.org/index.php?title=User:Rvsjoen/tutorial/Developing_a_Template/Part_02&oldid=66513"