Template design is my favorite Joomla topic.

With a few lines of PHP I can load custom CSS files, redesign a module's output, add responsive support and do much more.

In this post, I'm going share with you a few tips to develop or customize a Joomla 3 template.Joomla 3 template.

Tip #1. Load CSS and JS files

If you want to add your own CSS or Javascript files, here's how to include them in a template:

• Go to templates/your-template/
• Edit index.php file

To load a Javascript file, add the PHP code below just before opening the HTML structure. Replace "js/yourfile.js" with the path to your file.

JFactory::getDocument()->addScript($this->baseurl . '/templates/' . $this->template . '/js/yourfile.js');

To load a CSS file use the code below. Replace "css/yourfile.css" with the path of the CSS file, within the template:

JFactory::getDocument()->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/yourfile.css');

Tip #2. Print the sitename

The sitename value comes from Sytem > Global configuration > Site name

To print the site name within your design, use a line of PHP in any part of your index.php file from the template:

echo JFactory::getApplication()->get('sitename');

Tip #3. Add meta viewport for responsive support

The viewport defines the visible area of the website. Add the meta viewport just after opening the head tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

To allow users to zoom the site (very useful in mobile devices), increase the "maximum-scale" property value:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0" />

If you choose 2.0, a user can zoom the site in as much as 200%.

Tip #4. Add a custom style to a module position

• Edit index.php from templates/your-template/
• Change the style value of one of the module positions. In my example I udpated to "custom".

<jdoc:include type="modules" name="my-custom-position" style="custom" />

• Edit modules.php file from templates/your-template/html/
• At the end, add the code below:

function modChrome_custom($module, &$params, &$attribs)
{
    echo '<div class="custom-module-style">';
    
    if ($module->showtitle)
    {  
        echo '<h3>' . $module->title . '</h3>';
    }
  
        echo $module->content;
  
    echo '<div>';
}

The function name should use the style value from the module position, in my example is "custom":

function modChrome_custom($module, &$params, &$attribs)

Play with the html structure to output for this module by echoing HTML tags such as h3 and div. The code below wrap the module content with a div with a custom class:

echo '<div class="custom-module-style">';

Print the module title when is enabled in the params:

if ($module->showtitle)
{  
    echo '<h3>' . $module->title . '</h3>';
}

Print the module content:

echo $module->content;