Theme Composer

Skuid’s Theme Composer allows you to create custom themes for mobile and desktop pages without writing a line of CSS. Declaratively select colors, fonts, and text sizes and change the look and feel of Skuid components. Additionally, you can include any CSS you’ve previously written in a static or external resource.

Access the Theme Composer

To access the Theme Composer, first click Theme in the Skuid UI navigation bar and then click the Themes tab.

Create a new theme [[]]

  1. Above the theme list, click fa-picture-o Create New Theme.
  2. Fill out basic information for the new theme:
    • Base Theme: Determines the initial styles of the theme based on one of Skuid’s default themes.
    • Theme Name: The name of the theme as it will appeared in the Themes list. May not contain spaces or special characters.
    • Resource Name: The name of the static resource that will be used to store the theme file in Skuid SFX. May not contain spaces or special characters.
  3. Click fa-arrow-right Launch Theme Composer to save the new theme and open the Theme Composer.

Edit an existing theme [[]]

Note

You can only edit themes you have created, not Skuid’s default themes.

Within the theme list, click fa-wrench Open Theme Composer.

Theme Composer UI

image2

  1. The left side of the Theme Composer lists all the components, UI elements, and other items that you can configure in the Theme Composer. Click a theme item to see its properties in Properties panel.

    • Global: Base-level theme options that apply to all components.
    • Components: Component-level theme options, listed by the name of the Skuid component, which override any relevant global options and may feature component-unique properties.
    • CSS: Inline CSS or CSS included through Salesforce static resources or external CSS resources.
  2. The Properties panel, on the right side of the screen, lists the relevant properties for a chosen theme item. Properties are split into different sections—which vary depending on the chosen theme item—as well as different categories within those sections.

  3. The Preview Panel, in the center of the screen, instantly updates as properties are updated.

  4. There are also several main buttons within the Theme Composer:

    • Clone: Clones the theme based on its last save.

    • fa-picture-o Preview: Previews the theme, based on its last save, with an existing Skuid page. Can also be accessed with the Control/Command + P hotkey.

      • Preview Page: The Skuid page to preview the theme with. If necessary, specify any other required parameters, like a record name for a detail page.
    • Save: Saves all changes to the theme. Can also be accessed with the Control/Command + S hotkey.

      Note

      It can take some time to save your changes. Do not navigate away from the page until the save process is complete.

    • Cancel: Discards all changes made to the theme since the previous save.

Customize Theme Properties

  1. Click on a theme item to view its properties in the Properties panel.
  2. Expand the section containing the property you wish to edit by clicking the section’s header.
    • You can also minimize sections you aren’t working on by clicking an expanded section’s header.
  3. Check the box next to a category to view editable properties within that category.
  4. Update the theme item’s properties.

As you configure properties, changes will be reflected in the Preview Panel.

You can discard any changes you’ve made within a category by unchecking the category’s box. The Preview Panel will update instantly, and changes will be completely discarded when you leave the Theme Composer page.

Customizing colors [[]]

image4

There are two ways to configure a color property:

  1. Type in the name or hex code of the color within the color property field.
  2. Click on the color swatch to choose the color from the palette and adjust its hue, saturation, lightness, and alpha (transparency) via the silder bars.

Customize text [[]]

For text options, you can typically select font family, size, and color. Some theme items allow you to also specify font weight, whether the text is italicized, line height, and text transformation (uppercase vs lowercase).

Custom styling error messages [[]]

To change the styling of error messages that display to users:

  1. From the Skuid navigation bar, click Design > Themes.
  2. Click fa-wrench Open Theme Composer next to the theme you want to edit.
  3. In the Theme Composer, select the Table theme item from the left panel.
  4. In the Table properties panel (on the right), select Errors.
  5. Check the boxes next to property categories, such as Background, to edit them.
  6. Click Save.

CSS

The CSS theme item allows you to include custom CSS, which will be applied to all pages using the theme.

  • Inline CSS: CSS rules that are included as part of the theme’s CSS stylesheet. To add inline CSS, click fa-code Open Resource Editor.

  • Resources: CSS stylesheets that are referenced within every Skuid page using the theme.
    • Type:

      • Static Resource: Used to reference CSS stylesheets stored within Salesforce static resources.

        • Resource Name: The name of the static resource containing the stylesheet.

        • Namespace: If applicable, the namespace containing the static resource.

        • File Path: The exact name of the CSS stylesheet file.

          Note

          Skuid can only access CSS resources in the top level of a static resource—i.e. not in a sub-folder.

      • External: Used to reference CSS stylesheets stored at an arbitrary web address.

        • Path: The URL of the CSS stylesheet.

To include additional resources, click add more.

Troubleshooting

When you have questions or find problems with the Theme Composer (or with any aspect of Skuid), go to the Skuid Community and ask your question or report a problem. Get answers from other Skuid Users, and Skuid employees, and check out other questions, problems, and ideas that others have posted.