The base themes

Current version: 10.3

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.

Base themes contain scripts and styles that deliver more complicated functionalities. For example, shared functionalities such as the 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).

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

Analytics

The Analytics base theme adds analytic scripts for your site (Google analytics). It is dependent on XA.js (XA API theme).

It includes the following scripts:

Script	Description
trackinginit.js	Adds a tracking method to SXA's `XAContext` variable. After calling this function on document ready, an event will initialize tracking of video components.
tracking.js	Adds Google Analytics scripts. After calling this function on document ready, it will store the methods and setups for these scripts to run.
trackingmovie.js	Adds the `Tracking.Movies` method to SXA's `XAContext` variable. Stores the method for mejs and YouTube player analytics.
trackingmoviesplayer.js	Describes the method of the video player. Used in `trackmoviesmejsplayer.js`.
trackingmoviesplayermanager.js	Extends SXA's `XAContext` variable with the `Tracking.Movies.PlayerManager` script and stores methods for the video player.
trackingmoviesyoutubeplayer.js	Extends SXA's `XAContext` variable with the `Tracking.Movies.YouTubePlayer` script. Stores list of YouTube player methods.
trackingmoviesyoutubeplayerhandlers.js	Extends SXA's `XAContext` variable with `Tracking.Movies.YouTubePlayer.Handlers`. Stores YouTube player handlers.

Bing Maps JS Connector

Add the Bing Maps JS Connector theme if you use Bing maps. It is dependent on the XA.js (XA API theme).

It includes the following script:

bing-maps-connector.js - injects functionality for Bing maps.

Google Maps JS Connector

Add the Google Maps JS Connector theme if you use Google maps. It is dependent on the XA.js (XA API theme).

It includes the following script:

google-maps-connector.js - injects functionality for Google maps.

Grid

The Grid theme is used during content editing. It lets you show components that are hidden by the grid and includes the following script:

gridhiddencomponents.js – show or hide components that are hidden by the grid.

The Grid theme includes the following style:

gridhiddencompontents.css

JSON

The JSON theme is used when a current device selects JSON. It adds markup and styles to highlight JSON and it includes the following script:

jsonhighlighter.js - formatting and syntax highlighting to make JSON more readable.

The JSON theme includes the following styles:

prism.css – styles for highlighting JSON
Json.css – sets default styles for JSON page

Main theme

The Main theme contains scripts and styles that are part of the platform (except for the rendering scripts). The Main theme has a dependency on the Core libraries theme, so if you are inheriting from it, you must also inherit from Core libraries first. It is dependent on the XA.js (XA API theme)

The Main theme includes the following scripts:

Script	Description
observer.js	Calls the `XA.init` method on Chrome reset.
partial-design-highlight.js	Highlights the partial design when you hover over different designs from the drop-down menu in edit mode.

The Main theme includes the following styles:

Style	Description
core.css	Grid specific fixes.
file-type-icon.css	Styles for extension icons.
grayscale-mode.css	Styles for Gray Scale mode.
reset.css	Reset default browser styles.

Maps

You must use the Maps theme if you use the Maps.Dependent script in the XA.js (XA API theme).

The Maps theme includes the following style:

component-location-service.js – location service for the map component.

Meta partial design

The Meta partial design theme stores scripts and styles for meta partial designs.

It includes the following scripts:

beautify-html.js – calls the beautifier method for html.
meta-partial-design.js – selects all components in the meta partial design view and calls the beautify method.

It includes the following styles:

meta-styles.css - styles for the meta partial design page.

Search theme

The Search theme contains js logic for each separate search component.

Sticky notes

The Sticky notes theme provides the possibility to add sticky notes in Edit mode.

It includes the following script:

stickynotes.js - js logic for sticky node functionality

It includes the following styles:

stickynotes.css - styles for sticky nodes functionality

Variants

The Variants theme provides the possibility to change rendering variants for components in Edit mode.

It includes the following script:

variantswitcher.js - provides functionality for changing rendering variants in the Experience Editor.

XA API

The XA API theme registers components.

It includes the following script:

xa.js - injects special SXA objects that include the method for working with components and additional helpers.

Core libraries

The Core libraries theme includes the third-party libraries used in projects such as jquery, jquery UI, lo-dash, mediaelement, modernizr, and so on.

The Core libraries theme includes the following scripts:

Script	Description
Ie-origin-fix.js	Adds a fix for IE to have location.origin.
xaquery.js	Initializes jQuery and jQuery UI and puts them into `window.$xa`.
moment.js	The momentjs.com library to work with date/time functionality.
lo-dash	Adds the lo-dash library.
modernizr.js	Adds the modernizr library.
galleria-157.js	Adds the galleria library.
fullcalendar.js	Adds the full calendar library.
gcal.js	Adds the Google calendar.
jqueryuitouch-punchmin.js	Adds touch events for jQuery UI.
hammer.js	Adds the hammerjs library.
backbone-min.js	Used in search components and the maps component.
typeahead.js	Used in search components.
jquerymCustomScrollbar.js	Adds a custom scrollbar for the SXA toolbox.
flash-polyfill.js	Adds polyfill for the flash component.
mediaelement-and-player.js	Adds a library for the video component.
facebook.js	Adds a connector for Facebook video.
soundcloud.js	Adds a connector for SoundCloud.
twitch.js	Adds a connector for Twitch.
vimeo.js	Adds a connector for Vimeo.

The Core libraries theme includes the following styles:

Style	Description
mediaelementplayer.css	Media element styles.
mediaelementplayer-legacy.css	Legacy styles for the media element.
font-awesomemin.css	Styles for the font-awesome library.
mejs-controls.css	Styles for the mejs control elements.
fullcalendar.css	Styles for the calendar component.
querymCustomScrollbar.css	Styles for the custom scrollbar (SXA toolbox).
jquery-ui.css	Styles for the jquery UI components.

Editing theme

The Editing theme adds logic that is used to edit components in the Experience Editor.

The Editing theme includes the following scripts:

Script	Description
xamover.js	Drag and drop helpers. Provides methods that help to work with placeholders.
initializer.js	Initializes xamover functionality.
draganddrop.js	SXA drag and drop functionality,
gridlines.js	Visualization of grid columns.
toolbox.js	SXA toolbox logic.
treeview.js	Extends Sitecore.Treeview with a method that returns data context.
popupsGecko toolbox.js	Extends scBrowser for Gecko.

The Editing theme contains the following styles:

Style	Description
edit-here-hint.css	Fixes behavior for the edit-here-hint element.
sx82fonts.css	Exports open Sans fonts from Google.
toolbox.css	Styles for the SXA toolbox.
xamover.css	Styles for drag and drop functionality.
partialdesignhighlight.css	Highlight partial design placeholders.

Editing Components

The Editing Components base theme stores logic for components that have special behavior in editing mode.

The Editing Components theme includes the following scripts:

Script	Description
component-accordion-edit.js	Logic for the accordion component in editing mode.
component-tabs-edit.js	Logic for the tabs component in editing mode.
component-galleria-edit.js	Logic for the galleria component in editing mode.
component-overlay-edit.js	Logic for the overlay component in editing mode.
component-carousel-edit.js	Logic for the carousel component in editing mode.
component-flip-edit.js	Logic for the flip component in editing mode.
component-snippet-edit.js	Logic for the snippet component in editing mode.

Resolve conflicts

The Resolve conflicts theme resolves conflicts when you open the Experience Editor within the Content Editor window.

The Resolve conflicts theme includes the following script:

Resolveconflicts.js - resolves conflict between JQuery and prototype.js.

Components theme

The Components theme stores the js logic for all SXA components:

Do you have some feedback for us?

If you have suggestions for improving this article,