Follow

Changing color theme

Article published on the 6th of November 2019.

Please note that this guide is relevant to the Modern UI version of WorkPoint 365 only.

Contents

1. Introduction

Using a different color scheme from the standard SharePoint scheme it is possible to change the look of text and icons in the Modern UI version of WorkPoint 365.

In this article we will go through how to change the color scheme in WorkPoint.

2. Requirements

There are no license requirements associated with changing the color scheme of WorkPoint 365.

Two files are used in the demonstration of the configuration. These are downloadable in the Downloads section.

3. Configuration

   3.1 Uploading the WPColor.spcolor file

Configuration of the color scheme can be done from the Site Settings page:

  1. On the Home page of the solution, click the Settings button in the top right color.
  2. In the side panel, click "Site information"
  1. In the new panel, click "View all site settings".
  1. In the Site Settings page, under the "Web Designer Galleries" section, click "Themes".
Connect-PnPOnline -Url xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -Credentials (Get-Credential)

$ListName = "Site Pages"
$PageId = Y
Set-PnPListItem -List $ListName -Identity $PageId -Values @{"PageLayoutType"="Home"} 

In the script above, substitute the "xxxxxxxxxxxxx" line with the Url of the site on which the page is located.

If the page is in danish language, in the $ListName line, substitute "Site Pages" with "Webstedssider".

For the $PageId line, substitute the Id of the page you wish to remove the header from.

  1. In the Theme Gallery page, click the folder named "15".
  1. Inside the 15-folder, click "Upload".
  1. Click the "Choose Files" button and browse to the WPColor.spcolor file (downloadable in the download section).
  2. Click the "OK" button.

The WPColor file should now show up in the 15-folder file list:

   3.2 Uploading the bgd_middlegrey.jpg file

Uploading the bgd_middlegrey.jpg file can be done from the Site Settings page:

  1. On the Home page of the solution, click the Settings button in the top right color.
  2. In the side panel, click "Site information"
  1. In the new panel, click "View all site settings".
  1. In the Site Settings page, under the "Look and Feel" section, click "Change the look".
  1. Click the "Current" theme.
  1. For the "Colors" drop down menu, select the last color scheme in the list (should look like in the image).
  2. Click the "Change" button below the "Drop an image here" box.
  1. Click the "Choose File" button and browse to the "bgd_middlegrey.jpg" file (downloadable in the download section).
  2. Click the "OK" button.
  1. Click the "Try it out" button.
  1. Click the "Yes, keep it" button.

   3.3 Rolling out the theme

After having made the changes in section 3.1. and 3.2 in this article, the changes to the theme can be rolled out to the solution from the WorkPoint Administration:

  1. Click the "Home" button of the solution.
  2. Click the cog icon to access the WorkPoint Administration.
  1. In the WorkPoint Administration, in the left side menu, click "Layout and Theme".
  1. In the "Layout" page, click "Start theme rollout".

This process may take a while depending on the size of the solution. You will be notified once the process is done.

   3.4. Removing the top bar on new site pages

The top bar can be removed for all new pages using the following PowerShell script:

Connect-PnPOnline -Url xxxxxxxxxxxxxx -Credentials (Get-Credential)

$ListName = "Site Pages"
$PageId = 4
Set-PnPListItem -List $ListName -Identity $PageId -Values @{"PageLayoutType"="Home"} 

In the code above, substitute the "xxxxxxxxxxxxxx" line with the URL of the site.

If the site is in danish language, substitute the $ListName value from "Site Pages" to "Webstedssider".

Substitute the $PageId value from 4 to the Id number for the page you wish to remove the header.

4. Notes

Please note that this guide is relevant to the Modern UI version of WorkPoint 365 only.

Have more questions? Submit a request