A guide to modifying our Joomla template’s head section

Last Updated:
Category:
Other

Page’s head section is an important fragment storing information about a website and most scripts and CSS styles prepared for content presented on a website.

Joomla! generates key elements of head section, such as <title> tag or <meta> tags. The most often we need to add some additional scripts or CSS styles in head section. In order to do this, we have to make all operations on a file which generates its content between <head> tags. In the case of Gavern Framework, the file is layouts/blocks/head.php.

In Gavern Framework, we created alias for many API functions of Joomla! framework connected with templates.

Scripts and CSS styles can be added in two ways – as external files or they can be embedded directly in head section. There are addCSS and addJS functions used for adding scripts and files as external files.
Below, there are examples of these functions requests:

$this->addCSS('path_to_the_CSS_file.css');
$this->addJS('path_to_the_JS_file.js');

Equivalents of these functions which add CSS/JavaScript directly to head section are addCSSRule and addJSFragment functions:

$this->addCSSRule('body { color:#000; }');
$this->addJSFragment('if(x > 0) alert("x is bigger than zero!");');

Additionally, in the case of functions which add external files to a website, surely two functions will be helpful, namely: URLbase and URLtemplate. The first one returns url to our homepage and the second one generates url to a catalog of a current template. So, if we want to add CSS file to our template which is in css/ catalog, it is enough to have:

$this->addCSS($this->URLtemplate() . '/css/style.css');

It is worth remembering that addCSS function function use is necessary for one template’s functionality – CSS styles compression. Therefore, we are not recommending you to add CSS styles in a different way than e.g. with <link> tag.

A guide to modifying our Joomla template’s head section 2.505 (50.00%) 4 votes

This article was first published

Villa Belluci - View our NEW theme
×

Tutorials & tips delivered regularly

Expand your purchase with regular tutorials and tips to making your site better, direct to your email.