JoomlaEZ Developers Blog

This is a step-by-step guide on how to base on the JEZ Thema Joomla theme base to create Joomla! 1.5 template from PSD design in few minutes. You can read about this free base for creating Joomla template here.

We should go through the following steps to create a brand new Joomla template, using the base:

1. Setup development environment
2. Analyze raw graphical design
3. Slice up raw graphical design to smaller images
4. Create stylesheets to represent the design
5. Finalize the newly created Joomla template

By going through this guide step by step, I will show you how to create a new unique Joomla template from any raw graphical design in a matter of minutes.

Setup Development Environment

Before creating a Joomla template, based on the JEZ theme base, please make sure you have downloaded and installed JEZ Thema on your Joomla site. I recommend you installing Joomla! 1.5 and JEZ Thema into a local server for faster development.

• Don’t know how to setup a local server? I recommend XAMPP, a complete package which helps you setup a local server with just one click. Afterwards, you need to download and install Joomla! 1.5, the latest version is recommended, into your local server.
• Download and install JEZ Thema into your installed Joomla site just like other extension: login to the Joomla administration panel then open Extensions -> Install/Uninstall, in the opened page click on the Browse button to select the downloaded JEZ Thema package, then click the Upload File & Install button.

After completing the steps above, let’s take a look at Joomla template creation parameters of JEZ Thema. Still in the Joomla administration panel, open Extensions -> Template Manager then in the list of installed templates, select JEZ Thema as the default template and click its name to see all available parameters. You can see that all the parameters are inline-documented: you can click the Show / hide details link besides each parameter to read instructions.

Analyze Raw Graphical Design

In this guide, we will analyze and then create a Joomla template from a Photoshop design named JEZ_Rego.psd. Before analyzing the design, let’s take a look at the default layout of the JEZ theme base as shown in the image below. We will create a Joomla template using the default layout. You’ll be able to learn how to customize the default layout to meet individual needs from another guide, which will be written later.

The following are wrapper formats / module chromes, supported by JEZ Thema:

• raw: Output rendered content as is.
• xHTML: Default Joomla! module chrome without support for rounded corners design.
• rounded: Default Joomla! module chrome to represent rounded corners design.
• jezRounded6ImgsNested: Just same technique as rounded but use 6 nested DIVs / images instead of 4 nested DIVs / images to reduce the size of image files and also prevent module height be limited to image height problem as seen in rounded module chrome.
• jezRounded6Imgs: Module chrome uses schillmania.com’s More Rounded Corners With CSS technique to represent rounded corners design with support for transparency effects (gradient, shadow, etc.) via PNG-24 alpha channel and not limited to image height.
• jezRounded1Img: Module chrome uses schillmania.com’s Even More Rounded Corners With CSS technique to represent rounded corners design with support for transparency effects (gradient, shadow, etc.) via PNG-24 alpha channel and using just 1 image.
• jezRounded1ImgScroll: Same technique as jezRounded1Img but scrollable if content is overflown the limited module height.

Now we are going to analyze the raw graphical design, which you can see below.

During the analysis, we need to:

• divide the raw graphical design to divisions, which best fit in the default layout.
• determine the wrapper format that best represents each container using HTML and CSS.
• determine the module chrome that best represents each module design using HTML and CSS.

After analyzing the graphical design, we have following results:

1. The design should be divided to divisions as show below:
   

   JEZ Rego Raw Graphical Design Analyzed

2. We don’t have the following module positions in the design: user3, user4, breadcrumb (wrapped by #jezNav), user2 (wrapped by #jezUsers), bottom (wrapped by #jezMain) and footer, debug (wrapped by #jezFooter). All we need to do is simply edit the JEZ Thema parameters and disable the apropriated parameters of these positions. Sure, we can leave these parameters as is for JEZ Thema to auto-detect, but it is recommended to disable them completely to prevent issues with modules, which had already been configured to show at these positions before.
   

   #jezNav Container Disabled

3. #jezPage, #jezHeader, #jezTop, #jezContent, #jezLocal, #jezMain, #jezSub, #jezExtras and #jezBottom containers don’t have rounded corners, so leave their wrapper format parameter as is (No rounded corners):
   

   #jezPage

4. We have logo (wrapped by #jezLogo), top (wrapped by #jezTop), user5, user6, user7, user8 (wrapped by #jezExtras), and inset, syndicate (wrapped by #jezBottom) module positions don’t need special module chromes to represent as they don’t use rounded corners design. So set the module chrome parameter for these positions to either Raw or xHTML:
   

   logo (wrapped by #jezLogo) , top (wrapped by #jezTop)

5. Following divisions use rounded corners design: left (wrapped by #jezLocal), right (wrapped by #jezSub), user1 (wrapped by #jezUsers) module positions and the component output wrapper (#jezComponent). So, we should use any of the following module chromes to represent them using HTML and CSS: rounded, jezRounded6ImgsNested, jezRounded6Imgs, jezRounded1Img, jezRounded1ImgScroll. In this guide, we will use just the jezRounded6Imgs module chrome to represent the rounded corners design of user1, left, right module positions and the component output wrapper.
   

   Component output wrapper format

   

   left, right and user1 module chromes

Slice Up Raw Graphical Design to Smaller Images

Now, it’s time to slice up our raw graphical design to smaller images that can be used to represent each division using HTML and CSS.

1. The following divisions of the design can be represented with HTML and CSS using an 1px width image repeated horizontally as a background:
   

   #jezHeader	#jezExtras	#jezBottom

2. Slice up the rounded corners design divisions as following, so we can represent them using the jezRounded6Img module chrome:
   

   Default left module position slices
   Right module position slices. Also used for additional _black class suffix for left module position
   Component output wrapper slices

Create Stylesheets to Represent the Design

After slicing up the raw graphical design, we will implement the sliced images into the predefined stylesheets of the framework to represent the design. We will make some style customization to fit the design.

Now it’s time to implement the slices we have in the JEZ Thema predefined stylesheets.

If you have not switched to the JEZ Thema directory yet, let’s change our working directory to your-joomla-directory/templates/jez_thema. Copy all the slices to the images directory, then open up the css/layouts.css file in your favorite text editor.

Search the opened file for * Page wrapper *, then modify the stylesheet block #jezPage to the following:

#jezPage {
	margin: 0 auto;
}

Continue searching for * Header wrapper * then modify the stylesheet block #jezHeader with the following:

#jezHeader {
	height: 75px;
	margin-bottom: 0;
	background: #55574c url(../images/bg_header.png) left top repeat-x;
}

Replace the #jezExtras stylesheet block, which is empty by default and can be found by searching for * Extras wrapper *, with the following CSS code:

#jezExtras {
	height: 200px;
	background: #000 url(../images/bg_extras.png) left top repeat-x;
}

In the default Joomla! 1.5 installation, even with sample data loaded, there are no any modules configured to show at user5, user6, user7 and user8 positions. Thus, to see the result of the above stylesheet, you need to configure certain modules to show at these positions. To have a look like the raw graphical design, configuring one Newsflash (mod_newsflash) module for each of the positions is recommended.

Continue searching for * Bottom navigation wrapper * and replacing the empty #jezBottom stylesheet block with the following block:

#jezBottom {
	height: 50px;
	background: #fff url(../images/bg_bottom.png) left top repeat-x;
}

Now, we are going to set a background color for the content block of the design. Search for * Content wrapper * and modify the #jezContent stylesheet block from:

#jezContent {
	position: relative;
}

to:

#jezContent {
	background-color: #d4d3cf;
	padding-top: 14px;
}

Since we don’t have global navigation (#jezNav container), position: relative; is not neccessary.

Also, let’s move the 3 columns in the content block up. To do this, scroll the text editor window down and look for the first /* Nested wrappers and module positions */ comment, then change the stylesheet block #jezMain, #jezSub, #jezLocal to:

#jezMain, #jezSub, #jezLocal {
	margin-top: 0;
}

Now it is the time to implement our rounded corners design.

Search for the opened stylesheet file for * Modules chromes at left position *, modify the stylesheet block below the comment /* rounded using 6 images */ and above the comment /* rounded using 1 image */ to:

#jezLocal .jezRounded6Imgs {
	margin-bottom: 9px;
}
#jezLocal .jezRounded6Imgs .hd {
	background-image: url(../images/mod_left-hl.png);
}
#jezLocal .jezRounded6Imgs .hd .c {
	background-image: url(../images/mod_left-hr.png);
}
#jezLocal .jezRounded6Imgs .bd {
	background-image: url(../images/mod_left-bl.png);
}
#jezLocal .jezRounded6Imgs .bd .c {
	background-image: url(../images/mod_left-br.png);
}
#jezLocal .jezRounded6Imgs .ft {
	background-image: url(../images/mod_left-fl.png);
}
#jezLocal .jezRounded6Imgs .ft .c {
	background-image: url(../images/mod_left-fr.png);
}
#jezLocal .jezRounded6Imgs h3 {
	background: url(../images/mod_left-hd.png) no-repeat;
	height: 36px;
	line-height: 30px;
	margin-bottom: 0;
	overflow: hidden;
	position: relative;
	text-align: center;
	top: -18px;
	width: 107px;
}

Now search for * Modules chromes at right position *, then change the stylesheet block below the comment /* rounded using 6 images */ and above the comment /* rounded using 1 image */ to:

#jezSub .jezRounded6Imgs,
#jezLocal .black {
	margin-bottom: 9px;
}
#jezSub .jezRounded6Imgs .hd,
#jezLocal .black .hd {
	background-image: url(../images/mod_right-hl.png);
}
#jezSub .jezRounded6Imgs .hd .c,
#jezLocal .black .hd .c {
	background-image: url(../images/mod_right-hr.png);
}
#jezSub .jezRounded6Imgs .bd,
#jezLocal .black .bd {
	background-image: url(../images/mod_right-bl.png);
}
#jezSub .jezRounded6Imgs .bd .c,
#jezLocal .black .bd .c {
	background-image: url(../images/mod_right-br.png);
}
#jezSub .jezRounded6Imgs .bd .c .s,
#jezLocal .black .bd .c .s {
	margin: 0 1px;
	background-image: url(../images/mod_right-s.png);
}
#jezSub .jezRounded6Imgs .ft,
#jezLocal .black .ft {
	background-image: url(../images/mod_right-fl.png);
}
#jezSub .jezRounded6Imgs .ft .c,
#jezLocal .black .ft .c {
	background-image: url(../images/mod_right-fr.png);
}
#jezSub .jezRounded6Imgs h3 {
	background: url(../images/mod_right-hd.png) 100% 40% no-repeat;
}
#jezSub .orange h3 {
	background-image: url(../images/mod_right-hd_orange.png);
}

In the above block of CSS code, we have also defined an additional rounded corners design, associated with the black (a white-space character, followed by a black word) module class suffix for the left column. To see the additional rounded corners design at the left module position, you simply need to specify black for the Module Class Suffix parameter of any of the left-positioned modules.

Now, we are going to create a stylesheet that renders rounded corners design for the component output wrapper. Search for * Component output wrapper * in the opened file, scroll down until you see the first /* rounded using 6 images */ comment, then modify the stylesheet block /* rounded using 1 image */ below that comment and above the comment to:

#jezComponent.jezRounded6Imgs {
	/* the rounded block has 4px shadow around so move it up 4px to
	line-up correctly with rounded blocks at left and right columns */
	margin: -4px 0 13px 0;
}
#jezComponent.jezRounded6Imgs .hd {
	background-image: url(../images/com_hl.png);
}
#jezComponent.jezRounded6Imgs .hd .c {
	background-image: url(../images/com_hr.png);
}
#jezComponent.jezRounded6Imgs .bd {
	background-image: url(../images/com_bl.png);
}
#jezComponent.jezRounded6Imgs .bd .c {
	background-image: url(../images/com_br.png);
}
#jezComponent.jezRounded6Imgs .ft {
	background-image: url(../images/com_fl.png);
}
#jezComponent.jezRounded6Imgs .ft .c {
	background-image: url(../images/com_fr.png);
}

After completing all the easy work described above, we will do some advanced work now. As you can see in our raw graphical design, the #modUser1 division has a rather special rounded corners design and content layout. This requires doing some customization in JEZ Thema code and development of a new custom Joomla! 1.5 module to achieve the closest look. In this guide, we will only customize the JEZ theme base code and leave the new custom Joomla! 1.5 module development for another how-to guide.

Due to a rather special design of the #modUser1 division, we might not want it on all the pages, but just on the home page and/or certain introduction pages only. So, we will use the component output wrapper’s rounded corners design as a default style for the module positioned at the #modUser1 division (user1 module position). Let’s go back to where we have defined rounded corners design for the component output wrapper and update the stylesheets to:

#jezComponent.jezRounded6Imgs,
#modUser1 .jezRounded6Imgs {
	/* the rounded block has 4px shadow around so move it up 4px to
	line-up correctly with rounded blocks at left and right columns */
	margin-top: -4px;
}
#jezComponent.jezRounded6Imgs {
	margin-bottom: 13px;
}
#modUser1 .jezRounded6Imgs {
	margin-bottom: 5px;
}
#jezComponent.jezRounded6Imgs .hd,
#modUser1 .jezRounded6Imgs .hd {
	background-image: url(../images/com_hl.png);
}
#jezComponent.jezRounded6Imgs .hd .c,
#modUser1 .jezRounded6Imgs .hd .c {
	background-image: url(../images/com_hr.png);
}
#jezComponent.jezRounded6Imgs .bd,
#modUser1 .jezRounded6Imgs .bd {
	background-image: url(../images/com_bl.png);
}
#jezComponent.jezRounded6Imgs .bd .c,
#modUser1 .jezRounded6Imgs .bd .c {
	background-image: url(../images/com_br.png);
}
#jezComponent.jezRounded6Imgs .ft,
#modUser1 .jezRounded6Imgs .ft {
	background-image: url(../images/com_fl.png);
}
#jezComponent.jezRounded6Imgs .ft .c,
#modUser1 .jezRounded6Imgs .ft .c {
	background-image: url(../images/com_fr.png);
}

Now, it’s time to slice up the #modUser1 division of our graphical design to the following images and start customizing.

Open up the wrappers/users.php file with your favorite text editor, then change the block of code below:

if ($params->get('_modUser1')) : ?>
<div id="modUser1" class="fl<?php echo $params->get('_modUser1Style'); ?>">
<jdoc:include type="modules" name="user1<?php echo $params->get('_user1Chrome'); ?>" />
</div>
<?php endif;

to:

if ($params->get('_modUser1')) :
	jimport('joomla.application.module.helper');
	$user1Mod =& JModuleHelper::getModules('user1');
	$modParams = new JParameter($user1Mod[0]->params); ?>
<div id="modUser1" class="fl<?php echo ($modParams->get('moduleclass_sfx') == '_special' ? ' special' : '').$params->get('_modUser1Style'); ?>">
<jdoc:include type="modules" name="user1<?php echo $modParams->get('moduleclass_sfx') == '_special' ? '' : $params->get('_user1Chrome'); ?>" />
<?php if ( $modParams->get('moduleclass_sfx') == '_special' ) : ?>
<div class="u1SpecialLeft"><!-- Rounded corners at left edge --></div>
<div class="u1SpecialRight"><!-- Rounded corners at right edge --></div>
<?php endif; ?>
</div>
<?php endif;

As you can see, we have added a few lines of PHP code to import the Joomla! 1.5 module helper library and then get data of the user1 positioned modules. Since the user1 module position is fit for just one module to display in, we get the configured parameters of the first module only. If the module uses the _special class suffix, apply a special class to the #modUser1 container, then create two additional div elements inside #modUser1, which we will use to display rounded corners later.

Switch back to the editor window for the css/layouts.css file, we are going to add a stylesheet for the _special module class suffix at the #modUser1 division. Search for * Modules chromes at user1 position * and add the following stylesheet block /* Joomla rounded module */ to above the comment:

/* rounded corners design for _special class suffix */
#modUser1.special {
	position: relative;
	margin-bottom: 9px;
	height: 194px;
}
#modUser1.special h3 {
	display: none;
}
#modUser1.special .u1SpecialLeft,
#modUser1.special .u1SpecialRight {
	width: 12px;
	height: 194px;
	position: absolute;
	top: 0;
}
#modUser1.special .u1SpecialLeft {
	background: transparent url(../images/mod_user1-l.png) no-repeat;
	left: 0;
}
#modUser1.special .u1SpecialRight {
	background: transparent url(../images/mod_user1-r.png) no-repeat;
	right: 0;
}

From the Joomla administration panel, let’s create a new custom HTML module to emulate the content layout as seen in our raw graphical design with the following HTML code:

<div style="background: #000 url(templates/jez_thema/images/night_city.jpg) center center no-repeat; width: 500px; height: 194px; position: relative">
<div style="overflow: hidden; background-color: #000; opacity: .7; position: absolute; bottom: 0; width: 500px; padding-top: 12px; height: 44px">		<h4 class="ml1 air">The city that never sleeps</h4>
<p class="fr mt-1_5 mr1 air"><a href="#an-url">Learn more...</a></p>
</div>
</div>

Configure the newly created module to show at user1 position and use module class suffix of _special. Unpublish all the other modules configured to show at the user1 position, then refresh your Joomla frontend to see the results.

At this time, we have a Joomla! 1.5 template that looks very similar to our raw graphical design. To achieve better results, we will continue doing some advanced customization now.

Our raw graphical design has breadcrumbs (above the content rendered by a component) and a horizontal menu (at the bottom of #jezExtras). So we will add a module position, let’s name it pathway, to the top of the component output and another module position, let’s name it user9, to the bottom of the #jezExtras container. To do this, we are going to modify four files templateDetails.xml, custom.php, wrappers/component.php and wrappers/extras.php. Let’s open up these files with your text editor.

Add these two lines of XML code to templateDetails.xml file after the <positions> and before the </positions> markup tags:

<position>pathway</position>
<position>user9</position>

These two lines of PHP code must be added to custom.php right above the // final preparation comment:

// additional positions
$this->params->set('_modPathway', $this->countModules('pathway') ? 1 : 0);
$this->params->set('_modUser9', $this->countModules('user9') ? 1 : 0);

Then add the block of PHP code below to the wrappers/component.php file right before the ?> string:

if ($params->get('_modPathway')) : ?>
<div id="modPathway">
<jdoc:include type="modules" name="pathway" />
</div>
<?php endif;

Finally, add the following PHP code to wrappers/extras.php file right before the last ?> string:

if ($params->get('_modUser9')) : ?>
<div id="modUser9" class="clr">
<jdoc:include type="modules" name="user9" />
</div>
<?php endif;

Now switch back to the Joomla administration panel, reconfigure the Breadcrumbs module to show at the pathway position and a certain module to show at the user9 position. Switch to the Joomla frontend and refresh to see the results.

Finally, we will customize the predefined stylesheets for layouts a little to make the template looks as closer to the raw graphical design as possible. Switch back to the editor window at the css/layouts.css file, search for * Content wrapper *, scroll down and look for the first /* Nested wrappers and module positions */ comment and change the stylesheet block right below that comment to:

#jezMain, #jezSub, #jezLocal {
	margin-top: 0;
}
#jezMain.tc, #jezLocal.tc, #jezSub {
	margin-right: 0;
}

.gr3 #jezMain {
	margin-left: 228px;
	width: 502px;
}
.gr3 #jezSub {
	margin-right: 31px;
	width: 197px;
}
.gr3 #jezLocal {
	margin-left: -701px;
	width: 197px;
}

.gr2 #jezMain {
	margin-left: 228px;
	width: 705px;
}
.gr2 #jezMain.tc {
	margin-left: 25px;
}
.gr2 #jezSub {
	margin-right: 31px;
	width: 197px;
}
.gr2 #jezSub.expandBoth {
	width: 447px;
}
.gr2 #jezSub.expandRight {
	float: left;
	margin-left: 232px;
	margin-right: 4px;
	width: 697px;
}
.gr2 #jezLocal {
	margin-left: -904px;
	width: 197px;
}
.gr2 #jezLocal.expandBoth {
	margin-left: 29px;
	width: 447px;
}
.gr2 #jezLocal.expandLeft {
	margin-left: 29px;
	width: 697px;
}

.gr1 #jezMain {
	float: left;
	margin-left: 25px;
	width: 908px;
}
.gr1 #jezLocal, .gr1 #jezSub {
	float: left;
	margin-left: 29px;
	width: 900px;
}

Refresh your Joomla frontend: you should see that the overall template layout now looks almost the same as the raw graphical design.

After completing the steps above, all you have to do now is add and/or modify your stylesheets with margin, padding, alignment, color, text formating and other values for the remaining elements such as horizontal menus, vertical menus, lists, form elements, etc. to make the newly created Joomla! 1.5 template look the same as the raw graphical design. Instead of creating a new CSS file, this work should be done by editing the following existing stylesheets files in the JEZ theme framework directory: css/layouts.css, css/template.css, css/ie6only.css and css/ie7only.css. We don’t go further in this chapter, because this work is differerent from template to template and does not require the JEZ theme base, but pure CSS knowledge.

Finalize the Newly Created Joomla Template

At this final step, we have two options:

1. Pack the completed work as a theme that depends on JEZ base installation to work properly.
2. Pack the completed work as a stand alone template that works out of the box regardless, whether the JEZ theme base is installed or not.

Before going ahead with either of the options, we should minimize the file-size of our Joomla template’s stylesheets. This will boost up the loading speed of our template, when used in real world, especially on slow network connections like dial-up networking. Open up the css/layouts.css, css/template.css, css/ie6only.css and css/ie7only.css files with your text editor and remove all the empty and unnecessary predefined stylesheet blocks. Almost all of these unneeded stylesheets can be removed with the following search and replace actions:

1. Search for the regular expression pattern:

   ^(/*[^n]+*/[nts]*)?([^n]+,[nts]*)*[^n]+{([nts]*/*[^n]+*/[nts]*)?}n*$

   And replace all the matches with nothing.

2. Search for the regular expression pattern:

   [rn]{3,}

   And replace the matches with:

   nn

   Repeat this searching/replacing action untill no more matches can be found.

3. Search for the regular expression pattern:

   ^(*+/)[rn]*(/*s|#|.)

   And replace with:

   1n2

4. Search for the regular expression pattern:

   ^(/*-+*/[rnts]*/*+[rnts]**[^r^n]+*[rnts]**+/[rnts]+)$

   And replace with nothing.

5. Search for the regular expression pattern:

   [rn]{3,}

   And replace with:

   nn

   Repeat this searching/replacing action untill no more matches are found.

6. Search for the regular expression pattern:

   ^(*+/)[rn]*(/*s|#|.)

   And replace with:

   1nn2

Pack the Completed Work as a Theme

To pack the completed work as a theme for the JEZ framework, do the following:

• create a new directory, let’s name it jez_rego, inside the JEZ Thema’s themes directory
• create another new directory called images inside the themes/jez_rego directory
• move all slices previously copied to JEZ Thema’s images directory to the newly created themes/jez_rego/images directory
• copy all the other files specifically modified and/or created for the JEZ Rego Raw Graphical Design, except for the templateDetails.xml, with the directory structure retained, to the themes/jez_rego directory.

You should have following directory/file structure:

jez_rego
|_ css
| |_ layouts.css
|_ images
| |_ bg_bottom.png
| |_ bg_extras.png
| |_ bg_header.png
| |_ com_bl.png
| |_ com_br.png
| |_ com_fl.png
| |_ com_fr.png
| |_ com_hl.png
| |_ com_hr.png
| |_ mod_left-bl.png
| |_ mod_left-br.png
| |_ mod_left-fl.png
| |_ mod_left-fr.png
| |_ mod_left-hl.png
| |_ mod_left-hr.png
| |_ mod_right-bl.png
| |_ mod_right-br.png
| |_ mod_right-fl.png
| |_ mod_right-fr.png
| |_ mod_right-hl.png
| |_ mod_right-hr.png
| |_ mod_right-s.png
| |_ mod_user1-l.png
| |_ mod_user1-r.png
|_ wrappers
| |_ component.php
| |_ extras.php
| |_ users.php
|_ custom.php

To keep the theme’s specific parameters, copy the params.ini file from the JEZ Thema directory to the themes/jez_rego directory.

After copying, we recommend you to revert, again except templateDetails.xml, all the other files specifically edited for this theme, including params.ini, outside of themes/jez_rego directory to JEZ Thema’s original state to prevent those files from affecting other themes.

For faster loading speed of our theme in the real world and also to prevent possible conflicts, except for the files inside the themes/jez_rego/wrappers directory, you should retain only modified and/or newly created code, regardless of what kind it is (HTML, CSS or PHP), in all the other files copied to the themes/jez_rego directory. For example, the themes/jez_rego/css/layouts.css file should contain only the stylesheets specified in step 4 and the themes/jez_rego/custom.php file should contain only:

<?php
// additional positions
$this->params->set('_modPathway', $this->countModules('pathway') ? 1 : 0);
$this->params->set('_modUser9', $this->countModules('user9') ? 1 : 0);
?>

Now, it’s time to continue editing. Open up the templateDetails.xml file in your text editor. Search for label=”Default Theme”, you should see the XML declaration for the JEZ Thema’s Default Theme parameter. Add the following markup tag to the right of the declaration’s </param> tag:

<option value="jez_rego">JEZ Rego</option>

This will make our theme selectable when editing JEZ Thema’s parameters inside the Joomla administration panel.

To make our theme portable, add the following XML code somewhere after and before the <files> and </files> markup tags:

<filename>themes/jez_rego/custom.php</filename>
<filename>themes/jez_rego/params.ini</filename>
<filename>themes/jez_rego/css/layouts.css</filename>
<filename>themes/jez_rego/images/bg_bottom.png</filename>
<filename>themes/jez_rego/images/bg_extras.png</filename>
<filename>themes/jez_rego/images/bg_header.png</filename>
<filename>themes/jez_rego/images/com_bl.png</filename>
<filename>themes/jez_rego/images/com_br.png</filename>
<filename>themes/jez_rego/images/com_fl.png</filename>
<filename>themes/jez_rego/images/com_fr.png</filename>
<filename>themes/jez_rego/images/com_hl.png</filename>
<filename>themes/jez_rego/images/com_hr.png</filename>
<filename>themes/jez_rego/images/mod_left-bl.png</filename>
<filename>themes/jez_rego/images/mod_left-br.png</filename>
<filename>themes/jez_rego/images/mod_left-fl.png</filename>
<filename>themes/jez_rego/images/mod_left-fr.png</filename>
<filename>themes/jez_rego/images/mod_left-hl.png</filename>
<filename>themes/jez_rego/images/mod_left-hr.png</filename>
<filename>themes/jez_rego/images/mod_right-bl.png</filename>
<filename>themes/jez_rego/images/mod_right-br.png</filename>
<filename>themes/jez_rego/images/mod_right-fl.png</filename>
<filename>themes/jez_rego/images/mod_right-fr.png</filename>
<filename>themes/jez_rego/images/mod_right-hl.png</filename>
<filename>themes/jez_rego/images/mod_right-hr.png</filename>
<filename>themes/jez_rego/images/mod_right-s.png</filename>
<filename>themes/jez_rego/images/mod_user1-l.png</filename>
<filename>themes/jez_rego/images/mod_user1-r.png</filename>
<filename>themes/jez_rego/wrappers/component.php</filename>
<filename>themes/jez_rego/wrappers/extras.php</filename>
<filename>themes/jez_rego/wrappers/users.php</filename>

This will give you the ability to pack all the files inside the JEZ Thema directory, with directory structure retained, to a single compressed ZIP or GZ file and then use it to install JEZ Thema into another Joomla! 1.5 site without loosing the newly created JEZ Rego theme.

Now, switch back to your Joomla administration panel, go to Extensions -> Template Manager. In the list of installed templates, click JEZ_Thema to edit its parameters, choose JEZ Rego as the Default Theme and then save the change.

Download JEZ Rego packed as JEZ Thema theme [zip].

Pack the Completed Work as a Stand Alone Template

First, we need to add all the new files copied to the JEZ theme base directory, while creating the JEZ Rego template in the JEZ Thema’s meta data file. Open up the templateDetails.xml file under the JEZ Thema directory with your text editor, then add the following XML code somewhere between the <files> </files> markup tags:

<filename>themes/jez_rego/images/bg_bottom.png</filename>
<filename>themes/jez_rego/images/bg_extras.png</filename>
<filename>themes/jez_rego/images/bg_header.png</filename>
<filename>themes/jez_rego/images/com_bl.png</filename>
<filename>themes/jez_rego/images/com_br.png</filename>
<filename>themes/jez_rego/images/com_fl.png</filename>
<filename>themes/jez_rego/images/com_fr.png</filename>
<filename>themes/jez_rego/images/com_hl.png</filename>
<filename>themes/jez_rego/images/com_hr.png</filename>
<filename>themes/jez_rego/images/mod_left-bl.png</filename>
<filename>themes/jez_rego/images/mod_left-br.png</filename>
<filename>themes/jez_rego/images/mod_left-fl.png</filename>
<filename>themes/jez_rego/images/mod_left-fr.png</filename>
<filename>themes/jez_rego/images/mod_left-hl.png</filename>
<filename>themes/jez_rego/images/mod_left-hr.png</filename>
<filename>themes/jez_rego/images/mod_right-bl.png</filename>
<filename>themes/jez_rego/images/mod_right-br.png</filename>
<filename>themes/jez_rego/images/mod_right-fl.png</filename>
<filename>themes/jez_rego/images/mod_right-fr.png</filename>
<filename>themes/jez_rego/images/mod_right-hl.png</filename>
<filename>themes/jez_rego/images/mod_right-hr.png</filename>
<filename>themes/jez_rego/images/mod_right-s.png</filename>
<filename>themes/jez_rego/images/mod_user1-l.png</filename>
<filename>themes/jez_rego/images/mod_user1-r.png</filename>
<filename>themes/jez_rego/images/night_city.jpg</filename>

Secondly, we are going to remove unnecessary files from the stand alone template package. For example, you might not want to keep the default Sample Theme. To completely remove the sample theme, you need to:

1. Delete the directory sample inside JEZ Thema’s themes directory.
2. In the templateDetails.xml editor window, we need to remove all the filename nodes associated with the removed directory and its nested directories/files. To do this, simply search for the regular expression pattern:

   ^[ts]+<filename>themes/sample/[^<]+</filename>[rn]

   And replace all the matches with nothing.

3. Now you have two options: remove the Default Theme parameter or remove only Sample Theme option from Default Theme parameter.
   1. To remove the Default Theme parameter, instead of removing the appropriated parameter declaration block, you should replace the XML declaration for Default Theme parameter below:

      <param name="theme" type="list" default="" label="Default Theme" description="">
      	<option value="">No Theme</option>
      	<option value="sample">Sample Theme</option>
      </param>

      with following declaration:

      <param name="theme" type="hidden" default="" />

   2. If you want to remove only Sample Theme option from Default Theme parameter, you simply need to remove the following line of XML code from the appropriated XML declaration block for the Default Theme parameter.

      <option value="sample">Sample Theme</option>

You also might want to remove certain or all the template creation parameters in the stand alone template package. To do this, you should replace the XML declaration for unneeded parameter with a hidden declaration instead of removing the declaration block. Some examples are shown below:

1. Remove the parameters associated with disabled module positions and general containers in this guide. Look for:

   <param name="wrapperNav" type="list" default="plain" label="Global Nav Wrapper" description="">
   	<option value="plain">No rounded corners</option>
   	<option value="module">Joomla rounded module chrome</option>
   	<option value="round6imgs-nested">jezRounded6ImgsNested module chrome</option>
   	<option value="round6imgs">jezRounded6Imgs module chrome</option>
   	<option value="round1img">jezRounded1Img module chrome</option>
   	<option value="round1img-scroll">jezRounded1ImgScroll module chrome</option>
   </param>

   <param name="modUser3" type="radio" default="1" label="User3 Module Position" description="No to always hide or yes for auto detect">
   	<option value="1">Yes</option>
   	<option value="0">No</option>
   </param>
   <param name="modUser3Chrome" type="list" default="raw" label="Module Chrome" description="">
   	<option value="raw">Raw</option>
   	<option value="xhtml">xHTML</option>
   	<option value="rounded">Rounded</option>
   	<option value="jezRounded6ImgsNested">jezRounded6ImgsNested</option>
   	<option value="jezRounded6Imgs">jezRounded6Imgs</option>
   	<option value="jezRounded1Img">jezRounded1Img</option>
   	<option value="jezRounded1ImgScroll">jezRounded1ImgScroll</option>
   </param>

   <param name="modUser4" type="radio" default="1" label="User4 Module Position" description="No to always hide or yes for auto detect">
   	<option value="1">Yes</option>
   	<option value="0">No</option>
   </param>
   <param name="modUser4Chrome" type="list" default="raw" label="Module Chrome" description="">
   	<option value="raw">Raw</option>
   	<option value="xhtml">xHTML</option>
   	<option value="rounded">Rounded</option>
   	<option value="jezRounded6ImgsNested">jezRounded6ImgsNested</option>
   	<option value="jezRounded6Imgs">jezRounded6Imgs</option>
   	<option value="jezRounded1Img">jezRounded1Img</option>
   	<option value="jezRounded1ImgScroll">jezRounded1ImgScroll</option>
   </param>

   <param name="modBreadcrumb" type="radio" default="1" label="Breadcrumb Module Position" description="No to always hide or yes for auto detect">
   	<option value="1">Yes</option>
   	<option value="0">No</option>
   </param>
   <param name="modBreadcrumbChrome" type="list" default="raw" label="Module Chrome" description="">
   	<option value="raw">Raw</option>
   	<option value="xhtml">xHTML</option>
   	<option value="rounded">Rounded</option>
   	<option value="jezRounded6ImgsNested">jezRounded6ImgsNested</option>
   	<option value="jezRounded6Imgs">jezRounded6Imgs</option>
   	<option value="jezRounded1Img">jezRounded1Img</option>
   	<option value="jezRounded1ImgScroll">jezRounded1ImgScroll</option>
   </param>

   <param name="navFx" type="radio" default="0" label="Enable?" description="">
   	<option value="1">Yes</option>
   	<option value="0">No</option>
   </param>
   <param name="navFx_fxDuration" type="text" size="5" default="500" label="Effect Duration" description="Effect duration in milliseconds" />
   <param name="navFx_firstSubDirection" type="list" default="vertical" label="Dropdown Direction" description="Direction of dropdown effect (occured when mouse over first level sub menus): vertical, horizontal or both">
   	<option value="vertical">Vertical</option>
   	<option value="horizontal">Horizontal</option>
   	<option value="both">Both</option>
   </param>
   <param name="navFx_deeperSubDirection" type="list" default="both" label="Flyout Direction" description="Direction of flyout effect (occured when mouse over deeper level / nested sub menus): vertical, horizontal or both">
   	<option value="vertical">Vertical</option>
   	<option value="horizontal">Horizontal</option>
   	<option value="both">Both</option>
   </param>

   Then replace with:

   <param name="modUser3" type="hidden" default="0" />
   <param name="modUser4" type="hidden" default="0" />
   <param name="modBreadcrumb" type="hidden" default="0" />
   <param name="navFx" type="hidden" default="0" />

   Continue looking for:

   <param name="modUser2" type="radio" default="1" label="User2 Module Position" description="No to always hide or yes for auto detect">
   	<option value="1">Yes</option>
   	<option value="0">No</option>
   </param>
   <param name="modUser2Chrome" type="list" default="xhtml" label="Module Chrome" description="">
   	<option value="raw">Raw</option>
   	<option value="xhtml">xHTML</option>
   	<option value="rounded">Rounded</option>
   	<option value="jezRounded6ImgsNested">jezRounded6ImgsNested</option>
   	<option value="jezRounded6Imgs">jezRounded6Imgs</option>
   	<option value="jezRounded1Img">jezRounded1Img</option>
   	<option value="jezRounded1ImgScroll">jezRounded1ImgScroll</option>
   </param>

   <param name="modBottom" type="radio" default="1" label="Bottom Module Position" description="No to always hide or yes for auto detect">
   	<option value="1">Yes</option>
   	<option value="0">No</option>
   </param>
   <param name="modBottomChrome" type="list" default="xhtml" label="Module Chrome" description="">
   	<option value="raw">Raw</option>
   	<option value="xhtml">xHTML</option>
   	<option value="rounded">Rounded</option>
   	<option value="jezRounded6ImgsNested">jezRounded6ImgsNested</option>
   	<option value="jezRounded6Imgs">jezRounded6Imgs</option>
   	<option value="jezRounded1Img">jezRounded1Img</option>
   	<option value="jezRounded1ImgScroll">jezRounded1ImgScroll</option>
   </param>

   And replace with:

   <param name="modUser2" type="hidden" default="0" />
   <param name="modBottom" type="hidden" default="0" />

2. Almost all wrapper format parameters can be removed by searching for following regular expression pattern:

   (<param name="@cdata" type="cdata" default="" label="[^>]+"><![CDATA[[wWdDrnts]+]]></param>[rnts]+)*<param name="wrapper([^r^n]+)" type="list" default="([^r^n]+)" label=[^r^n]+>[rn]([ts]+<option[^>]+>[^<]+</option>[rn])+[ts]+</param>([rnts]+<param name="@spacer"[^r^n]+ />)*

   Then replace all matchs with:

   <param name="wrapper2" type="hidden" default="3" />

3. Preset the component output wrapper format parameter as we have done before:

   <param name="wrapperComponent" type="hidden" default="round6imgs" />

4. Almost all the module chrome parameters can be removed by searching for the following regular expression pattern:

   (<param name="@cdata" type="cdata" default="" label="[^>]+"><![CDATA[[wWdDrnts]+]]></param>[rnts]+)*(<param name="mod[^r^n]+" type="radio" default="[01]" label=[^r^n]+>[wWdDrnts]+</param>[rnts]+)<param name="mod([^r^n]+)Chrome" type="list" default="([^r^n]+)" label=[^r^n]+>[rn]([ts]+<option[^>]+>[^<]+</option>[rn])+[ts]+</param>([rnts]+<param name="@spacer"[^r^n]+ />)*

   Then replace all the matches with:

   2<param name="mod3Chrome" type="hidden" default="4" />

5. Preset some of the module chrome parameters as we have done before:

   <param name="modLeftChrome" type="hidden" default="jezRounded6Imgs" />
   <param name="modUser1Chrome" type="hidden" default="jezRounded6Imgs" />
   <param name="modRightChrome" type="hidden" default="jezRounded6Imgs" />

Now, it’s time to name our newly created template, let’s name it JEZ_Rego. Still in editor window for templateDetails.xml file, search for:

<name>JEZ_Thema</name>

And replace with:

<name>JEZ_Rego</name>

Then continue searching for jez_thema and replace all the matches found with jez_rego.

Switch to the JEZ Thema directory file list, rename the following files:

language/en-GB/en-GB.tpl_jez_thema.ini
language/en-GB/administrator/en-GB.tpl_jez_thema.ini

to:

language/en-GB/en-GB.tpl_jez_rego.ini
language/en-GB/administrator/en-GB.tpl_jez_rego.ini

Open up the params.ini file under the JEZ Thema directory, then empty its contents before going further.

Close all editor windows, then rename the JEZ Thema directory from jez_thema to jez_rego. Switch to the Joomla administration panel, go to the Extensions -> Template Manager. In the installed template listing, set JEZ_Rego as the default template and then click its name to see a new set of template parameters.

To create an installation package to install our JEZ Rego template into another Joomla! 1.5 site, you simply need to pack all the files inside jez_rego directory, keeping the directory structure, to a single compressed ZIP or GZ file.

Download JEZ Rego packed as a stand alone template [zip].

If you want to create your own Joomla template using the JEZ Thema Joomla theme base, you can download it here.

Tags: create joomla template, joomla theme base

This entry was posted on Monday, April 13th, 2009 at 10:14 pm and is filed under Joomla Themes. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.