Stylesheets

Sometimes you want to change the look and feel of one of our extensions. One way of doing this is by creating a template override. This is great if you need to change the actual HTML markup that is generated by the extension. However, if you only need to change the looks adding custom CSS is probably the easier solution.

Doing custom CSS overrides is not something that is as easy as adding a file somewhere, like template overrides. Joomla does not provide a native mechanism to load overriding css files based on placement in the template's directory structure. With template overrides we have the ./html directory of the template, but with CSS there is no counterpart.

Adding custom CSS to a commercial or free template

It’s important when adding custom CSS to a template you do so in such a way that you can still safely update the template without losing any of the changes you have made.

Most Joomla templates have built-in functionality for this. They either allow you to add the CSS in a textarea in the template settings or they provide you with a custom.css file where you can add your style rules.

For more information on how to do this please check the website of your template provider. Chances are high that this functionality is already documented on their website somewhere. If not just send them a message and ask what the proper method is to add your own CSS to their templates.

Adding custom CSS to any template

In case the template developer didn't provide a mechanism for you to easily add custom styling, you can still do so with relative ease by adding your own custom.css file to the relevant template files.

The benefit of adding your own separate file (e.g. custom.css) is that you have all your custom CSS together and you follow the Joomla convention. You can add CSS for multiple other extensions in this file as well.

Most often, this strategy involves editing the template’s index.php file. Simply add a <link /> tag pointing to your new custom.css file just before the closing </head> tag in that file.

<link rel=”stylesheet” href=”/templates/your_template/css/custom.css” />
</head>

Making it the last style reference in the head will help ensure that your customizations take precedent. You may also want to make that same change in other page level template files e.g in the component.php file so that your changes carry through to component only pages.

Note: It should be noted that this method requires that you make the change again if you find the need to upgrade the template. Therefore the first method is always recommended.

Media File Locations

A couple of things to keep in mind when attempting to update the look and feel of our extensions.

Finding Media Files

Our extensions follow Joomla standards for storing media assets. They can be found in the /media/[extension name] directory, e.g /media/com_docman. This /media directory is actually the location where you should be able to find media assets for each component you have installed if they also follow these standards.

This means that all an extension’s Javascript, CSS and images can be found it’s corresponding directory in the extension’s media directory.

Finding CSS Styles

The best way to narrow down what CSS class or id to override or extend and in which file an element’s style is specified is to use your browser’s inspector implementation, e.g. Google Chrome Inspect Element functionality. This will show you the styles of the elements you want to change and in what file they can be found.

There are some good tutorials out there on how to do this. For example, a video tutorial on how to use Google Chrome Inspector.