Skip to content

How to change the background color of a specific column on the list screen

Answer

Use "Server Script" and "Style".

Overview

When changing the background color of a specific column on the list screen, set the style previously set in "Style" to "ExtendedCellCss" of the "Columns" object in "Server Script".
In this example, we will set the background color of the column named "Start" to blue.

Operation Procedure

  1. Open the target table.
  2. Click Manage → Manage Table.
  3. Open the "Style" tab.
  4. Click the New button to display the dialog.
  5. Enter any title such as "Make background color blue" in the title, enter the following CSS in the style, set the output destination to list, and click the Change button in the dialog.
  6. Open the "Server Script" tab.
  7. Click the New button to display the dialog.
  8. Enter any title such as "Make background color of numerical value column on the list screen blue" in the title, enter the following CSS in the script, set the condition to "Before Row Display", and click the Change button in the dialog.
  9. Click the Update button at the bottom of the screen.
  10. Open the list screen of the target table and confirm that the background color of the start column is blue.

Server script

JavaScript
columns.NumA.ExtendedCellCss = 'blue';

Style

The method for specifying elements differs between versions prior to 1.4.20.0 and later versions.

after ver1.4.20.0

CSS
.grid td.blue{
    background-color: blue;
}

before ver1.4.19.2

CSS
.blue {
    background-color: blue;
}