Creating a Template for Joomla
2.5http://www.grimmster.com/development/creating-a-template-for-joomla-2-5-part-1For
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 StructureIf
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
folderTo 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.
Hello World!
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 . 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:helloworld
The second Joomla statement is , 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 . 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.
helloworld Simplest template in the Joomla world. index.php
templateDetails.xml
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 defaultConsidering 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 TemplateDeveloping 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
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: {home
page title goes here} 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
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.
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.
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 columnsA 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:
Notice that the tag and its surrounding 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.
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,
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 cornersIntroductionUsing (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 ... tags (or similar), and then applying a border
to the 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 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 . 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 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
theoryIn 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 corners1. 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 (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 , 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 lower-right
corner of the container. Putting it into practice - creating the
imagesTo 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 layerNext, 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 x0 x1 y0 y1
Top left 0 785 15 600
Top right 785 800 15 600
Bottom left 0 785 0 15
Bottom right 785 800 0 15
Putting it into practice - Editing your templateTo implement the
rounded corners on a Module, we will use the 'rounded' Module
chrome, by including the following statement:
This creates the following code in the final web page:
Main Menu
The four nested s give us the layers we need for our four
images. We can use the class name of the outer to ensure that we
really are dealing with the correct 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
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 ,
these CSS rules will also apply to that (since it is a inside a
inside a inside a - regardless of the fact that there was an
intervening ). 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:
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 Appearance
rounded(default for menus on milkyway) Main Menu
none
table Main Menu
horz Main Menu
xhtml Main Menu
outline left[outline]
Note that the Module chrome doesn't necessarily change the
appearance all that much - this depends on the CSS used in the
template. For example, the 'none' and 'horz' chromes look very
similar, although the underlying HTML code is very different.
Applying custom Module chromeTo define custom Module chrome in
your template you need to create a file called modules.php in your
template html directory. For example, this might be
PATH_TO_JOOMLA/templates/TEMPLATE_NAME/html/modules.php. In this
file you should define a function called modChrome_STYLE where
'STYLE' is the name of your custom Module chrome. This function
will take three arguments, $module, &$params, and
&$attribs, as shown:
Within this function you can make use of any of the available
Module properties (i.e. the fields in the jos_modules table in the
Joomla! database on your server) for that Module, but the main ones
you are likely to need are $module->content,
$module->showtitle and $module->title. $module->showtitle
is a Boolean variable, so is either true (when the Module title
should be shown) or false (when it shouldn't be shown).
$module->content and $module->title will return the main
Module content and the Module title respectively. The function is a
normal PHP function and so can use any regular PHP code. One common
example is to use an if statement to check the value of
$module->showtitle, and then include the title or not
accordingly:
The Module parameters are accessed using the $params object. For
example, it is possible to assign a Module class suffix to a Module
in the backend of your Joomla! site; this is then stored in the
parameters for that Module as moduleclass_sfx. To create a with a
class determined by the Module class suffix, you would use: