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
- btn, btn-primary, btn-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.