Help Center
Select Category

Categories

Kurtosys App
System Admin
DXM
Documents
Studio
Data
Communities
Studio for Office

Links

Contact Support
Kurtosys website

Themes in Studio

Studio themes behave like global stylesheets for apps created in a particular client instance. The intention behind them is to make app designers’ lives easier so that instead of painstakingly setting up styling for every app – usually dozens per client – a global stylesheet or theme is used.

Themes are created according to customers’ requirements and specifications; font style, size, spacing, color palette, borders, alignment, kerning, etc. down to the finest detail. Multiple themes can be created and applied with styles overrides used where necessary, but the advantage of having a stylesheet where a global change can be made is priceless not only in terms of time needed to release an update but also in terms of the expense of making an update.

This enables consistency between web pages and post types, all commentaries will look the same if they’re using the same theme, all tables will look the same, etc. This creates a professional-looking website that is carefully branded with attention to detail in terms of marketing requirements, and look and feel.

Adding a new Theme

  1. Click the Studio tab.
  2. Click the Themes tab.
  3. Click + to add a new theme.
  4. Give the theme a Name, e.g. Base. This is a mandatory field.
  5. You can add a Description. This is not a mandatory field.
  6. Click Save.
  1. Add a comment, then click Confirm.
  2. Click Base (or whatever you have named your theme).

Theme Styling Examples

Card

  1. Sample element styles will be displayed in the preview pane on the right, click Add Element+ to select elements to style.
  2. Select fields from the list.
  3. Click Save.
  1. Click Base.
  2. Click Add Element+.
  1. Select fields to edit.
  2. Click Save.
  3. Click one of the fields, e.g. Card.
  1. Click Add Element+.
  2. Select fields to edit. The first set of fields all relate to the entire element, e.g the background or border. Selecting Children allows editing of the lower level components of each element, e.g. Title and Subtitle of a card for a Commentary app.
  3. Click Save.

Background

  1. Click Background.
  2. Click Add Element+.
  1. Select Color.
  2. Click Save.
  3. Type in a color name or hex code, e.g. lightgrey. The Card example backgrounds will change to match your selection.

Font Color and Size

  1. Click back to Card to click Children.
  2. Click Add Element+.
  3. Click Select All.
  4. Click Save.
  1. Click Body.
  2. Click Add Element+.
  1. Select Children.
  2. Click Save.
  3. Click Children.
  1. Click Add Field.
  2. Select font-type fields to edit.
  3. Click Save.
  1. Use the dropdown arrow to select paragraph styling: center, left, right, etc.
  2. Click Font.
  3. Click Add Element+.
  1. Select Style.
  2. Click Save.
  3. Type in the required font style name in the Family field. The card content will update immediately.
  4. Click Save.
  5. Type in a comment, then click Confirm.

Text Font Style and Size

  1. Click back under Base to Text in the navigation pane.
  2. Click Add Element+.
  3. Select Font.
  4. Click Save.
  1. Click Font. Scroll down the right pane to line up the Text section so that you can see changes.
  2. Click Add Element+.
  1. Select fields to edit.
  2. Click Save.
  3. Type in a font style name in the Family field.
  4. Type in a number – pt size – in the Size field. The sample Text will update immediately.
  5. Click Save.
  6. Type in a comment, then click Confirm.

Checkbox Icon Width

  1. Click back to the Root level and click Checkbox in the navigation pane.
  2. Scroll down in the right pane so that the checkbox section is visible.
  3. Click Add Element+.
  4. Select Children from the list of fields.
  5. Click Save.
  1. Click Children.
  2. Click Add Element+.
  1. Select Icon.
  2. Click Save.
  3. Click Icon.
  1. Click Add Element+.
  2. Scroll down to select Width.
  3. Click Save.
  1. Type in a number, e.g. 80. Note the size of the icon increases immediately.
  2. Click Save.
  3. Type in a comment, then click Confirm.

Any changes which are made to the theme globally update all apps which use the theme which makes making style and color amendments to a client’s site much simpler and more efficient.

©2023 Kurtosys Systems

Youtube Linkedin Github