Scribd
Upload
2 views

Lecture_10_Modifying and installing your own template

This document provides step-by-step instructions for modifying and installing a custom Joomla template. It includes details on copying and renaming the template, modifying the index.php and templateDetails.xml files, and best practices for organizing the code. The document emphasizes the use of PHP functions for rendering template positions and the importance of adhering to Joomla's file naming conventions.

Uploaded by

Arnold M. Narte
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Lecture_10_Modifying and installing your own template

This document provides step-by-step instructions for modifying and installing a custom Joomla template. It includes details on copying and renaming the template, modifying the index.php and templateDetails.xml files, and best practices for organizing the code. The document emphasizes the use of PHP functions for rendering template positions and the importance of adhering to Joomla's file naming conventions.

Uploaded by

Arnold M. Narte
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

Modifying and installing your

own template
• Copy the template jtoo1_j16
• Rename to MyTemplate
• Modify the index.php using notepad with
these details and save.
Add the bold details to index.php
<?php if ($this->countModules('left')) : ?>
<div id="leftbar-w">
<div id="sidebar">
<jdoc:include type="modules" name="left" style="jaw" />
</div>
</div>
<?php endif; ?>
</div>
<?php if ($this->countModules('center')) : ?>
<div id="center">
<jdoc:include type="modules" name="center" style="jaw" />
</div>
<?php endif; ?>
• Open templateDetails.xml add this detail.
• <position>center</position>
• Change the following details to your details.

• and save
• <name>jt001_j16</name>
• <version>1.6.0</version>
• <creationDate>January 15, 2011</creationDate>
• <author>JoomlaThemes.co</author>
<authorEmail>[email protected]
• </authorEmail>
• <authorUrl>http://joomlathemes.co</authorUrl>
• <copyright>Copyright 2010 -
JoomlaThemes.co</copyright>
• <h1>JoomlaThemes.co - JT001 - Joomla 1.6</h1>
• <img
src="../templates/jt001_j16/template_thumbnail.p
ng" align="left" hspace="10" style="padding-
right:10px;"/>
• <b>Free Joomla 1.6 Template developed by
<a target="_blank"
href="http://joomlathemes.co">JoomlaThemes</a
>
• Save
• Compress your folder in .zip format
• Install your template.
Best Practices
.. Do not place any standard XHTML
tags (h1, h2, p, and so on) in the
index.php file. Everything will be
styled using a CSS stylesheet. It is a
pure CSS layout. To help you style
your content, you will find a list of the
Joomla core class styles at the end of
this chapter. These classes must be
styled in your CSS, or they will use a
browser’s default styling.
.. When creating your index.php file,
organize your div containers in a logical
order.
• This is the !DOCTYPE declaration
• required by all sites that tells the
• browser what DOCTYPE is being used
• for the HTML code in this document.
• The next code statement contains the
• PHP function used by Joomla to identify
• which language to use on this site. It
• is pulled from the global configuration
• page in Joomla.
• All of this code is placed before the
• <head> tag
• Between the <head> </head> tags, type
• <jdoc:include type="head" />.
• The jdoc:include (object:method)
• is the primary method to call all the
• objects used in Joomla.
• <link rel="stylesheet" href="<?php
• ➝ echo $this->baseurl;?>/templates
• ➝/<?php echo $this->template;?>
• ➝/css/template.css" media="screen"
• ➝ type="text/css" />
• If your template contains more than one
• stylesheet, repeat this line and replace
• the /template.css filename with the
• name of the other CSS file.
• The PHP functions render your Joomla
• template positions. Your positions are
• built using PHP jdoc:include statements.
• Without these functions, the template will
• not work in Joomla. The jdoc method tells
• Joomla what to place in the positions used
• by your template.
• jdoc:include: The object:method function
• that tells Joomla to display the type
• being called.
• type="modules": Tells Joomla what
• type of object to include: head, module,
• or component.
name="location": The head and
component functions do not include
a location, as this is defined by the
system. The head is the metadata to be
displayed dynamically on each page.
A component can be called only into
the main body of the page. A module
can be placed into any location you
specify—for example, left, right, top,
bottom, user1, and so on.
style="optional": The style call is
optional and applies only to modules.
You can create your own styles to use—
such as xhtml, rounded, container, or
none—or leave off the style statement
completely. This is an advanced method
and won’t be covered in this book.
• <jdoc:include type="component" />
• The main content area is not a position
• you can use for modules. It used
• to display components. Remember that
• content, categories, and articles are
• components. Because of this, no name
• is required
• <?php if ($this->countModules
• ➝ ('toolbar')): ?>
• Joomla reads the PHP if function, and
• if a module is assigned to this position,
• Joomla renders it. If no modules are
• assigned to this position, Joomla ignores
• the position and moves on to display the
• next position that contains content.
• <?php endif; ?>
• to end the PHP function. You can place
• any other if or else if statements
• between these functions. Make sure
• that the closing php endif statement is
• after the closing div for the position.
• The templateDetails.xml file is organized
• into six areas:
• n Joomla version
• n Template and designer details
• n List of files and folders
• n List of positions
• n List of images
• n List of parameters (optional)
XML and XHTML files are case-sensitive.
It is best practice to use only lowercase when
naming images and files. The one exception
is the templateDetails.xml file, as this is the
required filename used by Joomla.

You might also like