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.4, 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 a few 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).

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

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 instruction

[this.options.html?"html":"text"]

was altered to read [this.options.html?"":""]. This has the effect of not displaying a tooltip.

Lastly, we have altered two files related to the Editor, to allow the author to set the width of an image being added to a page. The editor is designed so that the size of an image can be set using drag handles, but some browsers do not provide this functionality. To overcome this:

  1. The file /administrator/modles/com_media/views/images/tmpl/defaut.php was altered to display a Style input box, by adding the PHP code

            <div class="row">
                <div class="span6 control-group">
                    <div class="control-label">
                        <label for="f_caption">Style</label>
                    </div>
                    <div class="controls">
                        <input type="text" id="f_style" value="" />
                    </div>
                </div>
            </div>

  2. The file /media/media/js/popup-imagemanager.js was altered to use the style input by the author in this new Style box. A new line was added:
        this.fields.istyle = document.getElementById("f_style");
    to accept the input, followed later by the code
        var istyle = this.fields.istyle.value;
    and
        if (istyle != '') {extra = extra + 'style="'+istyle+'" ';}
    to append the style to the image.