TN 1304 How to Configure Cascading Style Sheets in j5

Description

This article from InSource shows how to configure cascading style sheets in j5

• Author: Ron Tanner
• Published: 12/13/2022
• Applies to: J5 2019

Details

How to configure cascading style sheets in j5

Cascading style sheets can be added in different locations to style various levels of a j5 system. The location determines the scope the style sheet rules will be applied. 

To style all field labels in an entire site for a particular color as an example, site.css file should be added to the project root with the following contents: 

Label { 

color:#ff9900; 

} 

You can use css classes in the site.css to apply css at a more granular level. 

Keep in mind more specific selectors will override more general selectors.

Example: 

• Selector at a module level will be more specific than a matching one at a site level
• Selector with a CSS class component (e.g. Label.important) will be more specific than one without (e.g.Label) 

For example, adding a module.css file to the Organization module. 

 Field { 

 background-color:#00FF00; 

color:#ff9900; 

} 

Label { 

 background-color:#a0a0a0; 

color:#4F4F4F; 

} 

Result: 

When adding a CSS file on a logbook, the logbook.css file should be located on 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 example file: 

Label.asset_type { 

 background-color:#FF0000; 

 font-weight: bold; 

} 

Result: 

Adding colors to field options: 

There is an option to apply colors to the field options in the grid view (small view), like Operations logbook status field options. 

For example, you can add colors to a select type field and this will then be applied and displayed in the grid view. 

Another example: 

You can also use a SELECT field to set the color of another field using the Styled Fields attribute. 

For example, if the fields type and subsystem both need to be styled according to option selected for field subsystem, then both the
fields need to be added in the Styled Fields attribute (see below screenshot of IDE). 

This will then result in the field being styled accordingly.