How to customise Joomla

Sydney Joomla User GroupPresented by Tim Plummer

Why would you want to customise

• Don’t want all websites to look the same• Everyone has different requirements• Out of the box solution doesn’t quite do what

you need it to

Challenges you face

• Having to reapply changes (if you hack core code)

• Keeping track of all the customisations• Conflicting code

Why Joomla is easy to customise

• MVC coding (model – view – controller)– Separation of view (what you see) to data (model

talks to database)• Open source and licensed under GPL– Access to all unencrypted source files– GPL allows you to make whatever changes you

need• Ability to override almost everything

Ways to customise

• Apply different template• Template overrides • Alternative Layouts• Language overrides• Media overrides• Plugins

Site template

• Can completely change look and feel by changing template

• Install third party template or create your own• Different templates can apply to different

pages of your site

Same content, different template

Custom CSS

Some site templates have custom CSS option where you can put your styles

Others have a custom.css or user.css file which is not overwritten during updates (you may need to manually create this)

Template overrides

• Allows you to change output of extension– Adjust output formatting/style– Remove unwanted functionality– Add your own new functionality

• Can create template overrides for components and modules

Example of module override

• If you wanted to remove the “forgot your username” on login module

How to create override

Extensions->templates->Templates

Select your template

How to create override

Select “Create Overrides” tab, and choose what to override

How to create override

Expand HTML folder, choose extension you are overriding, and edit the default.php file

How to create override

Remove the text/code you don’t need

How to create override

Now your change has taken effect

Things to be aware of

• Overridden files will never be updated, so if new feature is added to component/module then you may not be benefit from changes

• Overrides are stored in your template, so if you change template you will also need to reapply overrides

Alternative Layouts

• Apply different output formatting to same content

• Similar to template override, but file has different name

• The only rule is that the file name should not have any underscores in it

Alternative Layouts

How to create alternative layout

Start with a template override

How to create alternative layout

• Rename the override file

How to create alternative layout

• Customise the layout file as needed• Apply new alternative layout to content

How to create alternative layout

Example of how you could implement 2 column layout

Change to

Same content, different layout

Language Overrides

Change any text in Joomla

Site = front endAdministrator = back end

Why override language string?

• Allows you to customise any text in Joomla core or third party extensions

• Text changes will not be affected by upgrades

How to create language override

• For example, if you want to change “forgot your password?” on the login form

How to create language override

Search for text, and select language string

How to create language override

Change the text, then save and close

How to create language override

Text has now changed

Media Overrides

• Any third party extension build with Akeeba Framework On Framework (FOF) will automatically support media overrides

• Like template overrides, but for CSS, JS and image files

How to create media override

You can override FOF media files by copying from /media/component_name/css/yourfile.css

to /templates/yourtempalte/component_name/css/yourfile.css

For example:/media/com_bfsurvey/css/theme_blue.css/templates/protostar/media/com_bfsurvey/css/theme_blue.css

Note you may need to created media folder in your template.

How to create media override

Same form with different CSS due to media override

Plugins

• Plugins can allow you to customise Joomla– Transforming data (eg. Phone number to click to

call link)– Add extra fields (user profile plugin)– Override core functions (system plugin that loads

before core funtion)• Can be triggered by events (such as

contentprepare), or can run all the time (system plugins)

Example of user profile plugin

Questions?

Tim Plummerwww.tamlynsoftware.com

@bfsurvey