Customising Layouts - Template Override Basics

As of JEvents 2.0+ you should take a look at the JEvents Custom layouts editing tool first - this allows you to customise your event detail and list pages without needing to do any PHP coding.

Click here for more information

So you want to customise one of the layouts provided by JEvents but you don't want these changes to be lost when you upgrade.  This is a very brief guide - if you want more general information about template overrides then I'd recommend you search for Joomla! template overrides in a search engine.

Basic Changes

Lets assume you want to customise the year list view of the Geraint layout.

  1. Create a folder called html e.g. ( templates/ja_purity/html/ ) If it exists proceed to the next step
  2. Create a sub folder called com_jevents  e.g. ( templates/ja_purity/html/com_jevents )
  3. Create a sub folder called geraint e.g. ( templates/ja_purity/html/com_jevents/geraint )
  4. Create a sub folder called year e.g. ( templates/ja_purity/html/com_jevents/geraint/year )
  5. Copy the file listevents_body.php from /components/com_jevents/views/geraint/year/tmpl/ to this new folder, note if this file contains very code text you may need to take it from the default view. E.g. /components/com_jevents/views/default/year/tmpl/
  6. Change this copy as you want (remember to clear your cache)

Joomla should use this copy in preference to the core JEvents component file from now on and you won't loose these changes if you upgrade JEvents

Module overrides

If you want to customise the latest events module: e.g. Create an override for a latest events module. 

You must create the override file from:

modules/mod_jevents_latest/tmpl/YOUR_JEVENTS_THEME/latest.php

to

templates/YOUR_TEMPLATE/html/mod_jevents_latest/YOUR_JEVENTS_THEME/latest.php

e.g. templates/beez_20/html/mod_jevents_latest/geraint/latest.php

Then you need to set it as an Override, so if you were using the Geraint theme it would go from:

[codep]
class GeraintModLatestView extends GeraintModLatestView 
[/codep]

To:

[codep]
class OverrideGeraintModLatestView extends GeraintModLatestView
[/codep]

Then customise the layout as you want.
Notice the Override before GeraintModLatestView. If you do not include this then the override will be ignored.

More Advanced Changes

You want to customise the stylesheets or images.

Follow setps 1-3 above and then

  1. Create a folder called  assets/css or assets/images within this folder e.g. templates/ja_purity/html/com_jevents/geraint/assets/css
  2. Put your modified stylesheet or image in this folder

Serious Changes

You realise you need to change or add a helper function (e.g. the iconic navigation bar)

Follow  steps 1-2 from "basic changes"then

  1. create a sub folder called helpers
  2. copy the helper file e.g. defaultviewnavtablebariconic.php to this folder
  3. modify as required

Geraint

  • Last Updated: Tuesday, 01 August 2023