Try ShortPoint nowBy default, a Theme Builder theme that you export retains all the customizations you've made in Theme Builder, except the color palette.
This is done for a reason: we assume that your SharePoint sites already have brand colors set up; therefore, we don't want the theme to interfere with them.
However, in case you would like to share the exact same customizations from one site to another, including the colors, here's a method you could use.
TABLE OF CONTENTS
- Prerequisites
- Step-by-step Tutorial
- Step 1. Open the site from where you would like to export the theme with colors.
- Step 2. Open Theme Builder on this site.
- Step 3. Export the Theme.
- Step 4. Use the code formatter to make your exported file more readable.
- Step 5. Paste the formatted file into a text or code editor.
- Step 6. Get the colors from your site and put them into the exported JSON file.
- Step 7. Prepare the color code snippet.
- Step 8. Insert the color code snippet into your Theme code.
- Step 9. Import the modified Theme Builder theme into the desired site(s).
Prerequisites
1. You have a ShortPoint license. Trial users cannot export Theme Builder customizations.
2. You have a SharePoint site with ShortPoint installed and Theme Builder customizations made (including color palette customizations).
3. You have another site or sites where you would like the same theme to be applied, including the colors.
4. ShortPoint is installed on the site(s) where you want to apply the theme to. If not, please install as explained here: How to Add ShortPoint to Another Site.
Step-by-step Tutorial
Step 1. Open the site from where you would like to export the theme with colors.
For example, here we have a site where particular Theme Builder customizations were made, including modifications to the color palette:
Step 2. Open Theme Builder on this site.
Go to Site Contents > ShortPoint Dashboard > Theme Builder. Select your type of site and click "Customize site". The Theme Builder menu will pop up:
Step 3. Export the Theme.
In Theme Builder, go to Utilities > Import/Export, click Copy in the section where it says export.
Step 4. Use the code formatter to make your exported file more readable.
Here is the code formatter we used in this example: https://jsonformatter.curiousconcept.com/#. Paste the code and hit Process:
Down below you will receive the formatted code. Click the clipboard icon to copy:
Step 5. Paste the formatted file into a text or code editor.
Option 1.
If the colors are available to you through the Theme Builder, you can copy them just from there. You will usually have 6 colors. Copy their names or HEX codes (depending on what you see):
Option 2.
If you don't have access to these colors (e.g. you want to copy the colors from our Demos Website) you can use the following method: How To Extract Colors from a Theme Builder Customized Site.
Step 7. Prepare the color code snippet.
Here is the code you need to copy, and edit it to contain your Hex color codes:
,
"primary-color":{
"value":"#95c623"
},
"secondary-color":{
"value":"#95c623"
},
"highlight-color":{
"value":"#95c623"
},
"alternate1-color":{
"value":"#95c623"
},
"alternate2-color":{
"value":"#95c623"
},
"alternate3-color":{
"value":"#95c623"
}
}
}
Step 8. Insert the color code snippet into your Theme code.
First, make sure you scroll down to the very bottom of your text or code editor document:
Insert the code snippet you prepared in step 7 like this:
Be careful with all the period and curly braces punctuation, make sure it's exactly like in the screenshot.
Step 9. Import the modified Theme Builder theme into the desired site(s).
You can do this by copying the whole code you just created, and pasting it into the Import section of the Theme Builder (Utilities > Import/Export):
That's it, now your theme is retaining the website colors and can be applied anywhere on your SharePoint where ShortPoint is installed.
Related articles:
