Skip to content

Style

Overview

On the "Styles" tab of the "Table Management" screen, you can add styles (CSS) to a table.

What you can do on the Styles tab

  • Create, edit, and register CSS using the code editor
  • Configure the "Output to" setting for CSS
  • Enable or disable CSS
  • Use the Code Editor, which helps users edit CSS (available when using the second-generation UI theme)
  • Use the draft feature to test how CSS behaves

Pleasanter Code Assist

Installing Pleasanter Code Assist lets you create, edit, and add CSS using the advanced editing features of Visual Studio Code.

Prerequisites

  1. You need "Manage site" permission to configure this setting.

Operation Procedure

Displaying the Styles tab

  1. Click "Admin" in the navigation menu.
  2. Click "Manage table".
  3. Click the "Styles" tab.

Style list

The "Styles" tab of the "Table Management" screen displays a list of styles.

Styles tab of Table Management

Selecting a style using the checkbox on the left of the list lets you perform the following operations.

No Button Function
1 Move up Moves the selected style up one position.
2 Move down Moves the selected style down one position.
3 Copy Duplicates the selected style.
The duplicated style is added to the bottom of the style list.
4 Delete Removes the selected style from the list.
Clicking "Delete" displays a dialog.
Clicking "OK" removes it from the list.

Creating, editing, and adding a style

  1. Click "New", or click a style that has already been added to the style list.
  2. The style edit screen is displayed.

  3. Configure each of the following items.

    Item Description How to set it
    Title Enter a title for the style. Enter any title.
    Style Enter the style. Enter any CSS.
    Disabled Toggles whether the style is enabled or disabled. Turn this on to disable the style, or off to enable it.
    Draft Output Mode See Draft Feature. See Draft Feature.
    Draft Key See Draft Feature. See Draft Feature.
    Output to Select the screen(s) to output to. See "Setting up Output to" below.

    What is the Code Editor?

    When you are using the second-generation UI theme, you can use the Code Editor, which helps users edit CSS.

    Screen showing CSS being edited in the Code Editor

    The main editing features provided by the Code Editor are as follows.

    • Syntax highlighting
    • Displaying code hints
    • Indenting with the Tab key, and more

    To use the Code Editor, set the EnableCodeEditor parameter in General.json to true.

    Setting up Output to

    By default, the "All" checkbox is turned on in "Output to".

    By default, "All" is turned on in Output to

    Turning off the "All" checkbox displays the other destinations in "Output to". Select any destination you want.

    Turning off "All" displays the other destinations in Output to

  4. Click "Add" if you created a new style, or "Update" if you edited an existing style.

  5. Click "Update" in the command button area.

Disable all

Turning on "All disabled" at the top of the style list disables all existing styles.

"All disabled" checkbox at the top of the style list

Warning

Turning on "All disabled" does not change the state of each style's individual "Disabled" checkbox.

Responsive

When the "Responsive" checkbox is turned on, a style sheet with a responsive design for mobile devices is output.

"Responsive" checkbox at the bottom of the style list

Top page List display screen Edit screen
Top page displayed on a mobile device List display screen displayed on a mobile device Edit screen displayed on a mobile device

Supported Versions

Supported Version Details
1.4.14.0 and later Added the "All disabled" feature
1.5.7.0 and later Added the "Draft output" feature