This article gives instructions for applying custom CSS to Joomla extensions.

 

Where to write CSS for an extension?

The best place to write CSS for any extension is usually your template's CSS. Most templates have a custom.css file or support the creation of one under their css directory.

If you want a quick solution, you may also check menu items and modules for a Custom CSS option, but that is not always provided.

 

How to structure a CSS selector?

A CSS selector is merely a sequence of identifiers for HTML tags. If you have a div tag that has a class, you can refer to it directly using

div.the-class-here or .the-class-here

A child element of that div element would simply be referenced using a space:

.the-class-here p or .the-class-here img

Dots are used for classes, hashes for ids and plain text for HTML elements.

#id, .class, element

 

How to add styles?

Styles are added in the form of properties and values, wrapped in brackets after the selector.

Here's an example of how to make an image not overflow from its parent element.

.the-class-here img { max-width: 100%; }

 

Of course, covering all selectors and properties is out of the scope of this article.

 

What are some common classes to use?

Joomla commonly ships with Bootstrap. Some common classes for Bootstrap are the following:

  • form-control for input fields
  • form-select for select (dropdown fields)
  • radio, checkbox for radio buttons and checkboxes respectively
  • btnbtn-primarybtn-secondary, btn-default and others for buttons
  • container for large portions of the website that are meant to be contained in width
  • row for parts of the website that intend to split their content into columns
  • col, col-xs, col-sm, col-md, col-lg, col-xl and others for columns.
  • table for tables

More information is commonly found in Bootstrap's page.

 

Our extensions leverage such classes to blend with your template's appearance out of the box.

Some other classes used in our extensions are found in the following table:

Extension Common selectors and classes to use
Auto Cards .auto_cards_wrapper, .auto_cards, .ac_card
MyShortlist .msl_module_wrapper, .myshortlist_cart_button, .myshortlist.button, .myshortlist.delete_button, .myshortlist_item
NS Pro .nspro_field input, .nspro_field .button
Rapid Contact Ex .rpx_field input, .rpx_field .button, .rpx_field_copy label, .rpx_field_copy input, .rpx_field_field-id-here input, .rapid_contact_ex_explanatory_text, .rpx_field_button label, .rpx_column
SimpleQuiz .quiz_list, .quiz_item, .sq_instance .page-header, .simplequiz_pre_text, .simplequiz_question, .question0 (question number starting from 0), .sq_label, .sq_field, .simplequiz_user_fieldset, .simplequiz.button, .simplequiz_field input
ChatGPT Assistant #chatgpt_assistant_button, #chatgpt_assistant_interface, .message, .received-message, .sent-message, .system-message
PopFeed .popfeed_field input, .popfeed_button .button, .popfeed_link
Rapid Contact div.rapid_contact, .rapid_contact input, .rapid_contact .button

 

Examples

Example: "I want to change the color of the form's button"

CSS:

.nspro_field .button {
  background-color: #FF0000; /* replace with your color hex code */
}

 

Example: "I want to change the text color of the input fields"

Solution:

.rpx_field input {
  color: #000000; /* replace with your color hex code */
}

 

Example: "I want to add a border around my quiz questions"

Solution:

.simplequiz_question {
  border: 1px solid #FF0000; /* replace with your border style and color */
}

 

Feel free to contact us for further instructions or suggestions.