Back to previous page

How To Brand SharePoint Online Modern Sites

Log In to Watch How to Video Now
How To Brand SharePoint Online Modern Sites

Please log-in to view this video. Sign up for FREE ACCESS HERE

In this How To video we will learn how to change the default colour setting in SharePoint Online Modern Sites. The video is presented by Yaroslav Pentsarskyy, Executive Director, Origami Connect who is a Published Author, Speaker and Microsoft MVP.

Video transcript:

In this video we’ll take a look at how you can change the default color setting for the SharePoint online modern sites and as you can see I have a ship on online communication site created here and it’s a default blue and white template so what I’m gonna do if I click on a gear icon here and say change the log you can see that there is quite a few options for four different color options available but some of them are not it may not be something that you want it may not be your corporate colors so in my case for example if mine’s yellow and the only option here is dark yellow and I want a light yellow basically what my corporate color yellow. Obviously some of these options may not work for you so and also even if I click customize here there’s limited options here what I can choose from so there’s things like accent color and main color but I can’t really pick my own color so we’ll take a look at how you can update the site. In this case with your own custom site, first of all how do you know that you have a SharePoint UI modern site unlike any other SharePoint online sites to create SharePoint Online modern sit. You would go to the app launcher here and click SharePoint and then from here you would click create site, suddenly here you have two options team site and communication sites and from what we’ve looked at just a second ago this was a communication site.

Let me go back to my site so there’s a couple of tools that we’re gonna need. First we’re gonna need to download and install the SharePoint Online Management shell and I’ll provide the link to download this. It’s basically a tool that you can install. It’s a command prompt that you installed on your desktop very easy and simple installed just download it and run it done. The second thing that we’re going to need is this theme generator and a theme generator is basically a little wizard that allows you to pick the colors that you want. I’ll provide the link to that as well and as you can see here you can choose what colors you want to you want to you have. As in my case let’s pick something like this and I’m gonna leave the body text color you know as dark and and background color too just white. I could change it a little bit more, let’s change it a little bit just just just to demonstrate how this all works and what’s what this tool does here generates this code here and we’ll need we’ll take a look at that call a code in a moment the first thing I wanted to show you is that here’s the preview of what what things are gonna look like right so This is kind of like preview of various different controls and what they’re gonna look like. For the color palette that I’ve chosen these are all the options and toggles etc so when I’m ready with whatever combination of colors and options that have chosen I’m gonna copy this particular piece of code.  The PowerShell and what I’m gonna do is I’m gonna open a text editor here and I’ll provide this code for you so you can easily copy and paste but I’m replacing a piece of block here which describes this theme and all the colors that I want to use with it and there’s a little command here at the bottom which provides the name for my new theme that I’ve created. It’s in this case origami yellow is my theme name and everything else here just referenced is this code to install this theme and make it available. It’s the simplest thing ever. First things first I’m gonna open the SharePoint Online command shell which I’ve installed in and downloaded and installed earlier and I’m gonna run first command. I’m gonna run to authenticate. I’m gonna paste a little snippet here and change the URL here to share much which is my URL click OK. Now SharePoint’s gonna ask me to log in. Ok so now that I’ve logged in I’m gonna copy and paste the code. Okay I’m gonna hit enter here and just like that in a few seconds the command succeeded – there’s no errors. I’m gonna go back to my SharePoint side and I’m gonna click the gear icon and change the look and without any refresh you can see that I have origami yellow here. If I want to click on it right away the backgrounds changed all the little buttons and controls have changed to how I want them to be. Now one thing, you will see that there is a part that didn’t change but lots of other elements have changed. If you’re happy with this configuration just click apply and that’s it. One of the things that you may want to do as you’re experimenting with this look, you may want to delete the the color scheme so let me show you how you do that first of all. I’m gonna change this scheme to something else so I’m gonna pick this blue here click apply and then I’m gonna open my PowerShell command prompt, all right and basically the command is very simple remove SPO theme and then the name of my theme I click enter and if I go back to my change to look I will not see my origami yellow anymore as simple as that if you liked this video be sure to comment below and let us know what other branding options you’d like to see.

Share this on...
Log In