Studio

HOWTO: Create Themes

Updated: March 12, 2019 Page Information Edit on GitHub

Nuxeo Studio Designer enables you to create a new theme featuring your logo, background and colors, and to set it as the default theme of your application.

Creating a Theme

  1. In Studio Designer, go to UI > Themes.
  2. Click on Create button and enter a name for the new theme.
  3. In Start from, select one of the four default themes of Web UI (default, dark, light or kawaii). The selected theme will be the base for the new theme.
  4. Click CREATE.

You are now in the Theme Editor, where you can customize the new theme to fit your application.

Theme editor without resources
Theme editor without resources

Selecting Resources

On the right of the theme Editor, select resources that can be displayed in your application by clicking on Upload Resources for each element.

Type   Format
Logo Logo for the theme .png
Background Background image .png
Screenshot Preview of your theme displayed for users under User Settings > Preferences in Web UI .jpg
Resources Additional resources relevant to your theme  

Theme editor with resources
Theme editor with resources

Save your changes and go back to UI > Themes. The themes you created are noticeable by the badge CUSTOM. You can filter the themes you created by clicking Only Custom at the top-right of the screen.

Custom Badge
Custom Badge

Setting a Theme as Default

You can set a theme you created as the default theme of your application. It will be loaded instead of the default preset theme in Web UI at the first login of users.

From the Theme Editor:

  1. At the top-right of your screen, go to Name.
  2. Check the box Set this theme as default.
  3. Save your changes.

Set as default in Theme Editor
Set as default in Theme Editor

From Themes:

  1. In Studio Designer, go to UI > Themes.
  2. Hover over the theme and click on Set as Default.

Set as default theme list
Set as default theme list

The Theme you set as Default is noticeable by the badge DEFAULT.

Reusing a Custom Theme

You can use a custom theme as a base for another theme.

  1. In Studio Designer, to go UI > Themes.
  2. Hover over a theme and click on Copy. The copy of your theme is created.
  3. Rename it and change it as needed.
  4. Save your changes.
2 months ago Andrew Goodricke Fixed details of howto frontmatter
2 months ago manonlumeau Transfer How-to to Studio doc
2 months ago manonlumeau Apply suggestions from code review
History: Created by manonlumeau

We'd love to hear your thoughts!

All fields required