TN - 1271 Using Cascading Style Sheets in j5
Description
This article from InSource shows how to leverage Cascading Style Sheets in j5
- Author: Ron Tanner
- Published: 06/27/2022
- Applies to: j5 2019
Details
Using Cascading Style Sheets in j5
Cascading Style Sheets (CSS files) can be added in different locations to affect different levels of a j5 system. The location determines where the rules will be applied in the system.
To apply a CSS to all field labels the entire j5 site to a particular color you would add a site.css file to the project root. The contents would be as follows:
Label {
color:#ff9900;
}
With the use of CSS classes in the site.css file you can apply CSS more specifically.
Specific selectors will override general selectors.
Example:
- A selector at the module level will be more specific than a matching one at a site level
- A selector with a CSS class component (example: Label.important) will be more specific than one without (example: Label)
Example: adding a module.css file to the Organization module.
Field {
background-color:#00FF00;
color:#ff9900;
}
Label {
background-color:#a0a0a0;
color:#4F4F4F;
}
The result of the logbooks in this module:
Adding a CSS file to the logbook (logbook.css) should be located at the same level as the logbook.yml file.
Example:
Adding the tag to the specific field(s):
Adding the logbook.css file at the same level as the logbook.yml file:
The logbook.css file:
Label.asset_type {
background-color:#FF0000;
font-weight: bold;
}
Result:
You can also add colors to field options:
There is an option to apply colors to the field options in the logbook list view (grid view).
Example: colors can be added to a select type field and this will then be applied and displayed in the grid view.
