The SXA themes

Version: 10.1

Themes define the look and feel of a page or site and can be created separately from the site functionality and content. There are two types of themes: base themes and site themes.

SXA comes with the default site theme named Wireframe to help you set up your site quickly. A site can be put together using the Wireframe theme, while in the meantime the base theme is sent to a creative agency using Creative Exchange. When imported back, the site can be re-skinned using the new theme. You can create a new theme by copying the base theme and adding your own classes, applying a style to a particular rendering on a particular page, and adding assets, such as images, fonts, and files.

To automate theme creation, you can use the SXA CLI command line tool. This can be convenient if you want to have more control over your assets and use a version control system, such as Git. SXA also lets you use pre-optimized-min files for uploading styles and scripts.

You can either assign themes to an entire page, or assign themes to specific components.

Base themes

Base themes are prototype themes that predetermine the layout of a website. You can have several base themes to support different design philosophies or specific functionality.

Note

Do not change base themes because these are part of the platform. If the base themes do not suit your needs, it is better to create a new base theme to inherit from.

Keep the Protected Theme check box selected for base themes. If the Protected Theme check box is selected, the theme is added to the <restrictedLocations> setting in Sitecore.XA.Feature.CreativeExchange.config, and changes to CSS/JS are not reflected when imported back using Creative Exchange.

Select Protected theme to add the theme to CE settings.

The base themes are saved in the Media Library: /sitecore/Media Library/Base Themes.

Site themes

Site themes are extensions of base themes and can be applied to specific sites. Site themes usually have dependency on base themes and contain scripts and styles for all renderings used in a site. The CSS and JavaScript files in themes are divided into chunks that deal with one rendering at a time.

For each site theme, you must select a base theme to define the basic characteristics and properties of the theme. Every theme also needs a grid theme. SXA themes support multiple inheritance. This means that you can define multiple parent themes for every single theme. The order of selected base themes is important. Be careful when you add a new theme or change the order. For example, if the SearchTheme relies on the jquery library that is located in Core Libraries, you must make sure that the SearchTheme is loaded after the other themes.

By default, a theme contains folders for fonts, images, scripts, and styles:

A theme contains folders for fonts, images, scripts, and styles.

The following table describes the folders in a site theme:

Folder

Required

Description

fonts

Not required

An example of how you could organize your fonts assets. This folder is optional and can be named differently.

images

Required

An example of how you could organize your images assets. Although not directly required by SXA, some CSS might use image references to a set path.

scripts

Required

Use to add your scripts or to delete unused scripts. Elements nearer to the top are loaded faster.

styles

Required

Use to add or delete styles.

Note

You must not add folders under the styles and scripts folders. You can place your scripts and styles directly in the folders, without nested structure.

If you use preoptimization for your scripts and styles, the theme's styles and scripts folders only contain the pre-optimized-min file and not the source assets.

For pre-optimized themes, the styles and scripts folders contain the pre-optimized-min file instead of the source assets.

The Wireframe theme

SXA comes with the default site theme named Wireframe to help you set up your site quickly. A site can be put together using the Wireframe theme, while in the meantime the base theme is sent to a creative agency using Creative Exchange. You can swap the Wireframe theme with a site theme after it has been prepared by your front-end developers.

The Wireframe theme is the default site theme for SXA.

If you want to use mock images for the image placeholders, go to the Wireframe Image section and specify the following fields:

  • Mock Image - specify the image that displays as a mock image. If the field is left empty, no image displays.

  • Stretch Image - when selected it stretches the image to full width/height.

  • Background Color - specify the background color for the image in HTML hex format. If the field is left empty, the background is transparent.

    In the Wireframe Image section, you can configure mock images for image placeholders.

The Basic2 theme

When you create a new site and choose to create a new theme, this theme is a copy of the Basic2 theme. Out of the box, this theme contains preoptimized files that you must not edit directly. The content of this theme is only a placeholder for the theme that you create for your site.

To prepare your theme for working on branding, use the SXA CLI command line tool.

The following table describes the folders in the Basic2 theme:

Folder

Required

Description

fonts

Not required

An example of how you could organize your fonts assets. This folder is optional and can be named differently.

images

Required

An example of how you could organize your images assets. Although not directly required by SXA, some CSS might use image references to a set path.

scripts

Required

Stores your preoptimized script file.

styles

Required

Stores your preoptimized style file. This file is automatically created when you compile Sass project files.

Do you have some feedback for us?

If you have suggestions for improving this article,