Customizing Studio

When deploying Studio within your working environment, you may want to match certain aspects of the application with the identity of your brand, such as icons and colors.

In Studio, the following can be customized:

• The header

Customizing the header

The header is visible throughout Studio.

The following components can be customized:

• The logo / icon.
• The color of the header background
• The background color of the button and badges
• The text color of the button and badges
• The color of the Checked-out files icon and the Inbox icon
• The color of the menu text

Note: Customizing the header of the Sign In page requires Studio 11.125 or higher.

Figure: Customizing the header of Studio: the icon (A), header background (B), button background and text (C), badges background and text, icon color (D), and menu text (E).

Configuration

The configuration steps for customizing Studio depends on the version of Studio that is used (see how to check which version of Studio is installed).

Steps for Studio 11.124 and higher

Step 1. In Studio Server, access the Management Console by clicking Integrations > WoodWing Studio.

Step 2. In the menu, choose Branding.

Step 3. Enter a URL for the icon / logo, and specify the header colors as needed.

Step 4. Click Apply. The changes are immediately implemented.

Note: To revert to the default settings, click Reset default settings.

Steps for Studio 11.123 and lower

Info: Performing the described step requires direct server access. Depending upon how your system is hosted and the level of access you have to that system, coordination may be required with your Partner or WoodWing Support team.

Step 1. Access the config.js file of Studio:

<Studio Server path>/contentstation/

Step 2. Locate and modify the section named theme as required:

theme: {
  header: {
    icon: '<url>' 
    backgroundColor: '3a3f4e',
    buttonAndBadgeBackgroundColor: 'f9b659',
    buttonAndBadgeTextColor: '222222',
    textColor: '000000',
  }
}