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.