-
Template Customization
- Adding a different logo for each language
- Adding a new favicon.ico to Joomla
- Adding Google Analytics code to your Joomla template
- Adding new Google fonts
- Applying color to a single menu item in Joomla
- Applying custom CSS to a single Joomla module
- Converting the search field to a module position
- Creating a new module position in the header area of your template
- Customising the dropdown menu styling
- Editing the mobile menu title - 'MENU'
- Hide the component/article area on a page
- Localize web fonts
- Mobile Menu - Linking parent items
Google Analytics is a powerful and free tool for analising traffic coming to your site. When running a website it is often crucial to understand where your traffic is been sourced from and how your traffic behaves once they reach your site. For this Google Analytics is the ideal solution.
To obtain this information Google Analytics uses some tracking code loaded in to every page of your site. Before we start you will need to retrieve this code from your Google Analytics account. For details on doing so may I suggest the following article here.
Here we will describe two methods of adding this code to your template.
The first method uses the Custom Code field found in some of our more recent template releases and couldn't really be much easier. From your Joomla administration navigate to Extensions -> Template Manager -> J51_[YourTempate] -> Custom Code and simply paste your tracking code in to the Head Custom Code field, click Save and that's it. It is important to note that if you are using multiple template styles across your site that you repeat this process for each of them.
The second method describes how to add your tracking code directly to your templates index.php file. This method can be used with any Joomla template, in particular if the Custom Code field is not available to you.
- Navigate to Extensions -> Template Manager -> Template -> [YourTemplate] -> Edit main page template
- Source the closing head tag of the template </head>
- Just before the closing </head> paste your Google Analytics tracking code
- Click Save
You have now successfully added the Google Analytics tracking code to your template.
The icon which appears in your browser tab or navigation bar on your site is called the favicon. You can edit this image by uploading your favicon.ico to the root of your template folder (../templates/YourTemplate/favicon.ico), replacing the existing favicon.ico if it already exists.
To create a favicon.ico you can use an online favicon.ico generator like http://www.favicon.cc/
Note: Because of the way the favicon.ico is cached on your browser it is unlikely you will notice your new favicon.ico straight away on your browser. Simply clearing your browser cache by default will not clear the favicons stored. To test your best option is often to open your site in another browser.
The list of Google fonts available for your templates are stored in your templates googlefonts.php. You will find this file located at ../templates/j51_yourtemplate/elements/googlefonts.php from the root of your Joomla installation.
Simply add a new entry for your font in the list already in place in the following format...
$googleFonts['FontName'] = 'FontName';
A list of font available from Google which can be integrated in to your site is available at the following URL.. http://www.google.com/fonts/