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.

In the past, we used a code modification to remove the very annoying and unnecessary tooltips from the Joomla Contact Us pages. Following a clue on one of the Joomla support areas on the web, we resorted to an ugly code amendment, in file /media/jui/js/bootstrap.min.js. (removing html and text from within the quotes in the instructions [this.options.html?"html":"text"]). However, this change also removed tooltips (for example in the Calendar) that we did want.

We tried again, and found a far simpler and more elegant solution, which was to change the file /language/overrides/en-GB.override.ini, adding the following definitions:

COM_CONTACT_CONTACT_EMAIL_NAME_DESC=""
COM_CONTACT_EMAIL_DESC=""
COM_CONTACT_CONTACT_MESSAGE_SUBJECT_DESC=""
COM_CONTACT_CONTACT_ENTER_MESSAGE_DESC=""
COM_CONTACT_CONTACT_EMAIL_A_COPY_DESC=""
COM_CONTACT_CAPTCHA_DESC=""

This deletes the text that normally goes in the tooltips, and means no tooltips are displayed.

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

$link1=substr(trim($row->link),0,1);

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:

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