Skip to main content

Create a SharePoint 2013 Theme using Color Palette Tool (Web2)

Summary : Create Custom Theme in SharePoint 2013 (Step-by-Step Tutorial), Create Theme in SharePoint 2013, Create new Composed look, SPColor.xml, SPFont.xml in SharePoint,Create Custom Theme in SharePoint 2013 – Step-by-Step Tutorial
In SharePoint 2013, the theming engine was highly improved. You can Create Custom Themes by Creating Color palettes and Font Schemes, and uploading them to the Themes Gallery.
Themes in SharePoint 2013 are defined two XML files:
  • SPColor.xml - defines the color palette, in which slots now have semantic names so that it’s more clear what UI elements will be affected when you change a color value. Also, themes now support setting opacity.
  • SPFont.xml - defines the font scheme and supports multiple languages, web-safe fonts, and web fonts.
Because We’re So Good, Our Content gets Copied very Often.If you are not reading this on LearningSharePoint.com please read the Original article Herefor details, comments and updates on this post.

How it Works - The Theming model uses Comment-style markup in the CSS and then replaces parts of the CSS based on parameters such as fonts and color schemes that users select.
Theme Gallery – Theme Gallery Contains the list of Color Palettes and Font Schemes that are make up Themes in SharePoint 2013. SharePoint looks in the 15 folder (/_catalogs/theme/15/) to determine the available Color palettes and Font schemes.
To access the Theme Gallery navigate to Site Settings -> under Web Designer Galleries -> Themes.
Composed Look – A Composed Look is a List where Structure and Components of a Theme are defined.You can define the following for a Theme –
  • Color palette
  • Font Scheme
  • Background Image
  • Master Page
Theme Gallery VS Composed Look – Theme Gallery Contains Core files that make a Theme – SPColor.xml and SPFont.xml whereas Composed look Contains Links to these files in a structured way.
SharePoint 2013 Composed Look
How to Create a new Theme - To Create a new Theme, you would need to Create Copies of SPColor, SPFont, Master Page and Image files and Create a new Composed Look with references to these files. Lets look the Steps to Create a Custom theme in SharePoint 2013 –
1. Navigate to one of the existing Composed Themes in Composed look List.We are selecting Grey in our Case.
Select the name of the spcolor file from the Theme as seen in the Screen below –
SharePoint 2013 Composed Look
2. Next Navigate to the Themes gallery (Site Settings -> under Web Designer Galleries -> Themes) and Download the Copy of the ‘palette032.spcolor’ (as selected in the above screen).
SharePoint 2013 Themes Folder
Open this SPColor file in SharePoint 2013 Designer or in a Notepad.
3. In the Notepad Change the Values or Colors for the Site Name Properties. We modified the WebPartHeading & PageBackground properties highlighted below.
SharePoint 2013 SPColor
4. Once modified re-name the file and Upload in the “Themes” folder.
SharePoint 2013 Upload SPcolor
5. Next register a new Theme in Composed Look. Navigate to Site Settings -> under Web Designer Galleries -> Composed Looks. Click new Item to create a new Composed Look.
SharePoint 2013 Create Composed Look
6. In your new Composed Look Page you would add the following –
  • Name: the name of your composed look;
  • Master page: the master page that you want to use;
  • Theme URL: the URL to your color palette;
  • Image URL: the URL to your background image;
  • Font Scheme URL: the URL to your font scheme;
  • Display Order: this will be used to arrange your composed looks ordering.
Below is what I entered to Create our new Composed Look named “Custom Theme”. I entered “Palette033.spcolor” that I uploaded in the Themes folder. See the screen below –
SharePoint 2013 Custom Composed Look
7. Once done, Navigate to “Change a Look” at Site Settings -> under Look and Feel -> Change a Look and select the newly Created Theme “Custom Theme” (it was on the 2nd Page)
SharePoint 2013 Change the Look
The Resulting Theme –
SharePoint 2013 Resulting Theme
Migrating Themes from SharePoint 2010 - SharePoint 2013 does not support“THMX” Themes that are Created in SharePoint 2010. If you are looking to migrate a Custom Theme from SharePoint 2010 to SharePoint 2013, you would have to re-design the Theme with new structure, defined by XML files – SPColor.xml and SPFont.xml and then apply to the new SharePoint 2013 site.
Please Note – The Custom theme from SharePoint 2010 after upgrade will remain in place but the theme will no longer be applied to the site, and the site reverts to the default theme.

Comments

Post a Comment