Fast Template Design In Joomla Cms Basic knowlege of Html needed

matak · November 6, 2006

Joomla is one of the most powerfull CMS sistems around. It is free under GNU/GPL license and everyone with simple knowlege of webdesign (and even without it) can use it for it's website. For now the only way i know on how to design a template in joomla is by using Dreamweaver and Joomla (joomlasolutions1.0.mxp-dreamweaver.mxp) extension for dreamweaver!

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 :blink:

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...

<?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://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/ 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)

<?php mosMainBody(); ?>

--Insert Left Modules Code (2nd row left column)

<?php mosLoadModules ( 'left' ); ?>

--Insert Right Modules Code (2nd row right column)

<?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

<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

<?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:

http://forums.xisto.com/no_longer_exists/;

  <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>
 _linenums:0'><?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>http://forums.xisto.com/no_longer_exists/;  <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

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... :wacko:

Now only thing you need to think about is this.. After adding image lets say header.jpg code should look like this

<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.
Edited November 6, 2006 by matak (see edit history)

serverph · November 6, 2006

there are some files for download you might have forgotten to link here. :blink: like the Joomla Extension for Dreamweaver and the Joomla template directory structure files set. at least you said a download is available from your tutorial above. would be more useful if you can link them later, as your tutorial defines.

i have an ulterior motive in pointing this out. hehehe? i might want to create my own joomla template in the near future, and i would want the files ready at hand later. btw, is the DEMO template you linked in the end part of your tutorial working (http://forums.xisto.com/no_longer_exists/)? it looks like it's still a default godaddy parking page at the moment... or is it not?

edit: i think you ought to revise the link you have posted for the demo template. :wacko: i believe it should have been http://forums.xisto.com/no_longer_exists/ instead of .ORG. checked it, and your joomla installation is under Xisto.COM.

matak · November 6, 2006

all of the files are available for download, which you could figure out if you read the post...i didn't put joomla extension beacouse it's easy to google it, and if you are using this tut you don't even need itmy website is in total development. i posted this tut in desperate needs for credits, and i think it can really be helpfull.if you know basic html - developing a template in joomla is simple, beacouse you build your plain html or even FLASH site, and just add this joomla pieces of code.the only need in your html site that joomla is using is CSS and that is why joomla looks like it looks.

Sign In

Fast Template Design In Joomla Cms Basic knowlege of Html needed

Recommended Posts

matak 2

Share this post

Link to post

Share on other sites

serverph 0

Share this post

Link to post

Share on other sites

matak 2

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information