Template design in joomla is quite simple really. This template that i'll show you is the most simplest of them all, but it's enough for one to learn Basics of template design. Further notice is that this is not the first tutorial made on joomla template design but it's not copy/pasted in order to score some credits. I'm designing a new template for my website, and that is why i think that parallel to designing one template i could make tut on how to do it.
How does this tut differ from others?
Well i'll put all of those xml and a full basic template for download from my website so practicly you can simply edit it and ta-da you have your template -- the original
Let's get started!!!
1st Tools i'll be using for design
--Macromedia Dreamweaver
--Joomla Extension for Dreamweaver (DL Here, to install it use Extension Manager in Macromedia Folder)
--Gimp / Photoshop / Paint / Corel (whatever best suits your needs)
2nd Files that you can simply download and are basicly standard to all templates
Joomla template directory structure
- mytemplate (root directory)
-index.php
-templateDetails.xml
template_thumbnail.png (optional, a small screenshot of your template)
css (css directory, it is under (in) the root directory)
-template_css.css
images (for your images that in combination with smart use of CSS make your template unique)
You can download this set of files --HERE-- and then edit your template....
3rd index.php (what in it)
To create index.php simply open new php file in DW. and replace the code above </head> with this code...
CODE
<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!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">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>"; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />"; ?>
If you installed joomla extension go to Insert --> Insert Head Code (same goes for the rest of the code, but i posted code so even someone without dreamweaver can create his template...
Save this in your root directory as index.php
If you read this code you might see some definitions inside, like where is css, or favicon. You can change those locations, but i wouldn't do that beacouse i don't know how would joomla behave after those changes..
4th Getting some unique touch for your template
4th step in joomla template design is the part where you define your template layout. Now as much as you want to be original there are some basic things you maybe don't know about webdesign.
This question of ORIGINALITY in webdesign is much relative. As we all would like to have websites that differ from each other it isn't that smart to do that. Beacouse what W3C is trying to do is to find some UNIVERSAL way in designing websites, so that users don't have to think that much where links are or how the page is organized.
If you want your personal website then maybe joomla isn't for you, but you can use it anyway.
This template i'm creating is pretty much standard one with header on top, left and right menus and content in middle. I just like it that way and i don't have the need to making anything more special than that.
Tables, tables and more tables. Everything is in tables.
Create a table of 3 rows, you can strech it define its width by pixels or percent align it as you like..
Put your mouse in 2nd row and create another table, this one with 3 columns, also you can define columns width and alignment as you like it to be -- your way.
5th Adding thing needed for joomla to function...
--Insert Main Body Code (2nd row middle column)
CODE
<?php mosMainBody(); ?>
--Insert Left Modules Code (2nd row left column)
CODE
<?php mosLoadModules ( 'left' ); ?>
--Insert Right Modules Code (2nd row right column)
CODE
<?php mosLoadModules ( 'right' ); ?>
In tutorial i'm using he used user1 and user2 modules. I won't beacouse i'm just intrested will it work without it. If it wouldn't work i'll add them later...
--Add a search bar.. (i would like it to be on top left of my template, but for now let's just put it near right module
Just paste this code
CODE
<form action="index.php" method="post">
<div align="center">
<input class="inputbox" type="text" name="searchword" size="15" value="<?php echo _SEARCH_BOX; ?>" onblur="if(this.value=='') this.value='<?php echo _SEARCH_BOX; ?>';" onfocus="if(this.value=='<?php echo _SEARCH_BOX; ?>') this.value='';" />
<input type="hidden" name="option" value="search" />
</div>
</form>
before this code
CODE
<?php mosLoadModules ( 'right' ); ?>
6th I'm still not sure is this going to work beacouse i didn't put many many features he put in his tutorial which i'm using to create template.
Let's define our templateDetails.xml
(open a file in DW or any other editor and save it as templateDetails.xml in template root directory)
PASTE THIS CODE INSIDE:
CODE
<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall type="template">
<name>mytemplate</name>
<creationDate>today</creationDate>
<author>Matak With Help Of Mambosolutions</author>
<copyright>This template is released under GNU/GPL License, of course it is</copyright>
<authorEmail>my@email.com</authorEmail>
<authorUrl>www.matak.trap17.com</authorUrl>
<version>basic</version>
<description>Simple template for simple website</description>
<files>
<filename>index.php</filename>
</files>
<images>
<filename>images/header.jpg</filename>
</images>
<css>
<filename>css/template_css.css</filename>
</css>
</mosinstall>
In this XML file you define your template files which are going to be installed with template. If you changed names of your files, let's say header, you need to change it here, if your template name differs from this here you need to change it.
All of this isn't esential, it might work even if you don't change some basic stuff, but in order to work properly change everything that needs changing...
Did you create it?
Good..
7th is defining CSS
Wow this CSS, you know when i started this webdesing thingy i learned about html, xml, php and somewhere somebody mentioned CSS. Well i thought i don't need to learn that. Boy i was wrong. CSS is the most important thing when it comes to webdesign. You can practicly create a whole website in CSS if you really know how.
Once you learn defining CSS from external file, which is piece of cake, you practicaly create one website and all other ones you create differ (except images) in CSS. So learn CSS, i'm trying to.
What we need to do is create a file called template_css.css and save it in our CSS folder.
PASTE this code inside
CODE
BODY {
margin : 0px 0px 0px 0px;
background-color : #FFFFFF;
color : #000000;
background-color: #F8F8FF;
scrollbar-base-color: #778899;
}
td, tr, p, div {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #333333;
}
ul {
margin : 0px 0px 0px 0px;
}
hr {
background : #CCCCCC;
height : 1px;
width : 100%;
}
.title {
font-family: sans-serif;
font-size: 24px;
font-weight: bold;
color : #7B8DA1;
}
.pathway {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
a.pathway:link, a.pathway:visited {
color : #000000;
font-weight : normal;
}
a.pathway:hover {
color : #000000;
font-weight : normal;
text-decoration : underline;
}
/* --Default Class Settings-- */
a.mainlevel:link, a.mainlevel:visited {
color: #333333;
background-position: left;
text-align: left;
font-weight: bold;
}
a.mainlevel:hover {
color: #00000;
background-position: left;
text-align: left;
}
a.mainmenu:link, a.mainmenu:visited {
color: #333333; font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif;
font-weight: bold;
}
a.mainmenu:hover, {
color: #000000; text-decoration: underline;
}
a.sublevel:hover {
color: #000000; text-decoration: underline;
}
a.sublevel:link, a.sublevel:visited {
color: #333333; font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif;
font-weight: normal;
}
table.moduletable {
margin: 0px 0px 0px 0px;
width: 95%;
border-left: solid 0px #000000;
border-right: solid 0px #000000;
border-top: solid 0px #000000;
border-bottom: solid 0px #000000;
margin-left: 5px;
}
table.moduletable th {
font-size : 11px;
font-weight : bold;
color : #000000;
text-align : left;
width : 100%;
padding: 10px 10px 10px 10px;
margin: 20px 5px 20px 5px;
}
table.moduletable td {
font-size: 10px;
font-weight: normal;
border: 1px solid #333;
padding: 10px 10px 10px 10px;
margin: 20px 5px 20px 5px;
background-color: #F8F8FF;
}
.poll {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
color : #666666;
line-height : 14px;
}
.sectiontableheader {
background-color : #CCCCCC;
color : #7B8DA1;
font-weight : bold;
}
.sectiontableentry1 {
background-color : #F0F0F0;
}
.sectiontableentry2 {
background-color : #E0E0E0;
}
.small {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #3366C0;
text-decoration : none;
font-weight : medium;
}
.smalldark {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
text-decoration : none;
font-weight : normal;
}
.contentpane {
background : #FFFFFF;
}
.contentpaneopen {
background : #FFFFFF;
}
.contentheading, .componentheading {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
font-weight : bold;
color : #7B8DA1;
text-align : left;
}
.createdate {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
color : #999999;
text-align : left;
}
.button {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : normal;
font-size : 10px;
font-weight : bold;
background-color : #F0F0F0;
color : #000000;
border : 1px solid #CCCCCC;
}
.inputbox {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
background-color : #F0F0F0;
border : 1px solid #CCCCCC;
}
a:link, a:visited {
font-size : 11px;
color : #000000;
text-decoration : none;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
a:hover {
color : #000000;
text-decoration : underline;
}
/* For content item titles that are hyperlink instead of Read On */
a.contentpagetitle:link, a.contentpagetitle:visited {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #000000;
text-align:left;
}
a.contentpagetitle:hover {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align:left;
color: #7B8DA1;
text-decoration: underline;
font-weight: bold;
}
a.category:link, a.category:visited {
color : #333333;
font-weight : bold;
}
a.category:hover {
color : #7B8DA1;
}
/* Styles for dhtml tabbed-pages */
.ontab {
background-color: #ffae00;
border-left: outset 2px #ff9900;
border-right: outset 2px #808080;
border-top: outset 2px #ff9900;
border-bottom: solid 1px #d5d5d5;
text-align: center;
cursor: hand;
font-weight: bold;
color: #FFFFFF;
}
.offtab {
background-color : #e5e5e5;
border-left: outset 2px #E0E0E0;
border-right: outset 2px #E0E0E0;
border-top: outset 2px #E0E0E0;
border-bottom: solid 1px #d5d5d5;
text-align: center;
cursor: hand;
font-weight: normal;
}
.tabpadding {
}
.tabheading {
background-color: #ffae00;
text-align: left;
}
.pagetext {
visibility: hidden;
display: none;
position: relative;
top: 0;
}
/* for modifying {moscode} output. Dont set the colour! */
.moscode {
background-color: #f0f0f0;
}
/* Text passed with mosmsg url parameter */
.message {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size : 10pt;
color : #ff6600;
text-align: center;
}
/* custom stuff */
.container
{
border: solid;
border-width: 1px;
border-color: #efefef;
background-color: White;
}
.boxes {
border: solid;
border-color: #efefef;
border-width: 1px;
}
That is your CSS. Define it as you wish, i'll just leave it like that and then see how will it behave when i install template. It is easy to change anyway..
8th Adding images to template...
This is simple...
Place your self wherever you want to add image and ADD it...
Now only thing you need to think about is this.. After adding image lets say header.jpg code should look like this
CODE
<img src="templates/mytemplate/images/header.jpg">
You could make a mistake here by putting source from src="images/header.jpg" but then joomla will look for your image in it's IMAGES folder, and that could be error, beacouse your template is installed in templates folder. I don't think i need to explain this problem further...
9th step.. Install and test your template...
ZIP your template, go to joomla administrator panel, installers -- template - site, browse your folder and install...
It should look something like this*
If this tutorial didn't help you try this one:
As you can see by clicking on links on my site, that menus arange by middle of table. Well that is what you have to define when creating those tables...
hope this helped
*it may not look something like that beacouse site is in development, and currently i'm trying to figure the minimum of CSS needed to have a nice looking website.
btw, is the DEMO template you linked in the end part of your tutorial working (http://matak.trap17.org/)? it looks like it's still a default godaddy parking page at the moment... or is it not?
