This is part one of what will hopefully become a multi-part series on embracing Modern SharePoint from the perspective of a designer.

I’ve been doing SharePoint branding and design for the better part of a decade now. Ever since SharePoint 2007 was released I’ve created themes, dug into CSS, built custom master pages and page layouts, added scripts, scoured blogs and forums for tips and tricks for making SharePoint look, well, not like SharePoint. That’s my bread and butter: bending SharePoint to my will, make it look however I want. And life was good.

Then, Modern Happened. 

At the Ignite Conference in May 2017, Microsoft unveiled the future of SharePoint, and it looked and behaved unlike anything we had seen before. Adding webparts and content to pages was almost instantaneous. Rollups were configured without breaking a sweat. It was responsive! It looked cool! It was a shiny new toy to play with. But I couldn’t help but notice that one familiar piece was missing: where are my master pages? My page layouts? Custom CSS?

Left in the dust. Yep, to give SharePoint a shove into the modern era, Microsoft made some major changes to the SharePoint I knew and usually loved, and from a designer’s perspective they were a little devastating. No more custom master pages. Page layouts are completely unnecessary since just about any layout you’d ever need can be created on the fly. There’s no out of the box way to inject my own CSS. Oh, the same SharePoint is still technically available alongside Modern SharePoint. But now they’re calling it “Classic SharePoint,” which sounds like a nice way of saying “Old, Musty SharePoint.” So what’s a branding guy to do?

I figured I had two options: I could hide in the corner and cry over the loss of my master pages, or I could accept the challenge and embrace modern SharePoint. This series is about figuring out how to take what I knew about branding classic SharePoint and apply it to these slick, new modern sites.

Try it Out

The best way to start embracing modern SharePoint is to just get your hands dirty – spin up a modern site and go to town. Modern SharePoint is snappy and intuitive. Put the page into edit mode and you can start adding web parts. From the get-go, you’ll find that it’s quicker to build a page than ever before. No more having to wait for the page to refresh every time you add or edit a web part; no more being constrained by your web part zones or dealing with clunky wiki page layouts. Go ahead and change the settings on the Hero web part. Add some text. Drag an image into your text block and see how SharePoint automatically breaks up the text into two separate web parts (cool, huh?). Add a highlighted content web part and check out how easy it is to bring content forward. Change a web part title without having to open the web part menu and scroll all over the page to find it! Play around with the various display options on the web parts. Split your page into sections, add section background colors (this might be my favorite new feature), and change the number and width of columns on the fly, without even having to change to a new page layout. There’s actually a lot to like here! You’ll run into some stumbling blocks along the way. It’s inevitable. But it just requires a different mindset and a new way of thinking about what’s important. The answer to what’s important, of course, is the content. Modern SharePoint already looks pretty darn nice, so now as a designer you can offer your expertise on laying out that content in a way that works within the page framework of the modern pages.

“But What about my Customizations!?”

For better or worse, it’s a Modern SharePoint world and we just live in it. We can play with it and use it, but installing custom solutions is a lot more difficult now. And they like it that way. It makes life easier for them, especially when updates are concerned. With the ever-evolving space of Office 365 it’s much easier for Microsoft to restrict us from messing with their code so they can push updates faster without having to worry about wacky customizations leading to broken pages.

Life for us SharePoint branding folk is different now. Microsoft took our colored pencils and markers away and left us with paint-by-numbers for customizing. Really, the only major customization we can do out of the box is with themes. There are a handful of out-of-the-box themes, but when embracing SharePoint most companies want to put their stamp on it. It’s your intranet, not just some random application! It should still be reflective of your brand, it should be engaging, it should be dynamic! Well the good news is that you can still achieve these things without a ton of extra effort. We’ll get to that in a moment.

I had a math teacher way back in high school that didn’t call tests “tests.” He called them “opportunities.” Opportunities to show off what you knew, opportunities to increase your knowledge (and your grade).  This is kind of like that. Modern SharePoint is an opportunity to step away from your comfort zone and embrace something new, exciting, and scary. Remember the first time you opened a SharePoint master page? Admit it, you were probably a little apprehensive about editing it. Registration tags, required placeholders, ScriptLink tags, so many things to remember and learn… This is kind of like that! So challenge yourself – and view this as an opportunity to learn something new.

Creating a new Theme

But how do you go about applying your brand? It starts with the logo and theme. “But wait,” you say, “There isn’t even a built-in theme generator! And what do you mean I have to use PowerShell to install theme? I’m a designer damn it, not a developer!” Well that’s true. There isn’t a theme builder in SharePoint, but there IS a handy theme generator at https://developer.microsoft.com/en-us/fabric#/styles/themegenerator. And while you technically do have to use PowerShell to install your new theme, it only takes a few seconds. Honest! So embrace it! Learn it! It’s new and exciting!

First, head to the Theme Builder website (https://developer.microsoft.com/en-us/fabric#/styles/themegenerator). Play around with the color picker and sliders for your “primary” theme color and primary text colors. The far right color picker controls your background color. You can scroll further down the page to see your color changes reflected in the code blocks below the color pickers. Further down, you’ll find samples of SharePoint controls in your theme color.

One note though – while you can click on each individual color block and adjust its color, those changes don’t currently reflect in the code blocks. So if you want to create a really crazy theme you’ll need to copy the generated code and manually change the values manually in a text editor. (Annoying, I know but it is what it is).

Now that you’ve chosen the perfect color combos, it’s time to switch to the PowerShell tab on that page and copy the generated PowerShell Code.

Open a Text Editor (heck, even Notepad will technically do the trick) and type in the following (replacing ‘yourtenant’ with your actual tenant name):

Connect-SPOService "https://yourtenant-admin.sharepoint.com"

Now, on a new line type $themeName = "My First Theme"

Next, on a new line type $themeColors =

And after the = paste in the copied code from the Theme Builder.

Finally, after the theme Colors block, type in the following cmdlet:

Add-SPOtheme – Name $themeName -Palette $themeColors -IsInverted:$false

Your complete text file will look something like this (comments have been added to each step for clarity:

#Connect to admin portal

Connect-SPOService "https://mytenant-admin.sharepoint.com"

#Theme Name

$themeName = "My First Theme"

#Theme Colors below in "themeColors" variable

$themeColors = @{

"themePrimary" = "#0a2245";

"themeLighterAlt" = "#d1dae9";

"themeLighter" = "#aabbd4";

"themeLight" = "#889ec0";

"themeTertiary" = "#6983ab";

"themeSecondary" = "#4e6b97";

"themeDarkAlt" = "#375582";

"themeDark" = "#24426e";

"themeDarker" = "#153059";

"neutralLighterAlt" = "#f8f8f8";

"neutralLighter" = "#f4f4f4";

"neutralLight" = "#eaeaea";

"neutralQuaternaryAlt" = "#dadada";

"neutralQuaternary" = "#d0d0d0";

"neutralTertiaryAlt" = "#c8c8c8";

"neutralTertiary" = "#c2c2c2";

"neutralSecondary" = "#858585";

"neutralPrimaryAlt" = "#4b4b4b";

"neutralPrimary" = "#333333";

"neutralDark" = "#272727";

"black" = "#1d1d1d";

"white" = "#fefefe";

}

#Add theme to site. (Add -Overwrite switch to update existing theme)

Add-SPOTheme -Name $themeName -Palette $colorPalette -IsInverted:$false -Overwrite

Next, fire up the SharePoint Online Management Shell. If you have been avoiding PowerShell you can download the latest version here: https://www.microsoft.com/en-us/download/details.aspx?id=35588

Now all you have to do is paste the contents of your text file in the Management Shell window and hit Enter. You’ll be prompted to enter your credentials in the little pop up box. Once you do, SharePoint will take care of the rest.

Now, navigate to your modern site. Click the Settings gear > Change the Look. Hey! There it is “My First Theme” right there! Select it, click Apply, and just like that you applied branding to your site.

One thing you might notice is that Microsoft’s themes probably don’t jive with your corporate branding. Wouldn’t it be nicer if only the custom company-colored themes were available for users? We can do that too. Since you have PowerShell already open, just type the following and hit enter:

Set-SPOHideDefaultThemes $true

This will hide the out-of-the-box themes and leave only your custom, company approved themes visible. (If you want to restore the OOTB themes, simply run the same cmdlet again, replacing $true with $false and everything will be restored).

Finally, if you’re ready to create a “real” company theme and need to remove your test theme, it’s as simple as running the following:

Remove-SPOTheme -Name "My First Theme"

It’s been an interesting 18 months since Microsoft unveiled this new bag of tricks. New content is slowly but surely being added to modern SharePoint. Classic SharePoint isn’t going away quite yet, but it’s slowly becoming less compelling to use (much as it pains me to say that in some ways) as more and more modern features are added to the mix.

This post has barely scratched the surface of what there is to do with branding in modern sites but hopefully gives you just enough to play around with and think about until the next installment. We’ll continue this series with more ways to embrace modern branding, including setting up appealing pages, looking at view and column formatting in modern lists & libraries, and more. Part of the appeal of modern SharePoint for designers is that it opens a new world of opportunity. Instead of having to be stuck writing a ton of CSS, you can expand your skillset. What are your interests? Development? Maybe even business solution planning? How about architecture planning? Modern SharePoint introduces several new facets of considerations now and your organization might just need someone to fill that gap. It’s a whole new game now, so anything is possible.

In the meantime, should you still be looking for some additional help with moving to the cloud, planning your modern site architecture, or even if you have a classic SharePoint site that needs some help, give PAIT Group a call at (513) 719-9190 or visit www.paitgroup.com and we’ll put you in touch with our team of experts, not matter what your SharePoint or Microsoft 365 challenge is.