Exporting / Importing Stylizer Themes

Todd Chessum -

Exporting a Theme

Please follow the steps below to export a theme using the Prime Stylizer. Note you can only export one theme at a time.

  1. Launch the Prime Stylizer by clicking on Settings Gear (SharePoint 2013/2016) or Site Actions (SharePoint 2010) and selecting the Prime Stylizer option.

    SharePoint 2013/2016


    SharePoint 2010


  2. Select the Theme you'd like to export.
  3. Once the desired theme is selected, click the Download Theme button located at the bottom of the Stylizer optioned panel. The theme file(s) for the selected theme will download.



  4. If your theme contains background images then please do the following additionally:
    • Edit the downloaded "themename.less" file in Notepad. In our example, we're downloading the "my theme.less" file.

    • Update the image path for following three variables according to the site collection to which we are importing a theme.

      • @prime-base-background-image 
      • @prime-header-background-image
      • @prime-footer-background-image
    • In a new browser tab, navigate to Site Contents on the root site of the site collection. Open the Emgage | Prime Stylizer Themes document library and download the images mentioned in above step from the Images folder.

  5. Repeat the above steps for any additional themes you'd like to export.

 

Importing a Theme

Please follow the steps below to import a previously downloaded theme using the Prime Stylizer. Note you can only import one theme at a time.

  1. Launch the Prime Stylizer by clicking on Settings Gear (SharePoint 2013/2016) or Site Actions (SharePoint 2010) and selecting the Prime Stylizer option.

    SharePoint 2013/2016


    SharePoint 2010


  2. Click the Import Theme button located at the bottom of the Stylizer optioned panel and select the theme file you'd like to import. The name of this file will take the "themename.less" format (the "themename-custom.less" file will be added later). In our example, we're uploading the "my theme.less" file.



  3. Upon successful file upload, a Save Theme dialog will appear. Input the desired theme name and click the Save button.



  4. If your theme contains background images then please do the following additionally:
    • In a new browser tab, navigate to Site Contents on the root site of the site collection to which we are importing a theme. 

    • Open the Emgage | Prime Stylizer Themes document library and upload the images (downloaded in step 4 of Exporting a Theme) to the Images folder. Note: Create a folder named Images in case it does not exist.

  5. If your theme download did not include a "themename-custom.less" file, or if you have not added any customizations to the "themename-custom.less" file for your theme, the import is now complete. Feel free to click the Apply Theme button now to apply the imported theme.



    If you have a theme customizations in a "themename-custom.less" file that you'd like to add, please continue with remaining steps.

  6. In a new browser tab, navigate to Site Contents on the root site of the site collection to which we are importing a theme.
  7. Open the Emgage | Prime Stylizer Themes document library.

    SharePoint 2013/2016


    SharePoint 2010


  8. If you changed the name of your Theme during the Save Theme step above, please make sure to update the "themename" portion of the theme customizations file. For example, if I export a theme named "My Theme" and then renamed it to "My New Theme" on import, I'd need to change the theme customizations file name from "My Theme-custom.less" to "My New Theme-custom.less" to ensure the customizations apply to the proper theme.

  9. Add the "themename-custom.less" file to the Emgage | Prime Stylizer Themes document library. Select the Replace It option when the prompt appears notifying you that a file by that name already exists.

  10. Now switch back to the tab in your browser which has the Prime Stylizer open in it, refresh the page, and then make sure to select your newly imported theme for the Select A Theme dropdown.



    This will apply your theme, with customizations, to the preview area. You can now click the Apply Theme button to apply the imported theme to your site.



  11. Repeat the above steps for any additional themes you'd like to import.
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk