Cascading Stylesheets in Agile Toolkit

Cascading Stylesheets are quite powerful tool to change the look of your application. If you know CSS well you can implement many tweaks with no or very minor changes to HTML template files. This section will explain CSS structure of Agile Toolkit.

Default CSS file locations

You should probably know by now, that Agile Toolkit has a concept of "skins". By switching between different skins you can change set of template files. By default skin is set to "default" (although it used to be "jui" by default in 4.0 version). Skin can be changed inside index.php file as 2nd argument to "new Frontend(..)" constructor. By default this argument is omitted. If you wish to use another bundled skin called "elephant" you should have this in your index.php file:

$api=new Frontend('sample_project','elephant'); // Use something unique instead of sample_project

By default Agile Toolkit looks for templates inside the following directories:

Note: Never change files inside atk4 folder. Copy only the files you want to change into templates/ and then change there.

CSS files included by default

File which contains CSS includes is called "shared.html". It is also referred to as Application Template, because it applies to all the pages in your application. Initially atk4/templates/shared/shared.html is used.

Application template is using tag <?template?> to look up files and substitute with proper location. This technique allows your application to find files in the right directory and insert them right into outputted HTML.

If you wish you can add additional stylesheet files here, just remember to properly enclose paths into "template" tag.