Description

The default Service Portal page has an ID "list" that renders the list view of records from a specific table. That table's field names show as title columns in the list view. This article suggests ways to set a custom color for the title columns.

About the list page styling

The following screenshot shows the default list page of the incident table in Service Portal.

The title columns rendered have an assigned CSS class called "th-title" that is rendered through the Data Table widget.

The Data Table widget is not included in any page, but the Data Table from URL Definition widget on the list page calls the Data Table widget. This means that the CSS styles of the Data Table widget are applied on the list page.

You can see the Data Table widget by navigating to Service Portal > Widgets. Note that under the CSS field, a styling block is already defined for the class th-title.

Procedure

There are three ways in which you can change the color of the column titles:

• Override the CSS in the Data Table widget by adding the CSS to the Data Table from the URL Definition widget. For example:

  .th-title { 
  	color: white !important; 
  }
  

• Replace the color defined in CSS field in the Data Table widget. For example:

  .th-title { 
      color: white; 
  }
  

• Define the CSS at the list page level and override the style done by the widget. For example:

  .th-title { 
  	color: white !important; 
  }
  

The "!important" definition implies that it will override the color attribute for the class if defined somewhere else.

Notes:

• If you define the CSS in the Data Table from URL Definition widget, it will affect every page where this widget is used or called in.

• If you define this CSS in the Data Table widget, it will affect every page where this widget is used or called in.

• If you define this CSS at page level, it will be page specific.

Applicable Versions

Any.

Additional Information

For more information about Service Portal styles, see Service Portal styles.