Sitecore Experience Accelerator

Extend a theme

Abstract

Learn how to create a theme extension and use the Attach Theme Extension or the Extend Site Theme actions.

SXA uses themes to define the look and feel of a site. Themes can be created separately from the site functionality and content. You can extend an existing theme without having to change the theme itself. For example, to enable or disable certain theme features based on selected site features, to extend SXA themes such as the Basic theme and the Wireframe theme, or to extend existing themes without having to create a completely new theme or to add styles, images, and/or JavaScript after every SXA update.

You extend a theme by creating a theme extension and using the Attach Theme Extension or the Extend Site Theme action.

This topic describes how to:

Creating theme extensions instead of changing a theme gives you the flexibility to use the extensions where you need them. For example, if you want different styles to be available for footers and headers.

To create the extension of a theme:

  1. In the content tree, navigate to the Media Library and right-click Extension Themes, click Insert and click Extension Theme.

  2. Enter a name, and click OK.

  3. Now you can upload styles and media items. For example, to upload a CSS file that changes the styling of the footer, click the styles folder and click Upload File.

    E0084A7070A04A85911DBAC22916E3BB.png

    Note

    To upload many different files, click Upload files (advanced) and batch upload styles and items.

    A4F1F8991E5B47529D29526A74C5A6F7.png
  4. In the Upload File dialog box, click Choose File, select the style you want to add and click OK.

To use your theme extension for new themes, you must use the Extend Site Theme action. For example, when you create a new site and with that site you create a new site theme, the theme extension is automatically incorporated for the features that have theme extensions selected.

To extend a theme by using the Extend Site Theme action:

  1. Navigate to System\Settings\Feature\Experience Accelerator and click the Site Setup folder of the feature that you want to extend. For example, the Page Content feature. Right-click Page Content Site Setup, click Insert, and click Extend Site Theme.

  2. In the Extension section, in the Extension Themes field, move the Extension theme to the selected field.

    4ADEDC5A648B441FBE3AA8D5459A22B9.png
  3. Save the changes.

    Now, when you create a new site with the Page Content feature enabled and with the Create new theme check box selected, your theme will be extended.

    A883B83315D24B56A5B2CAFA0461D0C1.png

    In this example, we added a new footer style to the Page Content feature. If you create a page for the new site and open that page in Experience Editor, the updated footer displays.

    FCAB0691C95649B0867A8BEA880713F8.png

    Note

    To use the extended theme in existing sites, you must assign the theme to the site pages.

To deploy a theme extension separately, you must use the Attach Theme Extension action.

To add a theme extension using the Attach Theme Extension action:

  1. Navigate to System\Settings\Feature\Experience Accelerator and click the rendering you want to add a style for. For example, to add the new footer style, right-click Page Content Site Setup, click Insert, and click AttachThemeExtension.

  2. In the Extension section, in the Theme that is extended field, move the theme that you want the extension to apply for to the selected field. For example, the Wireframe theme.

    34DF5F1FA1824C78B68F7BF31BF3E4A9.png
  3. In the Extension section, in the Extension Themes field, you can now move the Extension theme to the selected field.

    93F8C4404EA2490B9A4FBAD79EDAF6A8.png
  4. Save the changes.

    When you open a page in Experience Editor, the updated footer displays.