Skip to main content
InSource Solutions

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. 

clipboard_e597a0ad828b9e229dcb51477c69fedb9.png

 

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. 

clipboard_e06a94c8eb413538994864132df44e38a.png

 

 Field 

 background-color:#00FF00

color:#ff9900

Label 

 background-color:#a0a0a0

color:#4F4F4F

Result: 

clipboard_e8c626c812215251ce824c04042e25fca.png

 

clipboard_e91a2c62161c292a189f717932460bd5e.png

 

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):  

clipboard_e722729f8a176771d2e969cb25e824d84.png

 Adding the logbook.css file at the same level as the logbook.yml file: 

clipboard_e9ceae4e30501e7dc6b0259fc481aa3b6.png

 

The logbook.css example file: 

Label.asset_type 

 background-color:#FF0000

 font-weightbold

 

Result: 

clipboard_ebc348cf2626c8abc7d48537be00ff840.png

 

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. 

clipboard_e8154a22fc971035600489c6e582b69f1.png

 

clipboard_ebaee3d998c84e554b7aedb6914073195.png

 

Another example: 

clipboard_e545880c6b33be1fe6a902aa95098769b.png

clipboard_e0c6326c3a9233d359d7086b2836959ef.png

 

clipboard_e3e214e6b2b9f8eb73b81a6ee3ac8b0da.png

 

clipboard_ed4f4212759bd278a7746fac6d3e0ed8f.png

 

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). 

clipboard_eedd1357b0806695240c6a7998e730403.png

 

This will then result in the field being styled accordingly. 

clipboard_e3a8f74ef884fd6c8719cd1151aec1d6b.png