Easy CSS coding in Joomla design

Designing and developing websites with Joomla! doesn't need to be frustrating. It mostly isn't, but sometimes, depending on various factors, we might put ourselves in a position when we had a hard time applying a CSS code to parts of our design.

Joomla! has some neat solutions to various problems, like allowing to apply CSS classes to modules via Module Class Suffix option, but sometimes the problem is where to write the code? Sometimes it just doesn't get recognised. Should we put it in the root folder, in a template folder or in a module folder? Should we write it in a native CSS file of the module risking to be overwritten in the next module update? If we put it in a custom folder, how and where to write the path to it?

These are real problems but there is a simple solution to them. Maybe we would not use it in every occasion but it comes in handy in some situations.

Our custom CSS code can be written in a Custom HTML module and assigned to an individual page or to a whole website through the Menu Assignment option. This module then behaves like a regular CSS file we would usually use. The CSS code is written between < style > < /style > tags as if it would be written in an .html document. You must not forget one little but very important thing: you must choose Editor - none in the Default Editor * drop down menu in the Global Configuration. WYSIWYG editors like TinyMCE may strip html tags.

Text editor in Joomla has to be set to none in order to keep HTML and CSS tags

Don't forget to set editor to none to make sure that your code is saved

After that CSS classes can be applied in html code to paragraphs, spans, divs... or as a Module Class Suffix to the whole content of the module.

For example, in the gallery on this website you can see how this works in practice. Images in the gallery are black and white until you place a mouse cursor on them. When the cursor hovers out images are back to black and white. This is a CSS3 animation written in a custom HTML module named simply CSS which is assigned to the gallery page. Images are separated Sigplus modules (like individual galleries placed on one page). The class .grayscale, grayscale: hover is applied to the Module Class Suffix option in the Advanced tab in module preferences. And that's all.

 Chose Custom Html

Chose Custom html


Write CSS code between < style > < /style > tags 

Write CSS code between < style >…</ style > tags


put your CSS class into Module Class Suffix field 

put your CSS class into Module Class Suffix field

Let's summarise:

  • Setup text editor to none (System-->Global Configuration-->Default Editor *-->Editor - none)

  • A CSS code is written into a Custom HTML module (Module Manager-->New-->Custom HTML)

  • CSS module is published as any other module (status: published, position: chose the one of the template you use, Menu Assignment: individual menu item or the whole website).

Apply CSS classes to html in articles, images or modules (Module Class Suffix for whole modules in the module options: Advanced-->Module Class Suffix. NOTE: if you apply more than one class this way, don't separate them by comma).

After your are done you can choose back WYSIWYG editor but If you need to edit the CSS code don't forget to turn it off.