For the initial version of this site, a number of modifications were done to the Joomla code, to give the site the 'look and feel' we wanted.


Since the upgrade to Joomla 2.5 and then to Joomla 3, we have been able to abandon most of these modifications. We have been able to achieve what we wanted partly through increased understanding of the use of CSS to control page display, and partly because Joomla modules are now more personalisable.

Just four code files have still needed modification.

Firstly, the Jooma extension that provides the calendar, JEvents, is excellent, and is highly configurable. However, there are a few parameters that are hard-wired into the code, and we have modified the file /components/com_jevents/views/ext/month/tmpl/calendar_body.php in two places to achieve the look we wanted:

  1. The height of the rows in the month-view calendar is fixed to 80 pixels, which is too large for our purposes. In the file we have therefore changed the line
        <tr valign="top" style="height:80px;">
    so that the style is set to "min-height:60px;". This has the effect of reducing the height of most rows in the calendar, but also allows the rows to expand to fit days with more than one event.
  2. We have modified a number of CSS style definitions (using the CSS customisation mechanism provided as part of JEvents) so that the monthly calendar has a semi-transparent background, but the cell displaying the displayed month had a background colour fixed in the code. We have changed the line
        <td colspan="3" class="currentmonth" style="background-color: rgb(208, 230, 246);" align="center" height="22" nowrap="nowrap" valign="middle">
    so that the background colour is set to rgba(208, 230, 246, 0.6).

The modified version has been saved as a Jooma override, in folder /templates/spatomic/html/com_jevents/ext/month. The amended file will need to be checked against future updates on JEvents.

It would of course be much better if these changes could be achieved via CSS styles. Any chance, Geraint?

More recently (May 2019), we chose to use another page format for the Calendar - this actually makes the above change irrelevant. However, for the monthly calendar view to work properly in narrow screens (such as on mobile phones) it was necessary to amend the file /components/com_jevents/views/default/month/tmpl/calendar_body.php by adding <div style="overflow-x:auto"> just before <table width="100%" align="center" border="0" cellspacing="1" cellpadding="0" class="cal_table">, also adding echo "</div>\n"; just after echo "</table>\n";. This ensures that the calendar table can be scrolled sideways if it does not fit the screen. It was not possible to implement this change as an override.

The second file we have modified removes the very annoying and unnecessary tooltips from the Contact Us pages. These tooltips appear by default at the extreme left edge of the screen, irrespective of the position of the window displaying the Sutton Poyntz website. We tried and failed to fix this via CSS, so resorted to an ugly code amendment, in file /media/jui/js/bootstrap.min.js.

The instructions


were altered to read [this.options.html?"":""]. This hint has the effect of not displaying a tooltip. The change needs to be re-implemented every time this code is updated by Joomla.

Finally, we have modified the Google maps extension gmapfp so that it recognises an anchor as a valid type of link for a place on a map. This was achieved by modifying file /components/com_gmapfp/libraries/map_v3.php, firstly to add the instruction


after the group of similar instructions, and secondly, in two places to add ||($link1=="#") after if($link5="http:")||($link4="www.")

Not a code modification, but the template.css file for the Isis template has been modified to comment out some lines whose effect seems to be to stop folder and file lists displaying horizontally across a wndow when trying to insert an image or a document link. The format instructions commented out apply only to narrow[ish] screens, and are:

    .thumbnails {
        margin-left: 0;
    .thumbnails > li {
        float: none;
        margin-left: 0;