Adding Custom Styling to Prime

Todd Chessum -

Step 1: Located and Download the themename-custom.less file

From the root site of your Emgage enabled site collection, navigate to Site Contents, then locate and open the Emgage | Prime Stylizer Themes document library. You'll see a list of files which correspond to your Stylizer themes. Find the one with a name that matches the Theme you would like to customize and directly under it you will see a file with the same name, but with "-custom" appended to it. Go ahead and download this themename-custom file as it's the one will be adding our customizations to. On download you'll find that this files full name is themename-custom.less. Go ahead and open this file in your preferred code editor, or in a simple text editor such as Notepad or Notepad++ (Win), or TextEdit (Mac).

 

Step 2: Update themename-custom.less file

Add any CSS customizations you would like to the themename-custom.less file.

 

Step 3:  Adding and Applying your Theme Customizations

Now that your themename-custom.less file has been changed, we're ready to apply the changes to your site. First save your themename-custom.less file, then re-upload it to the Emgage | Prime Stylizer Themes document library. Select the "Replace It" option when uploading, as we want to replace the previous version. We now need to apply the customizations within the themename-custom.less file to your site. To do this open the Prime Stylizer.

Opening Prime Stylizer in Office 365

From to the root site of your Emgage enabled site collection, navigate to Site Contents and selecting the Emgage | Prime Stylizer app.

Opening Prime Stylizer in Sharepoint on Premises

Click on the Settings gear (located in the upper right of screen for SharePoint 2013, 2016), or clicking Site Actions (located in the upper left of the screen for SharePoint 2010) and selecting the Prime Stylizer option on the drop down that appears.

With the Stylizer App open, confirm that the desired theme is selected and click the Apply Theme button (located at the bottom right of the screen). This will incorporate your customizations into the sites stylesheet. That's it! Close out the Stylizer, hit "ctrl + F5" to clear the cached version of the stylesheet, and you'll notice that your customizations are now applied.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk