Themes

Warning

Themes are not are not available in API version 2 pages. Use design systems instead.

Themes allow for the styling of Skuid pages and the Skuid’s App Composer without the use of CSS. Several default Skuid themes exist, and custom themes can be declaratively composed in Skuid’s Theme Composer without writing a line of CSS and then assign them as organization defaults and/or to specific profiles and users.

Warning

When two or more Skuid pages are used within the same page—such as through the Page Include component or in Skuid Page Lightning component deployments—the two pages should use the same theme and CSS. If not, the pages may have inconsistent theming and styles.

Working with Themes

Themes can be created and updated by navigating to Theme > Themes.

Create and edit themes

Note

You cannot edit Skuid’s default themes in the Theme Composer.

Theme properties

These properties are visible and configurable either upon theme creation or within the themes list.

  • Name: The name of the theme as it will appear in the themes list and within the App Composer.
  • Resource Name: The Skuid file (Skuid Platform) or Salesforce static resource (Skuid on Salesforce) containing the theme.
  • Resource Namespace: (Skuid on Salesforce only) The namespace prefix of the static resource containing the theme file. Typically only appears if themes are part of a managed package, like the default themes available from Skuid.
  • Active: Denotes whether a theme is active, and thus assignable from the App Composer or the Theme Assignments tab.
  • Last Modified By: The name of the Skuid admin that last edited the theme. On Skuid Platform, this will also contain the Last Modified field.
  • Last Modified: When the theme was last edited, whether in the Theme Composer or by running the Update out of Date Themes process.
  • Created By: The name of the Skuid admin that created the theme.

Warning

While it is possible to deactivate and change the properties of default Skuid themes, it this is not recommended and may cause issues for other users.

Export and Import Themes

Skuid makes it easy to share themes between orgs by allowing you to export a compressed theme file (a .zip or .sktheme depending on your Skuid version), and then import that file into another org.

Export a theme

  1. Click Theme in the navigation bar of the Skuid UI.
  2. Click the Themes tab.
  3. Locate the theme you would like to move and click Export Theme fa-file-excel-o in the column beside the theme’s name.
  4. Save the compressed theme file to a location you can find on your computer.

Note

Skuid on Salesforce

If you encounter issues exporting your theme in Salesforce Lightning, try doing so in Salesforce Classic.

Import a theme

  1. Click Theme in the navigation bar of the Skuid UI.
  2. Click the Themes tab.
  3. Click fa-caret-down the down arrow beside fa-picture-o Create New Theme to open its sub-menu.
  4. Click fa-sign-in Import Theme to open the Upload a Theme popup.
  5. Click fa-cloud-upload Upload (Skuid Platform) or fa-cloud-upload Theme File (Skuid on Salesforce) and then navigate to the appropriate theme file—look for the .zip or .sktheme extension.
  6. Confirm your selection.

Note

If you already have a theme of the same name, Skuid will prompt you to either update the name or to cancel the upload.

Note

Skuid on Salesforce

If you encounter issues importing your theme in Salesforce Lightning, try doing so in Salesforce Classic.

Clone Themes

  • To clone any default Skuid theme, select it as the base theme when creating a new theme.

  • To clone a custom theme:

    1. Open the theme in the Theme Composer by clicking fa-wrench Open Theme Builder.
    2. Click Clone.
    3. Fill out the metadata for the new theme, including Name, Resource Name, and its Active status.
    4. Click fa-check Save.

    After cloning the theme, click fa-pencil-square-o Open Theme to begin editing it or Stay Here to continue editing the original theme.

    Note

    It is also possible to clone themes from within the Theme Composer.

Delete a Theme

It is best practice to first deactivate themes before deleting them. This allows testing for any issues or conflicts before permanently removing the theme.

If you are certain you wish to delete a theme:

  1. Click the checkbox beside the theme on the theme list.
  2. Click fa-times-circle Flag Selected Rows for Deletion.
  3. Click fa-check Save.

Note

In Skuid on Salesforce, Skuid does not automatically delete a theme’s associated static resource when it is deleted from the themes list. Because of this, it is possible to restore a deleted theme from Salesforce’s Recycle Bin until its associated static resource is deleted.

To completely delete the theme, delete its associated static resource. Attempting to restore the deleted theme from the Salesforce Recycle Bin after its static resource is deleted results in errors.

Theme Assignments

Note

Your options may vary based on whether your are using Skuid Platform or Skuid on Salesforce.

All Skuid pages are initially set to use the Default theme when they created. This Default theme is actually a reference to a runtime theme specified within the Theme Assignments tab. Along with this runtime default, several other options are available:

  • Default Runtime Themes: Determines which theme is set as the Default runtime theme for the Theme page property.

  • Default Composer Themes: Determines which theme will be applied to the App Composer.

  • Salesforce Header in Skuid Core: (Skuid on Salesforce Only) Determines whether or not the Salesforce header will display instead of the Skuid navigation bar within the Skuid UI.

    Note

    This theme property only works in Salesforce Classic.

A theme picker will appear when selecting a theme for one of these properties, displaying a preview of each theme beside their names.

Profile / User overrides

Note

Profile / user theme overrides are only available on Skuid on Salesforce.

By default, all profiles and users are assigned the themes set in the Organization Defaults tab. However, this table provides the ability to override those defaults for specific profiles and users. Each row represents an override, with the same fields as those listed in the Organization Defaults tab.

Note

Even if a theme assignment override exists, it can be superseded by page’s theme property. For more information see Hierarchy of theme assignments.

To create a new theme assignment override, click fa-plus-circle Add New Preferences. Select whether the override applies to a Salesforce profile or a specific user, and then select the corresponding profile/user.

  • fa-pencil Edit Row: Used to edit an existing theme assignment override.
    • fa-picture-o Click to change Theme: Opens the theme picker
  • fa-times-circle Flag for Deletion: Flags a theme assignment override for deletion. An override is not deleted until it is saved by clicking fa-check Save.

Hierarchy of theme assignments

Theme assignments follow an established hierarchy, listed below by order of importance:

  1. Page-level: Set on the Skuid page’s properties in the App Composer.
  2. User-level: Set under Theme > Theme Assignments > Profile/User overrides.
  3. Profile-level: Set under Theme > Theme Assignments > Profile/User overrides.
  4. Organization-level: Set under Theme > Theme Assignments > Organization Defaults.

Or, phrased as a sentence, a page’s Theme property supersedes any user-based overrides, which supersede any profile-based overrides, which supersede any organization defaults.

Update Out of Date Themes

As Skuid continues to make improvements to its systems and components, sometimes the IDs, CSS classes, and HTML structure of its components may change behind-the-scenes. This means that each Skuid theme must also be updated to reflect those new IDs, classes, and structures. Otherwise, the style rules of a theme will no longer be applied correctly. While new default themes are installed with each Skuid upgrade, custom themes still need to be updated to match. The Update out of Date Themes process does just that, reconciling any updates to default themes with the custom themes based upon them.

Note

  • It is best practice to run this process after each Skuid upgrade.
  • This process may take several minutes.
  • You may export your themes prior to updating them for local backups.

Themes are not updated automatically. Skuid admins must manually update their themes.

  1. Navigate to Theme > Themes.
  2. Click fa-refresh Update out of Date Themes.
  3. Click fa-bullseye Update.

Note

The Update out of Date Themes button is not available on Skuid Platform. If you see issues with a particular theme, see the Troubleshooting steps below.

Troubleshooting

My theme does not load. / My theme styles are not applied correctly.

There could be some issues with Skuid themes being cached. To resolve this, try the following solutions:

  • Run the Update out of Date Themes process.

  • If one particular theme is still having issues:

    1. Navigate to Themes.

    2. Click fa-wrench Open Theme Builder beside the problematic theme.

    3. Change a property in the Theme Builder to a different value.

      Note

      The property/value being changed does not matter.

    4. Undo that change, reverting the property back to its original value.

    5. Click Save.

My Theme Editor does not load

  • Try disabling Enable clickjack protection for customer Visualforce pages with headers disabled in your Salesforce session settings.

Missing Icons

Not all icons translate from one theme to the next! If you change your theme and find icons missing or replaced by the “caution” fa-exclamation-triangle icon, then you can fix the issue in the App Composer by selecting an icon that exists within the chosen theme.

Warning

The Silk icon set is only available when using the Skuid Classic theme, or when using themes that are based on the Classic theme. Silk icons are not available in the Skuid Lightning Design theme.

  1. Select the action or button that is missing an icon.
  2. Click on the Icon button next to the Action Icon area.
  3. Choose an icon from the Standard icon set.
  4. Save your page.

Note

All Skuid themes—including customized themes―default to the Standard icon set.

Your icon selections will most likely be compatible with all themes if you choose icons from the Standard set.