CSS Custom Styles

To define styling for the entire site using CSS code, follow these steps:

  1. See the steps in Defining Site-Wide Custom Styles.
  2. In the Manage Custom Styles window, under Name, enter DarkBlueTable.

  3. To add CSS instructions, enter the following code:

    .table{
background-color:#336699;
}
    New Custom Style interface, with 'Save' button, 'Name' text box, 'CSS' tab (active) that contains a check box 'Autocomplete on', and a line-numbered code editing window, with simple css code, and an alternate JavaScript tab
    Defining a New Custom Style
  4. Click Save.

  5. Notice that the Manage Custom Styles window contains the new style.

    Manage Custom Styles interface, with 'New Custom Style' button, and a list of styles. One entry (DarkBlueTable) shows 0 visuals with that style, edit icon (pencil), and delete icon (trash can)
    Manage Custom Styles Lists DarkBlueTable Custom Style

  6. To see how to include the new style in visual, see the steps in Adding Included Styles to Visuals.

  7. When selected for a visual that contains a table, the style DarkBlueTable gives the table the specified coloring scheme, much like the following image.

    Table with Custom Style DarkBlueTable
    Table with Custom Style DarkBlueTable

  8. Note that the Manage Custom Styles interface keeps track of all visuals that use each defined style.

    In the following image, you can see the reporting after applying the style DarkBlueTable to visualization 15. Note also that the number 15 is an active link to that visualization.

    Manage Custom Styles interface, a list of styles with entry (DarkBlueTable) that shows used in one visual, #264
    Manage Custom Styles Shows the Number and Address of Apps that Use the Custom Style