Support

Documentation

Customising the front-end layout

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]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

  1. Find your current template's subdirectory in your site's root, under the templates directory. In this example, we will assume it is templates/mytemplate

  2. Create a new directory templates/mytemplate/media/com_ats/css This is your media files overrides directory.

  3. Copy the CSS files you want to modify from media/com_ats/css into the templates/mytemplate/media/com_ats/css directory. From now on, Akeeba Ticket System will load these new CSS files instead of the files found under media/com_ats/css.

  4. Edit the CSS files in templates/mytemplate/media/com_ats/css replacing or adding CSS rules so that the design matches your desired style

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

  1. Find your current template's subdirectory in your site's root, under the templates directory. In this example, we will assume it is templates/mytemplate

  2. Create a new directory templates/mytemplate/media/com_ats/js This is your media files overrides directory.

  3. Copy files from media/com_ats/js into the templates/mytemplate/media/com_ats/js directory. From now on, Akeeba Ticket System will load these new files instead of the files found under media/com_ats/js.

  4. Edit the files in templates/mytemplate/media/com_ats/js and adjust the JS code to your liking.

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.

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:

@atsEditor

Shows the ATS editor (bbCode or WYSIWYG)

@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.

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-agnosting 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.

Cookies Notification - Action required

This website uses cookies to provide user authentication and improve your user experience. Please indicate whether you consent to our site placing these cookies on your device. You can change your preference later, from the controls which will be made available to you at the bottom of every page of our site.