01 Jul The Website’s Joomla Template
Then the site was upgraded to Joomla version 3, the template used for earlier versions no longer worked, and the original author was not interested in converting it. It occurred to me that this problem would likely persist across future Joomla version changes, so I looked at the two templates distributed with Joomla, Protostar and Beez. It seemed to me that Protostar could be modified relatively easily to suit the design I had in mind for the website. To effect the version 3 upgrade I copied the entire Protostar template (all its files and subdirectories) from the website’s /templates/protostar directory to a new, empty /templates/fha directory, and that was the starting point for development of the template we use today.
There were three areas of customization tht were needed:
CSS: many of the Protostar styling directives, like typefaces, font sizes, spacing and the like needed to be overridden. Fortunately, the Protostar (and hence the new FHA template provides an easy way to accomplish this: it loads a “user.css” style sheet after it loads the “template.css” (default) style sheet, so all the overrides are placed in the user.css sheet, and the problem is solved.
Javascript: I wanted to support some special (not built in to Joomla) formatting and styling, so this code was placed in a file “fha_template.js” in the /templates/fha/js directory, and a line added in /templates/fha/index.php, the template’s “home page” to load this file after the templates.js file, and so that problem was also addressed.
index.php – the template’s “home page” needed modification to handle the always-on-top (blue bar) menu known as the “top menu”, as well as some other FHA goodies like the “GET HELP…” link and the transparent “To Top” icon that appears in the lower-right corner if the user scrolls down an inch or so.
So far, all the technical solutions have been fairly clean, but cause a recurring bit of maintenance that needs doing. It turns out that almost every update to Joomla (e.g., 3.4, 3.5, 3.6,…) also update the many files comprising the distributed Protostar template, the these files must be carefully tested and brought into the FHA template. As a note, I didn’t think to do this for the first year or so after Joomls 3 was installed on the site, and nothing seemed to break in the template as a result of the template code being out of sync with the rest of Joomla. My bad: it occurred to me to look at the Protostar index.php file, and carefully update the FHA index.php file, I didn’t look at the rest of the template files, which of course, also had changes.
Well I was lucky because this “partial update” of just the index.php file got along OK with the rest of Joomla. However, from now on, when Joomla gets updated, the entire FHA template should be updated with the newer Protostar template files. In general, it’s OK to copy all the files from each /templates/protostar subdirectory into the corresponding /templates/fha subdirectory with three exceptions: Do not copy
- index.php
- template_thumbnail.png
- template_preview.png
The two png image files are used on the administrator’s Extensions>Templates page. The index.php file must be updated with the existing FHA mods before it can be used on the site.
The FHA customizations (user.css, fha_template.js and some formatting overrides) are not present in the Protostar template, so copying all the files from the Protostar template’s subdirectories will not destroy them. Note: copying the subdirectories, instead of copying the files in the subdirectories WILL destroy the FHA customized files.