Development

According to last templates update which are based on T3 framework, except some changes connected with adding fonts, extending the list of Google Fonts, we have prepared a new functionality, namely support for Font Squirrel. I would like to describe it in short how it works and which allows enrich typography of our site very easily.

The possibility of embedding fonts in CSS is still a distant perspective because of lack of support in browsers used by majority of Internet users. However, sometimes there is a need to use font in layout which is completely different in its look than other font group which is available for Internet users. A solution to this problem can be Cufon script.

Templates for Joomla! have a specific feature – they are quite extended, especially when it comes to CSS code; while creating a template it is essential to style standard subpages, additional modules, components. The more we want to care about the details, the more the amount of code rises where some parts multiply. Therefore, I have been using CSS pre-compilers for some time to create templates. One of such tools is LESS. I will show you how to use LESS in a template which is based on the latest version of T3 Framework used in our templates and I will show how to use its possibilities.

Today, I will try to solve the common problem with site’s background change according to subpages which should be reduced to some extend in Joomla! 1.6 and where there would be a possibility to change template’s settings for particular subpages (now, we have to create copies of a template given and assign it to particular subpage).

Today’s entry will be connected with extensions styling for Joomla! It offers us access to head section of a document, thanks to which it is possible to add script or CSS style from a module/component level. Some developers eagerly use this option in order to e.g. avoid embedding link elements inside body section of a storefront (which, by the way, causes validation errors). I will describe access and operations on head sections template for Joomla! next time as it is quite important and wide topic. But for this moment a little trick which can be useful while creating, e.g. a template for mobile devices.

Some code fragments in a template often repeat; there is a additional structure between a code creating template’s configuration and a code generated by a module in the form of additional containers. They are used e.g. in title module presentation, in creating rounded edges around a module or containers famous for debugging template mode. Joomla! offers six styles – their detailed descriptions and structures may be found here.

Sometimes some additional elements or different structure than a standard are needed. Of course it is also possible with Joomla!; we can create as many own module styles which fulfill our needs as we want to create.

While creating a template for Joomla! we can define not only the main page and subpages look but also the look of standard error messages or information about storefront’s maintenance works. If needed, we can also define our own templates which fulfill certain conditions, e.g. which are needed to exchange data with AJAX use. It can be done thanks to variable tmpl which is in address.

Joomla! 1.5 and many of its extensions in JavaScript scripts still use MooTools 1.11, which have sometimes problem with supporting DomReady (DOMContentLoaded) event in IE browsers.

In our selected modules we had implemented new including method for style sheets and scripts files.

In older modules you need to enable/disable manually script and mootools for each one. Additionally in some modules you have to move manually link element to head section of document for correct page validation.