Branding SharePoint Modern Sites

hello and welcome to this video on finding set up on modern sites myself tentative Knutson and I'm working on SharePoint for more than 13 years so a brief about me is that I am a Technical Architect mostly working on dotnet Microsoft Azure and SharePoint today's video we are going to look at how to brand the modern SharePoint sites so the Microsoft is promoting modern SharePoint sites in the SharePoint Online platform although the modern sites has only teams and community templates available they are responsive in nature and also offer integration with office 365 groups in a nutshell modern sites provide better collaboration than before with the classic SharePoint sites the modern team site also seamlessly work with the mobile apps and this increases the usability and offers collaboration on tico while browsing the SharePoint sites on any device organizations are very much keen to have their own branding that means they want to see their own organization logo color theme etc so then we will see what what is the difference between modern sites in terms of branding compared to the classic SharePoint sites so the classic SharePoint site offers multiple ways to apply our own branding so for example we can apply the alternate CSS to a classic shape on site and then it can work on entire SharePoint site as well as onto the sub sites of it the second way is we can create our own custom master pages and reference the CSS inside it so that whenever wherever the master page is applied the CSS will get applied then the third option is we can create the device channels and the master pages and the fourth option is we can add the inline CSS to each of the page wherever we need to play around with the UI component so that means we can just add a script editor or a contained interval part inside that we can refer the style sheets using styles slash element and then that particular page will is ready to render our own CSS so that was all about what we were able to do in the classic site but unfortunately none of these options are available with the modern sites so the Microsoft has introduced new alternative for us to have our custom rending to modern SharePoint sites and they are called as site themes so this new site theme experience allows site owners to apply themes to the SharePoint sites so segment by default offers few themes for us to choose from so to demonstrate that let us go back to a SharePoint site so this one is the modern SharePoint site if I click this gear icon and go to change the look here we can see all of the themes which are offered by SharePoint out of the box so here at this moment you can see 8 themes appearing here but there might be few themes here in the future but as of now we can take advantage of any of this thing for example I want to apply this cream kind of a look and feel onto my side I can click this green and you can see that it started at padding right away onto the SharePoint site if I click red then that particular theme we'll get applied onto onto this site if I click maybe yellow it will be here as well as if I click view it will be here so just come just for a moment we can maybe apply a red and click apply so once we click apply the theme will get applied to this particular shape one side so again if we go back here to the change the look we only have these eight options for us to choose from for our SharePoint site theme but what about if my organization's theme color is not in this particular list for example they want some kind of color which is combination of red and green but which is not here and for example if my organization has a red color but it is not closely matching with this team so I want to be having that particular exact theme for my SharePoint site so what to do so the answer to this question is that we need to create our own self on-site theme so we can create our own SharePoint site thing we can deploy it here and from those deployed SharePoint site themes we will be able to choose that and apply to our SharePoint site so then let's go ahead on creating the custom SharePoint site themes so the creating the site thing for a modern SharePoint site is very much simple as compared to writing custom CSS in the past for the classic sites so in the classic site V we had to deal with the multiple CSS classes those we need to match with the SharePoint and then only the themes we're appearing but compared to that the theme generation is very much simpler in the modern SharePoint sites so Microsoft has are provided theme generated to create our own color theme so maybe let's have a look at this theme generator directly this one is provided by default from Microsoft so theme generator is a online application or a tool which helped us to generate the color palette that we can deploy to our tenant as a side thing so this tool allows us to select the primary theme color the body text color body background color and once we are ready with our color selection the theme generator offers us with the three options to download the theme so the first option here is a JSON format second one is de a suitable is format SAS format or the third one is a PowerShell format so for this video we will go ahead with the power cell format although it should sound a bit crazy to start with the power cell but it will help us to deploy the theme to our tenant and it is option for us to go for so even here you can see as and when I try to navigate to this colors so the same color hex hex as well as RGB will start appearing here and accordingly these values in this text boxes will get change so once views to select the colors for the primary team color body background color and the body text color all those values will be appeared over here alternately for example if you have any predefined color in your mind then you can directly go ahead with those RGB values or hex values you can directly edit Li over here and once you are done with this color selection the output section will present you with that corresponding Jason sass or the power cell options so right now as I said we are more interested in the power cell option in this video and to get this theme deployed to SharePoint we will go ahead with the Power Cell so for that I will open up the visual studio code within I have the power cell extension deployed so the so could apply the site theme on to a SharePoint tenant there are two prerequisites so the first one is you should have at least SharePoint on SharePoint admin privileges otherwise you won't be able to perform this operation second one is that at least you should have SharePoint Online management tool or visual should a code with the power cell extension by which you will be able to deploy this theme to set up on tenant so for this we will first connect to our circle tenant so let me just run this command okay it is asking me for the password to connect to SharePoint tenant okay there we go it might take some time for the first time so okay so right now we are into the what we have connected to the SharePoint Online site then let us run this command dead - SPO theme so if I run this command it will give us the list of themes that are available to us so as of now you can see I don't have any custom theme applied to my SharePoint tenant does the reason we do not see anything here so for example if any of the theme would have been here then it would have been appealing if they change the look so as of now no custom themes applied so we will go ahead and we will apply one theme so just for this demonstration purpose I have created one theme with a yellow color and we are going to or we can store that entire selection in a Power Cell variable so for this I will just run this command so that in the Power Cell variable we have all the values for our theme then in order to deploy this particular theme to a SharePoint site we need to run this command I had - SPO theme we need to specify the name for this for that particular theme and to the palette we can give this variable in which behind the values for theme and the is inverted stands for if the colors are inverted or those are not so that means if you have any dark color theme then in that case you can go ahead with the value of true for is in is inverted otherwise it can be false so I will select this command we will run this command and now that we have our theme applied so just to confirm I will again the run great - it's pure theme so that it should list that particular theme which is which we installed on to our set one side so right now that we have added our theme called as origami yellow on to our tenant so just to test that let's go back to our SharePoint site from the references and we will click the gear icon again click T change the look and fill and now that you can see we have our company theme here origami yellow once I click this you can see that it has called reflected with the yellow colors and dot text so I will click apply and yes there we are so now that our SharePoint site has got the nice look and feel of yellow which is closely matching to our organization brand for example if you are if you want to update this theme then you can again now have the command like set - SPO theme you can mention the name and again you can mention the changed palette and that particular theme will be updated with the values which you have specified inside the palette for example if you want to remove the theme then just simply run this command remove - SPO theme and it will help you to remove this particular theme from your tenant just make note that this particular theme will get applied to your tenant so it can be used on any of the cell phone modern site so just to summarize again site theme is the available option to apply our organization's team to SharePoint site or particularly set up on modern sites however these themes will not be available on to the classic sites so on the classic side wheel - we'll have to go with the other options which we specified previously like with the CSS classes or a master page but at least in modern sites we can create the theme and weekly we can apply it onto any of the SharePoint site however these themes will not be available on this classic site and in comparison with the classic themes modern themes offers less control that means we can only change the colors so as like in modern classic SharePoint site we could have changed the entire layout or we could've even played with another controls but at least in modern SharePoint site it is bit limited we can just change the theme or change the colors we cannot have for more control than this however it is the only solution at this point to have our themes applied so so for a trial you can any time visit to this theme generator you can create your own theme maybe you can go ahead with the JSON sash or PowerShell operation you can add that theme to your SharePoint tenant directly you can update the theme and if you are not happy you can even remove the things so this is how the themes can be applied to the modern SharePoint sites thanks for watching this video and have a nice day

Channel: Nanddeep Nachan

Views: 4,037

Rating: 5 out of 5

Keywords: SharePoint, Branding, Modern SharePoint, Theme, sharepoint online, office 365, sharepoint branding 2013 step by step, sharepoint branding 2013, sharepoint branding 2016, free, courses online, training day, tutorial, new, update, english, sharepoint intranet, sharepoint communication sites, it enthusiast

Id: JaV2nLkzdug

Length: 13min 10sec (790 seconds)

Published: Thu Aug 09 2018