Defining Site-Wide Custom Styles

To define styling for the entire site, follow these steps.

  1. Click the Settings (gear) menu in the top menu, and select Custom Styles.

    Administration menu; shows App Groups, Set Homepage, and Site Administration that includes Activity Log, Users & Groups, Manage Roles, Custom Styles (active), and Site Settings
    Selecting Custom Styles from Admin () Menu

  2. In the Manage Custom Styles window, click New Custom Style and click Save.

    Manage Custom Styles interface, with New Custom Style button (active), and a list of styles (empty)
    Starting a New Custom Style in Manage Custom Styles
  3. In the Manage Custom Styles window, under Name, enter DarkBlueTable.

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

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

  6. 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 with one entry (DarkBlueTable) that shows 0 Apps with that style, edit icon (pencil), and delete icon (trash can)
    Manage Custom Styles Lists DarkBlueTable Custom Style

  7. When selected for a visual or an app that contains a table, the style DarkBlueTable will have the specified coloring scheme, much like the following image.

    Table with columns 'year', 'state', and 'sum(population)'; last column has unformatted numbers; alternate rows have pale grey and deep blue background
    Table with Custom Style DarkBlueTable

  8. Note that the Manage Custom Styles interface keeps track of all visual or application 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, with 'New Custom Style' button, and a list of styles with one entry (DarkBlueTable) that shows 1 App with that style, active link to '15' (internal app number), edit icon (pencil), and delete icon (trash can)
    Manage Custom Styles Shows the Number and Address of Apps that Use the Custom Style