8
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();

How to pimp your Joomla template.docx

Embed Size (px)

Citation preview

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

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.

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(); } ); Change the marked areas to your needs.

2. Hide empty module codeFor module positions you have normally a wrapping code like this

If you have a menu item with no modules on the position right you still have this code in your template

As we know empty divs is a cause of fault and heavy unsexy! With a little bit of php we can hide this.