Customizing Styles for Apps

When applying custom styles, there are several approaches: setting site-wide custom styles, setting custom styles at the visual level, setting styles for an application filter, or setting styles for an application, as described here.

Availability Note. Prerequisite: By default, the Custom Styling option is turned off. It can be turned on by a user with administrative privileges; see Enabling Custom Styling.

In to create custom styles in an app, such as World Regional Populations app,

  1. In the main navigation bar, click Apps.
  2. Click on the World Regional Populations app, to open it.

    opening an application
  3. Click Edit in the top left corner, to edit the app.

    editing an application
  4. In left navigation, switch to Setting tab.

    choosing the settings menu for application
  5. The Settings tab appears.

    application settings menu
  6. In the Settings menu, perform the following actions under Basic Styling and Custom Styling:

    1. [Optional] De-select Show borders around visuals.

    2. [Optional]Select Align filters on the left.

    3. [Optional] In the CSS class for Visual field, enter the name of the class. Here, we are using World Regional Population.
    4. [Optional] Under Included Styles, click Add Style.

      In the Pick Custom CSS modal window, select an existing style, such as DarkBlueTableBar, and then click Add.

    5. [Optional] Under Enter in-line CSS rules, enter the following code to set the font color of the table headings:

      th {
        color:#CC66CC;
      }
    6. Click Save.
    changing application settings and styles

Note the resulting style changes to the app: the filters are on the left side of the application, the visual has no border, and the style of the table visual inside the app is changed.

basic and custom styling applied to the application