Layout customisation usually involves either changing just the CSS or changing both the CSS and HTML output of the component. Both can be accomplished with template overrides. We will explain the two procedures below.
![[Warning]](/media/com_docimport/admonition/warning.png) | Warning |
|---|---|
|
Newer versions of the component may introduce changes to the base CSS and/or Javascript files or the HTML output. We recommend you to review your overridden files every time you upgrade Akeeba Ticket System. We will not accept bug reports or provide any hsupport if you are using template or media files overrides on your site as you are no longer running our tested code against our tested layout and our tested Javascript. If you want our help please make sure you can reproduce the issue without any template or media overrides. |
Customising the CSS
-
Find your current template's subdirectory in your site's root, under the
templatesdirectory. In this example, we will assume it istemplates/mytemplate -
Create a new directory
templates/This is your media files overrides directory.mytemplate/media/com_ats/css -
Copy the CSS files you want to modify from
media/com_ats/cssinto thetemplates/directory. From now on, Akeeba Ticket System will load these new CSS files instead of the files found undermytemplate/media/com_ats/cssmedia/com_ats/css. -
Edit the CSS files in
templates/replacing or adding CSS rules so that the design matches your desired stylemytemplate/media/com_ats/css
Please don't ask us for CSS or design ideas. We are good developers and horrid designers. You can ask us, however, regarding any issues you might experience overriding our CSS files.
Customising the Javascript
-
Find your current template's subdirectory in your site's root, under the
templatesdirectory. In this example, we will assume it istemplates/mytemplate -
Create a new directory
templates/This is your media files overrides directory.mytemplate/media/com_ats/js -
Copy files from
media/com_ats/jsinto thetemplates/directory. From now on, Akeeba Ticket System will load these new files instead of the files found undermytemplate/media/com_ats/jsmedia/com_ats/js. -
Edit the files in
templates/and adjust the JS code to your liking.mytemplate/media/com_ats/js
Customising the HTML output
Sometimes it's not enough modifying the CSS. In order to achieve your desired styling you may also have to add some extra div or span elements in the HTML output. When this happens you need to perform template overrides for our view template PHP files, a process called Template Overrides in Joomla! jargon. Instead of reinventing the wheel by writing lengthy instructions, we think it's better for you to read the official Joomla! documentation on the subject.
Please note that Akeeba Ticket System is using the updated view
template locations introduced with Joomla 4, even when used on older
Joomla versions (it has its own compatibility layer). You will find
the view template files inside the
components/com_ats/tmpl/
folder where ViewNameViewName is the name of the
view. These files need to be copied to
templates/.
Older versions of Akeeba Ticket System had their view template files
inside the
mytemplate/media/com_ats/html/ViewNamecomponents/com_ats/tmpl/
folder. The view template override logic remains the same. The
renaming of the main view templates folder of the component does not
have any impact on your template overrides.ViewName
Akeeba Ticket System 3 and later uses the Blade template language instead of straight-up PHP view templates. You can read more about Blade in the Wiki page of our framework. Blade templates have the extension .blade.php and are compiled to PHP on-the-fly. The whole point of using Blade is that the view templates are easier to read and modify by front-end developers.
On top of the regular Blade syntax, ATS uses the following Blade extensions:
- @atsTicketStatusSelect
-
Shows a dropdown to select the ticket status (e.g. Open, Pending, Closed), typically used for applying filters in the front-end.
- @atsCategorySelect
-
Shows a dropdown to select a ticket category, typically used for applying filters in the front-end.
- @atsPrioritySelect
-
Shows a dropdown to select the ticket priority (e.g. low, medium, high), typically used when filing a new ticket.
- @atsFormatDate
-
Format a generic GMT date string.
- @atsFormatDateTZ
-
Format a generic date string, displaying the result in the user's timezone, as set up in their Joomla! user profile.
- @jsLang
-
Makes a language string visible to the JavaScript of the page.
- @parseBBCode
-
Echoes the input after parsing it for bbCode. Used whenever content stored as bbCode in the database needs to be displayed on the page as HTML. This is used for legacy content which used to be stored as bbCode. ATS no longer uses a bbCode editor and doesn't store bbCode (it stores HTML content).
You should normally not have to modify what is between the parentheses following any of these extensions. Moreover, you MUST NOT add line breaks between the parentheses; that would make it impossible to render them.
Overriding the loading of FEF
Akeeba Ticket System uses the Akeeba Frontend Framework (FEF) to render its interface. This is a CMS-agnostic framework which is designed to work well inside pretty much any third party template. If you want to completely override the layout of Akeeba Ticket System and replace all the FEF-specific markup with your own (e.g. Bootstrap or something specific to your template) you should also not load FEF. You can control that with the component options. DO NOT try to override the FEF CSS and JS. This can have unpredictable results on your site!
Please note that in this case you should override both the view template and the JavaScript on every page. Most of our JavaScript is written on the assumption that the markup on the page is written for FEF and uses the FEF JavaScript libraries as well.
It is typically much easier writing custom CSS rules in your site's template, targeting the HTML output of ATS, than overriding the HTML, CSS and JavaScript of the component. As with all of our frontend components, we wrap the component's output in a DIV element with classes which let you target the component, a particular view and / or task, even a particular Joomla version. We try to include HTML classes and IDs in all other elements useful for targeting CSS rules consistently. We use our own software on our own sites where we need to apply some custom CSS to make everything look nice. We understand how site integrators' work and try to make your life easier.