Create Custom Themes

Overview

To customize the look of Dashboards and Analytical Designer, you can define a theme for your workspace. 

Themes are JSON structures with CSS properties. You can use these properties to customize the visual elements, such as buttons, headings, dashboard content, and navigation.

Customizing your workspace appearance is a four-step process: Create-Upload-Activate-Edit.

You can upload multiple themes and then activate the one theme you want to use.

 

Step 1: Define custom themes

Based on your requirements, define the properties that you want to update. You can update any number of the properties (only one, or a subset, or all of them). The properties that you do not define in the JSON structure remain intact.

Example structure:

{
   "theme" : {
      "content" : {
         
 CUSTOM THEME DEFINITION

         },
      "meta" : {
         "category" : "theme",
         "deprecated" : "0",
         "isProduction" : 1,
         "summary" : "",
         "tags" : "",
         "title" : "YOUR THEME NAME"    
      }
   }
}

If your theme is created, proceed to upload.

Step 2: Upload custom themes

To upload a theme to your workspace, follow  these steps:

  1. Go to https://secure.gooddata.com/gdc/md/{workspace_ID}/obj   You can find your workspace ID in the URL. In the following image, the workspace ID is e863ii0azrnng2zt4fuu81ifgqtyeoj21
     For additional details about your workspace ID (also called project ID), see Find the Workspace ID.
  2. Paste your code for the theme in Object definition.
  3. Click submit. A confirmation page with a link to your theme is displayed.
  4. Proceed to activation.

Step 3: Activate custom themes

Once you submit a theme, it acquires a unique identifier. Use this identifier to activate the theme.

You can locate the identifier in the meta section of the theme code at https://secure.gooddata.com/gdc/md/{workspace_ID}/query/themes

To activate your custom theme on the GoodData Portal, you must set the selectedUiTheme platform setting to match the identifier of the theme.

  1. Go to https://secure.gooddata.com/gdc/projects/{workspace_id}/config/.

  2. At the bottom of the page in the Key field, type selectedUiTheme.

  3. In the Value field, type the theme identifier.

  4. Click Create/Update config. Now your selected theme is configured and your Dashboards and Analytical Designer use the new settings.

  5. Proceed to edit your theme if necessary.

Step 4: Edit custom themes

If you need to edit an already uploaded theme, follow these steps:

  1. Go to https://secure.gooddata.com/gdc/md/{workspace_id}/query/themes. You can find your workspace ID in the URL. In the following image, the workspace ID is e863ii0azrnng2zt4fuu81ifgqtyeoj21
     For additional details about your workspace ID (also called project ID), see Find the Workspace ID.
  2. Click on a theme that you want to edit.
  3. Add ?mode=edit to the theme URL in your browser.  The address may look as follows: https://secure.gooddata.com/gdc/md/daue1szxe5ku2rsztd95sm1tjde4rfpw/obj/76785?mode=edit
  4. Edit the theme.
  5. Click submit.