Create a custom theme

Current version: 10.3

Themes define the look and feel of a site and can be created separately from the site functionality and content. By default, SXA comes with two types of themes:

  • Site Themes (/sitecore/Media Library/Themes) – branding themes that contain scripts and styles that are responsible for the look and feel of your site. For example, renderings styling (navigation, carousel, and so on) and renderings behavior (if necessary a custom one).

  • Base Themes (/sitecore/Media Library/Base Themes) – foundation themes that contain scripts and styles that deliver more complicated functionalities. For example, shared functionalities such as Bing/Google maps connector, Core Libraries (jquery, lo-dash), and scripts that influence the editing experience (sticky notes, editing themes, drag and drop, and partial designs highlighting).

To add your own classes and assets, such as styles, scripts, images, and fonts, you can create a new site theme. You can create a custom theme by using SXA CLI.

This topic describes how to create a custom theme by copying the basic theme, using the site wizard, and using a script.

To create a custom theme:

  1. Add a new theme in one of the following ways:

    • Add a theme when creating your site. In the Create a new Experience Accelerator site dialog box, on the Theme tab, select the Create new theme checkbox.

      Create a new SXA site wizard dialog window.

      The new theme is added to the Site folder in the Media Library:

      /sitecore/Media Library/Project/Tenant Folder/Your Tenant/Your Site/Site Theme Name

    • Add a theme manually. Add a theme under your tenant/site media library folder. Copy all children of /sitecore/Media Library/Themes/Basic theme.

    • Add a theme using a script. SXA contains a helper script that creates a new theme for you. Right-click your site, click Scripts, and click New Site Theme.

      Add a theme using a script.

      In the Create a new Experience Accelerator site theme dialog box, enter a name and optionally enter a new location for your theme. By default, the new theme is added to: /sitecore/Media Library/Project/Tenant Folder/Your Tenant/Your Site/Site Theme Name.

      Create a new SXA site theme dialog box.
      Note

      By default, new themes are stored here: /sitecore/Media Library/Project/Tenant Folder/Your Tenant/Your Site/Site Theme Name. Do not save your theme items under any of the SXA roots as they might be overwritten in the next release.

  2. By default, the new theme contains the following folders: fonts, images, scripts, and styles. Use the scripts and styles folder to add CSS styles and JavaScripts.

    Note

    The fonts folder is optional and is an example of how you could organize your fonts assets. The image folder is also optional but some CSS can use image references to a set path.

  3. In the Internet Explorer Compatibility section, set the X-UA-Compatible value. This value forces Internet Explorer to use a specific Edit and Preview/Public mode to render your web pages. For example, you can set the value to IE Edge to use the highest, most recent mode available.

  4. In the Theme section, set the themes your new theme should inherit from. SXA themes support multiple inheritance. This means that you can define multiple parent themes for every single theme.

    Note

    The order of selected base themes is important. Be careful when you add something new or change the order. For example, if the SearchTheme relies on jquery library that is located in Core Libraries, you must make sure that the SearchTheme is loaded after the other themes.

    If you created a new base theme or just don't want your theme to be changed, select Protected Theme. This will add the theme to the list of locations that are protected from modification and prevents Creative Exchange's import function from updating the theme (in Sitecore.XA.Feature.CreativeExchange.configexperienceAccelerator/creativeExchange/restrictedLocations.

  5. If you want your images to be turned into wireframe images, select the Support Wireframe Images check box.

  6. In the Global Classes section, you can override some of the standards that come with the SXA grid and specify that your footer, header, and content placeholders will have full width.

    In the OtherClasses field, you can specify a value to render into a class attribute of the HTML body tag on each page using this theme.

    In the Placeholder Settings field, you determine the css class that is added to the placeholder HTML element. You can select the following options for the Header, Main, and the Footer:

    • Flex – select to make the placeholder use 100% of the screen width.

    • Fixed – select to make the placeholder use a fixed width according to grid settings. For example for bootstrap 4 it contains breakpoints:

      RequestResponse
       // Small devices (landscape phones, 576px and up)
      
      @media (min-width: 576px) { ... }
      
       
      
      // Medium devices (tablets, 768px and up)
      
      @media (min-width: 768px) { ... }
      
       
      
      // Large devices (desktops, 992px and up)
      
      @media (min-width: 992px) { ... }
      
       
      
      // Extra large devices (large desktops, 1200px and up)
      
      @media (min-width: 1200px) { ... }
      
      )
      
    • Row class – select to make the placeholder use the width of the row class.

    • Row container class - select to make the placeholder use the width of the row container class.

  7. In the Viewport field, enter a <meta> viewport element. The viewport is the user's visible area of a web page that varies with the device. You can take control over the viewport, using the <meta> tag. This <meta> viewport element gives the browser instructions on how to control the page dimensions and scaling. If your meta partial design contains a Viewport rendering, the value of this field is used to fill this meta tag. For example:

    Renders the following on the page:

    <meta name="viewport" content="viewport_value">

  8. If you want to use mock images for the image placeholders, go to the Wireframe Image section and enter the fields:  

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

    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 will be transparent.

Do you have some feedback for us?

If you have suggestions for improving this article,