How to pimp your Joomla!

Template
The following article describes how to pimp your converted Joomla! template into a template with more advanced functions. It should be a help if you are new to joomla or if you made a nice template but you miss some extras in it, that you know from commercial templates from the template clubs and other professional joomla! templates builders. 1. Integration of the system message <jdoc:include type "message"> With this little snippet you can integrate feedback for the user like "article saved" or "Username and password do not match or you do not have an account yet." or wathever Joomla! returns. Often it is placed near the content but this depends how you will style it and how your template is ordered. If you love mootools and fancy animations you can also animate your message with this little script I found here. <script type="text/javascript" > var tmjmosmsg,fx; function pload(){ tmjmosmsg=$$('dl#system-message'); if($type(tmjmosmsg[0])=='element'){ var el=tmjmosmsg[0]; el.setStyle('overflow','hidden'); var h=el.getSize().size.y; fx = new Fx.Styles(el, {duration:900, wait:false}); //scrol to message winScroller = new Fx.Scroll(window); winScroller.toElement($('content')); //delayed start, then remove the html element upon completion (function(){ fx.start({ 'margin-top':-1*h.toInt(), opacity:0 }).chain(function(){el.remove();}); }).delay(2500); } }; window.addEvent('load',function(){ pload(); } ); </script> Change the marked areas to your needs.

2. Hide empty module code For module positions you have normally a wrapping code like this <div class="sidebar2"> <jdoc:include type="modules" name="right" style="rounded" /> </div> If you have a menu item with no modules on the position right you still have this code in your template <div class="sidebar2"> </div> As we know empty divs is a cause of fault and heavy unsexy! With a little bit of php we can hide this. <?php if($this->countModules('right') :?> <div class="sidebar2"> <jdoc:include type="modules" name="right" style="rounded" /> </div> <?php } ?> Check also this further reading about counting modules and combinations of it on http://docs.joomla.org. 3. Collaps Colums Tip number two is fine because it cleans the code. But the layout itself stays the same. What we want to have now is that the content area always fits in the place that's around or in other words that the content takes the full possible width. Let us takte a 3 column example layout with the positions "left" and "right" for the sidebars and a div with the id "content" for our main body. What we need is again a little bit of php we place somewhere in the index.php of our template <?php if($this->countModules( 'left and right' ))== 0) $contentwidth = "100"; if($this->countModules( 'left or right' ))== 1) $contentwidth = "80"; if($this->countModules( 'left and right' ))== 1) $contentwidth = "60"; ?> Please also extend your div in the index.php with the variable $contentwidth <div id="content<?php echo $contentwidth;">"> <jdoc:include type component" /> </div> ..and your template.css file with this #content60{float:left;width: 60%;overflow:hidden;} #content80{float:left;width: 80%;overflow:hidden;} #content100{float:left;width: 100%;overflow:hidden;} This is one solution from Barrie North from Joomlashack (or Compass Design). There are many other solutions for this around. Important is that you see how php, css and xhtml can work together to define the layout.

4. Add a favicon easy This is a short advice: Give you template your own favicon and load it into the root folder of your temlate. To generate a favicon from scratch use a online favicon generator. Some people say that adding a small favicon speeds up your site "because even if you don't care about it the browser will still request it".

5. Add custom Icons for print, send and pdf functions Place your own custom icons into your templates images directory. Be sure you name the icons according to Joomlas naming convention. The images need to be in the .PNG format. 1. Change the default Joomla PDF icon use an image named: pdf_button.png 2. Change the default Joomla Print icon use an image named: printButton.png 3. Change the default Joomla Email icon use an image named: emailButton.png 6. Customize the print view Create a new or copy the component.php file from an existing Joomla! template to your template folder. We did a custom component.php for conplus.ch that fits on a A4 Paper and integrates logo, address, date & URL.

7. Use overrides for customs views and tableless layouts. There is a good and a bad message. Let's start with the bad one: Joomla! 1.5 has still tables for layouts in the output of different views of some core components like com_content or com_contact. That's a shame and has nothing to do with a modern WCMS. Anyway let's listen to the good news: Joomla! is programmed in the MVC pattern and allows us to "override" all of this ugly tables with our template. So there is a way to produce table-less layout with faster, smoother, and semantically correct markup. The first template with some heavy overrides was the Beez template that comes with your installation you'll find in your template folder. The directory structure you need to override is: TEMPLATE_NAME/html/EXTENSION_NAME/VIEW_NAME/FILE_NAME.php

For example, if you want to change the way that the 'Article' view displays a com_content article, then you should copy the file at: PATH_TO_JOOMLA/components/com_content/views/article/tmpl/default.php to TEMPLATE_NAME/html/com_content/article/default.php

If you want to start quick and easy with a table-less layout copy the html folder from Beez into your template or download and integrate the great and free overrides package from Yootheme. further readings to this: http://developer.joomla.org/tutorials/165-understanding-output-overrides-in-joomla.html http://docs.joomla.org/Understanding_Output_Overrides http://newtojoomla.com/pages/visual/override_footer/index.htm http://www.theartofjoomla.com/home/6-layouts/38-layout-override-making-a-joomla-section-look-like-a-bookcontents.html 8. Remove mootools and caption.js if you don't use it. In the header of you template output you find the following two javascripts: <script type="text/javascript" src="/media/system/js/mootools.js"></script> <script type="text/javascript" src="/media/system/js/caption.js"></script>

Maybe you don't use mootools.js and caption.js at all in your template. Their size are about 75K, and decrease the response speed of Joomla site.You can speed up your site if you remove this two lines out with the following code. Put it of the top of your index.php template file: <?php //remove mootools.js and caption.js $headerstuff=$this->getHeadData(); reset($headerstuff['scripts']); foreach($headerstuff['scripts'] as $key=>$value){ unset($headerstuff['scripts'][$key]); } $this->setHeadData($headerstuff); ?> Attention: Your frontend editor won't work anymore after including this. If you just want to remove it on your start page only use this code: <?php // Remove mootools.js and caption.js on StartPage $menu =& JSite::getMenu(); if ($menu->getActive() == $menu->getDefault()) { $headerstuff = $this->getHeadData(); unset ($headerstuff['scripts'][$this->baseurl . '/media/system/js/mootools.js']) ; unset ($headerstuff['scripts'][$this->baseurl. '/media/system/js/caption.js']) ; $this->setHeadData($headerstuff); } ?> or remove it for visitors/guests only <? // Remove mootools.js and caption.js fr Gste $user =& JFactory::getUser(); if ( $user->guest ) { //if ( $user->usertype == null || $user->usertype == '' ){ $menu =& JSite::getMenu(); if ($menu->getActive() == $menu->getDefault()) { $headerstuff = $this->getHeadData(); unset ($headerstuff['scripts'][$this->baseurl . '/media/system/js/mootools.js']) ; unset ($headerstuff['scripts'][$this->baseurl. '/media/system/js/caption.js']) ; $this->setHeadData($headerstuff); } } ?> Keep in mind that some of the extensions like galleries need this libraries for nice visual effects.

9. Use Joomla! template parameters for flexible templates Template parameters allow the administrator to adjust the behaviour of a template using a form in the backend. Things like different color variations, different widths of the layout or customizable header titles are typical parameter settings. What parameters are available and what they do is down to you as joomla template designer. With the template parameters you have a easy-to-use tool for building flexibility into templates. For short you need to do three things:

Adding a <param> element to the <params> section of the templateDetails.xml file. Adding a line to a params.ini file which will hold the current value of the parameter. Adding code to the template PHP file to retrieve the current value of the parameter and act on it.

You find further readings to this topic here: http://docs.joomla.org/Tutorial:Template_parameters

10. Make frontend editing looking better If you develop a template from scratch the frontend editing form looks naked and comes without any or less style. If you would love to have styled buttons, styled tooltips and a nicer looking mask for your frontend editing form, copy the folder images-general from the Beez template and integrate the file general.css also from the Beez template into template index.php file.

In the css file general.css you will also find the selectors for the tooltip, the buttons and the system messages. Feel free to customize if you don't like the look of Beez (what I really understand :-)).

11. Customize error pages HTTP Server Status erros like "403 Forbidden", "404 Not Found" doesn't look good in Joomla! 1.5. The file for this is lovated in templates/system/error.php. You can style the error results if you override the system error results. 1. copy the templates/system/error.php file into your templates/<template-name> directory. Joomla! will use the error.php file from the current template, in place of the system file. You can format the page, as desired, to match your template. 2. copy the templates/system/css/error.css file into your templates/<template-name>/css directory. 3. update the your templates/<template-name>/error.php file to reference the new location of the stylesheet by changing this line: <link rel="stylesheet" href="/templates/<template-name>/css/error.css" type="text/css" /> How a perfect 404 message should look and what should be in it is up to you.