When building a custom component, and while designing the layout file to render the view, I'm having difficulty determining what CSS classes / id's to use in my HTML elements to ensure it takes advantage of Joomla built-in CSS and other Templates.

I understand that Joomla uses Bootstrap which provides a level of consistency and can be referenced here: http://getbootstrap.com/2.3.2/base-css.html

However, besides the Bootstrap implementation, are there any standard CSS classes/id's that I can use to ensure consistency across the many templates that are available? And if so, are there any references to these CSS classes/id's?

I guess I'm asking if you were to design the look and feel of the component, what steps would you take to ensure that the look and feel works in synergy with Joomla and other templates?

  • Whatever you end up doing I'd advise to make your component as easy to override as you possibly can. It makes things easier for site builders like me. For instance, if you have a whole list of items that appear on the front end, and each one is a different type of item, not only give them all the same class, but give them all an additional class, unique to each one. This kind of thing makes it a lot easier to hide oe item or style it differently using css.
    – Brian Peat
    Sep 30, 2014 at 0:51

3 Answers 3


what steps would you take to ensure that the look and feel works in synergy with Joomla and other templates?

There's no way of knowing what will, and what will not, be supported in a template so my advice would be to not rely on a template to style your component at all. It is impossible to ensure the look and feel, that it ultimately decided by the template.

There's three possible approaches; 1) Do nothing, 2) Hope that the template will support BS2 or BS3 syntax and pick one of those, or 3) include your own css.

Using the correct html elements for the job will mean that the template handles most of your styling anyway (option 1). For anything else use a logical class naming approach for your component elements, following the Joomla coding standards for html and css and include your own css with your component. If you do this please provide a switch to disable it.

As I template developer I do the styling for any component I use, I neither need nor want component styles though I appreciate that some might. The best way is to provide simple options in your extension configuration; Load css? yes/no, Load js? yes/no. Failing that, please ensure that they are at least loaded from the view file so that they can be overridden without hacking your extension.

  • Thanks, this is a good answer but can you edit your answer and explain a little bit about the "switch", are you referring to an override? If a component has a CSS, my thought was that it will be overridden by an override anyway. Sep 29, 2014 at 4:39

Currently, there is no such standard. The closest thing is indeed the Bootstrap classes.

What I usually do is making sure it works in Protostar and hope for the best.

There was once sort of a standard but support for it was low and the documentation was bad. It was basically just a list of ids and classes used by core.


I wish there was a solution to this but unfortunately there isn't. It would be great if we could all develop extensions that would integrate with all templates out there.

You would simply be best making use of the Bootstrap classes and if the style doesn't integrate well, then the user can simply create a Template Override for your component.

Just be sure to make everything as dynamic as possible.

You may have noticed if you ever look into 3rd party module code, that many of them put the HTML markup in mod_modulename.php, meaning that the user cannot override the view, and thus has to perform a core hack to style the module according to their needs.

This is why all markup should always be put in the view file.

Hope this helps

  • This also provides the means for template providers to include alternate style for your component if they code, so very good advice on where to put the markup! Sep 29, 2014 at 18:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.