|
So, you have discovered this great Content Management System called Mambo and you want to know how to editing Mambo Templates, images and logo design for your website? Well you have two ways… One way its look trough our “Free mambo templates” section, other way to make your own template from scratch.
From that tutorial you will find out how to make your own Mambo Template.
First of all I want to apologize for my English but I try to be maximum understandable.
Ok let’s understand what a mambo template is.
A mambo template defines how will look your website is.
Usually this look like website with header and footer, 2 or 3 column layout, vertical or horizontal main menu, etc…
Mambo templates consist of following files:
|
index.php
|
Main template file give you control over many things such as module placement, layout design, backgrounds, etc.
|
|
templateDetails.xml
|
Use for template installation from mambo control panel.
|
|
“images” directory
|
Directory that will be used for all template images storage.
|
|
“CSS” directory with template_css.css file inside
|
CSS file to give you control over many things such as font colors, borders, hyperlink hover effects, and a gazillion other things that you will discover if you will read our Mambo 4.5 CSS template manual
|
* All that files and directories will be placed to your “template name” directory. I use mambo2you_02 – directory.
Now we need create new PHP file and name it index.php
Then copy and paste following MAMBO 4.5.1 TEMPLATE HEAD CODE to your php file.
<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );$iso = split( '=', _ISO );echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';?>
<!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 mosShowHead(); ?>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php if ( $my->id ) { initEditor(); } ?>
<?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\" />" ; ?>
</head>
Main Content area.
The main content of website (all content items, categories, sections content, articles, blogs, etc…) will be shown on “mainbody” block.
Block’s
All other content will be show as “modules” (latest news, login box, navigations menu, pools. Etc.) Modules position in your template will be defined by block’s.
Blocks can be placed upright one under another (see image 1), it is possible also to use horizontal arrangement (see image 2).
Image 1
Image2
Modules.
Mambo modules can be ready-made (pools, latest news, news flash, Template Chooser, etc.) or made by administrator from Mambo control panel.
Basic ready-made modules supported with your mambo installation, any other ready-made modules you can download from third-party developers. Find out more www.mamboforge.net or from our website in download section.
* Creating Modules from control panel of Mambo administration system you can insert parts of HTML or PHP code.
Ok let’s look to our layout and try to define how many Modules we will use for understand how many block’s we need include to our template and how our blocks will be called.
Image 3
I use few of standard Mambo 4.5.x blocks position names.
Here is full list of standard mambo 4.5.x blocks positions.
| 1. Left
|
2. Right
|
3. Top
|
4. Bottom
|
| .5. Inset
|
6. Banner
|
7. Header
|
8. Footer
|
| 9. Newsflash
|
10. Legals
|
11. Pathway
|
12. Toolbar
|
| 13. Cpanel
|
14. User 1
|
15. User 2
|
16. User 3
|
| 17. User 4
|
18. User 5
|
19. User 6
|
20. User 7
|
| 21. User 8
|
22. User 9
|
23. Advert 1
|
24. Advert 2
|
| 25. Advert 3
|
26. icon
|
27. Debug
|
|
But if you want to add your own block position name you can add it through Administrator section from main menu:
Site > Template manager > Module Position
Template.
You can set any of blocks position in your template by following code
* with the exception of DATE, PATHWAY, and MAINBODY block
<?php mosLoadModules ( 'name_of_your_block_here'); ?>
Code for mainbody
Mainbody code(most important block that showing main content, categories and sections content, etc.):
<?php include ("mainbody.php"); ?>
Date code:
<?php echo (strftime (_DATE_FORMAT_LC)); ?>
Pathway code:
<span class="pathway"><?php mosPathWay(); ?></span>
Also you can add information about mambo developers and pages load speed.
<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
<?php mosLoadModules( 'debug', -1 );?>
* all block you can insert only in <body></body> tag
Images path in your template must be like that (an example for our Logo path "logo.jpg"):
<?php echo $mosConfig_live_site;?>/templates/your_template_name/images/logo.jpg
Or full tag code:
<img src="<?php echo $mosConfig_live_site;?>/templates/mambo2you_02/images/logoline.gif">
Ok main part of our template is done!
Cascading Style Sheets (CSS)
After finish HTML we need to make our template is good looking with using CSS.
Ready-made CSS you can download here or read my previous article Mambo 4.5 CSS template manual.
Let’s look modules design via CSS in more details.
The great innovation of Mambo 4.5.1 is possibility to set individual classes for every module.(please look module settings in control panel)
Let’s look how mambo shown modules in standard html code on page source – as table:
<table cellpadding="0" cellspacing="0" class="moduletable">
<tr><th valign="top">
Module Heading
</th></tr>
<tr><td>
Module Content
</td></tr>
</table>
But now we can use few other variants:
1. <?php mosLoadModules ( 'left', -2 ); ?>
Show all modules in block “left” not as table but as DIV tags.
Here is example
<div class="moduletable">
<h3> Module Heading </h3>
Module Content
</div>
2. <?php mosLoadModules ( 'left', -3 ); ?>
Show modules in block “left” (an example) as 4 DIV tags put in one into other.
You can use it for orbed corners design.
Here is example:
<div class="module"> <div><div><div>
<h3> Module Heading </h3>
Module Content
</div></div></div></div>
3. <?php mosLoadModules ( 'left', -1 ); ?>
Show all modules in block “left” without tables or DIV tags, in that case modules will be shown without headers.
* useful feature for horizontal modules position, an example few banners abreast.
XML
templateDetails.xml file use for template installation from mambo control panel.
Ok let’s look full XML file step by step.
<?xml version="1.0" encoding="windows-1251"?>
<mosinstall type="template">
<name>Template Name</name>
* must coincide with name of template directory, images path, etc.
<creationDate> Creation Date</creationDate>
<author> Author Name </author>
<copyright> Copyright </copyright>
<authorEmail> Author E-mail </authorEmail>
<authorUrl> www.author-site-name.com </authorUrl>
<version> Number of Template version </version>
<description> Template description </description>
<files>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
* Template screenshot thumbnail that will be visible in template section from control panel and template chooser module.
</files>
* files included to template (except CSS file and images)
<images>
<filename>images/icon_search.gif</filename>
<filename>images/icon_sitemap.gif</filename>
<filename>images/logo.jpg</filename>
</images>
* images included to your template
<css>
<filename>css/template_css.css</filename>
</css>
* Cascading Style Sheets file
</mosinstall>
Now your template done.
If you want to make more scalable template I will give you few advices.
For more complicated design you can make few modifications of index.php file.
1. Following code hide block “left” if you have no published modules in that block on your page.
<?php
if ( mosCountModules( 'left' ) ) {
?>
Here you can add custom HTML code for start of block design
<?php mosLoadModules ( ' left ' ); ?>
Here you can add custom HTML code for end of block design
<?php
}
?>
2. Following code will hide block “left” and “right” in you have no published modules in that block on your page.
But if you have one published module at least both of those blocks will be visible.
<?php
if ( mosCountModules( 'left' ) || mosCountModules( 'right' )) {
?>
custom HTML code here for start of block design
<?php mosLoadModules ( ' left ' ); ?>
<?php mosLoadModules ( ' right ' ); ?>
custom HTML code here for end of block design
<?php
}
?>
3. Hide “mainbody” block. (it is useful for splash page design if you use few templates for your websitre)
<?php
if ($_REQUEST['option'] != 'com_frontpage' ) {
?>
custom HTML code here for start of block design
<?php mosMainBody();?>
custom HTML code here for end of block design
<?php
}
?>
That is it!
If you have any suggestions or comments about spelling mistake or code modification please fill free to contact me any time!
I will be very grateful to you!
Best Regards
Denis Moulden
|
