Media (CSS, JavaScript and image) overrides

Overriding the HTML output of the component is one thing. Most of the times you don't really want to do that, you just want to customise the CSS, an image or make small changes to the JavaScript. These are all static files and yes, it's possible to override them without making changes to the component itself. This means that any changes you make will survive an update of the component since they live in your template's directory, not your site. These are called media overrides in Joomla lingo.

Joomla currently provides one way of doing that, copying file manually.

There are two things you need to know.

  1. Where are the original files. They are kept in the media/com_ats folder under your site's root.

  2. Where to put the overrides. You need to put them in the templates/MY_TEMPLATE/media/com_ats folder, where MY_TEMPLATE is your site template's folder.

There are a few notes about how these files work.

CSS files

The custom CSS file frontend.css is only loaded if you set the Load custom CSS option in Akeeba Ticket System's Options page to Yes.

Do not try to edit the CSS file directly; it's been automatically generated by parsing the SCSS files in the media/com_ats/css folder. We strongly recommend that you work on the SCSS files in your media override directory and use an SCSS compiler to convert them to CSS. You can of course forego our custom CSS completely and create your own frontend.css file any way you want.

Make sure your file is called frontend.css, not frontend.min.css or anything else.

JavaScript files

You will see that there are two JavaScript files with the same name, one with the extension .js and one with the extension .min.js. For example, CannedReply.js and CannedReply.min.js. Joomla normally loads the .min.js file. If you set Debug Site to Yes in your site's Global Configuration it will, however, try to load the .js file instead. Therefore if you need to override any JavaScript remember to override BOTH files to prevent surprises.

We use Babel to minify our .js files into .min.js. If you don't know how to use Babel it's okay to just copy the .js file with a .min.js extension.

Image files

No special handling is necessary. Just make sure that the file name and extension cases matches. That is to say, image.gif, Image.gif and image.GIF are three different files. The files we ship have lowercase names and extensions.