An Overview of Joomla Template
A Joomla template is, basically, a set of files inside the Joomla CMS. The template helps in controlling how the content is presented in your Joomla website. Put it simply, the Joomla template isn’t your site design; rather it is the basic foundation design that lets you view your site.
What’s more? The template works together with the content (saved in your website databases), so as to generate web pages that are essential for producing a “complete” site. Below is an example image displaying Joomla template with and without content:
The template needs to be styled so that the stylesheet defined in it can be inherited, whenever content in added to the template. One more thing to remember is that the images used within or along with the content are not included in the template; instead header is the part of the template.
Making use of a template provides several benefits for the Joomla CMS. Some of those benefits are listed as below
Using a template helps in separating the content and presentation, making it easy for a developer differentiate between both of those sections and perform edits on them quickly.
Working on a new template helps add a fresh look to a site, which can be applied immediately. In this case, you can either make changes to how the content or design elements (like graphics, colors, etc.) are positioned.
The template along with CSS ensures that the new information added to blog posts or pages appear to be consistent with other content of the site.
Steps to Create a Basic Joomla Template
So, now that you have come to know what exactly is a Joomla template and its benefits, let’s proceed and look at the steps involved in creating a simple template for the Joomla CMS:
- Step 1 – First off, you need to create a subfolder within the “templates” directory included in your Joomla installation. And then, name the subfolder as “demo_template” or anything you like. All of your template files will reside in the new subfolder.
- Step 2 – Within your newly created directory, create an index.php file. Also, create another file named templateDetails.xml within that directory.
- Step 3 – Next, create another folder called CSS and in the folder save a new file named “template.css”. These are necessary files that your Joomla site needs to function properly. Remember, you can use a simple text editor such as Notepad for creating all the new files. And then, store those files on your system, and later upload them into your cPanel using an FTP client.
Below are the necessary files that you must focus on to make your site function properly:
- index.php – This is the main file of the Joomla template that determines the positions of the available module. Also, it specifies the path where your stylesheet file (i.e. style.css) is stored.
- templateDetails.xml – This file disclose the complete information of your template to the Joomla CMS.
- css/template.css – The third fundamental and most important file is your template’s style.css, which helps define how your website will look.
After completing the above steps, change your site’s default template to the new one. Now you must familiarize yourself with all the files listed as above, as they are crucial to creating a successful Joomla template. So, in the next section, we’ll be discussing all these files.
A Detailed Look at Basic Files Of Joomla Template
1. Working with the “index.php” File
First, let us see how you should start working with your template’s index.php file:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”<?php echo $this->language;?>” lang=”<?php echo $this->language; ?>”>
<head><jdoc:include type=”head” /></head>
The above lines of code help determine the beginning of your site’s HTML output. And, the following line of code will incorporate the content of the header section in your page:
<jdoc:include type=”head”></jdoc:include>
The header content comprises of the page title, keywords, etc. – all the data that have been added to your Joomla CMS’s admin area. Once you’ve worked on the header part, you should begin with the “body” part of your site that looks something like:
<body>
<jdoc:include type=”component”>
</jdoc:include>
</body>
The line in the above code snippet will show the main content included in any given web page. After, adding the header and body part of your template, just check out how the template look. To do so, get logged into your Joomla CMS admin area. From the admin dashboard screen, make sure to replace your website’s default template with the newly created “demo_template”. And your main page will appear like:
As you can see in the above page, just a part of content within your articles is displayed devoid of any styling or modules. Apparently, you may would want to add a few module positions in the new template. For this part, you’ll have to edit your index.php file and make changes to lines of code between the element:
<div id=”container”>
<header>
<jdoc:include name=”top_module” type=”modules”>
</jdoc:include></header>
<div id=”left-sidebar”><jdoc:include name=”left_module” type=”modules”>
</jdoc:include></div><div id=”content-section”>
<jdoc:include type=”component”>
</jdoc:include></div><div id=”right-sidebar”>
<jdoc:include name=”right_module” type=”modules”>
</jdoc:include></div><footer>
<jdoc:include name=”footer_module” type=”modules”>
</jdoc:include></footer></div>
Here, in this code, the line informs the Joomla CMS where all the modules published in the “left” position needs to be added. In our case, we’ve added four different positions to the template, namely: top_module, left_module, right_module and footer_module positions.
All of these module positions contains information about their classes and ID’s and are wrapped within the
Now, including the content within the tags, our final index.php file will look like as follow:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”<?php echo $this->language; ?>” lang=”<?php echo $this->language; ?>” ><head><jdoc:include type=”head” /></head><body><div id=”container”><header><jdoc:include type=”modules” name=”top_module” /></header><div id=”left-sidebar” ><jdoc:include type=”modules” name=”left_module” /></div><div id=”content-section” ><jdoc:include type=”component” /></div><div id=”right-sidebar”><jdoc:include type=”modules” name=”right_module” /></div><footer><jdoc:include type=”modules” name=”footer_module” /></footer></div></body></html>
2. Working with the “templateDetails.xml” File
Next, it’s time to make changes to the templateDetails.xml file. Just, open this file and paste the below lines of code in it:
<?xml version=”1.0″ encoding=”utf-8″?><!DOCTYPE install PUBLIC “-//Joomla! 1.5//DTD template 1.0//EN””http://dev.joomla.org/xml/1.5/template-install.dtd”><install version=”1.5″ type=”template”><name>demo_template</name><creationDate>09/02/2016</creationDate><author>Your Name</author><authorEmail>templates@yourdomain.com</authorEmail><authorUrl>http://www.yoursiteurl.com</authorUrl><copyright>ABC</copyright><license>ABC TOS</license><version>1.0.0</version><description>This is a Simple Joomla Template</description><files><filename>index.php</filename><filename>templateDetails.xml</filename><filename>css/template.css</filename></files> <positions><position>left_module</position><position>right_module</position><position>top_module</position><position>footer_module</position></positions></install>
In this code snippet, we are first determining the version of the template for which you’ll need to design. In the next line, we’ve defined the template name “demo_template” which is followed by the date when the template was created. And then, just specify your name, email, Joomla website’s domain name, and copyright information.
Furthermore, we’ve added a short description for your template within the tags. Next, the name of all of the three most essential files is specified, such as: index.php, templateDetails.xml and css/template.css. Finally, the last four lines of code help determine the positions of the template.
3. Working with the “css/template.css” File
Of course, you would like to add some style to your template to make it attractive enough to capture viewers attention. To do so, add the below code in your index.php file right before the closing
tag:
<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/demo_template/css/template.css” type=”text/css” />
The above line of code will make your site understand fromwhere it needs to load the stylesheet file. But, you will first need to make a few edits to your css/template.css file first using the following code:
* { padding: 0; margin: 0;}
img { border: 0;}
body { font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.2em; margin: 0; padding: 0; font-size: 16px; color: #0d0d0d; }
a:link, a:visited { text-decoration: underline; color: #F00;}
.float { float: left; }
.clear { clear: both; }
.overall { background-color: #e5e5e5; }
div.center { text-align: center; margin: 0px auto 0 auto; padding: 0; width: 980px;
background: #e5e5e5; }
#container { width:990px; margin: auto; background-color: #e0eef7; border: 1px solid
#e4e4e4; text-align: left; }
header { text-align: center; background-color: #e0eef7; height: 80px; }
#content-section { width: 598px; text-align: left; background-color: #e0eef7; padding: 5px; }
#left-sidebar{ text-align: center; background-color: #e0eef7; width: 170px; border-
right: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; padding: 5px; }
#right-sidebar { background-color:#e0eef7; text-align: center; width: 170px; border
-left: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; padding: 5px; }
footer { background-color:#e0eef7; text-align:center; border-top: 1px solid #e4e4e4; border-
bottom: 1px solid #e4e4e4; padding: 5px; }
All of the above lines will help make the different parts of your site look clean and appealing to the eye.
That’s it! Following all the steps mentioned as above will help you build a complete template which will look like this:
Samuel Dawson is working in Designstohtml Ltd which is a nice psd to bootstrap, markup conversion company. Samuel is being here from the very beginning of the organization. The above article on Joomla template’s has been contributed by him.