Microsoft 365 Community Community Demos, 14 Nov 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community demo - Transforming SharePoint classic themes to modern themes

Description

This PnP community demo is taken from the bi-weekly SharePoint Developer Community - General Development Special Interest Group (SIG) call recorded on November 14, 2019.

In this 13-minute video, Tracy Sterling, Sr. Consultant at Valore Partners demonstrates how to use Microsoft UI Fabric Theme Designer and her SharePoint Theme Version Converter to cleanly transition site theming from classic to modern or from modern to classic. A good practice is to apply themes at the root site. This is a clean solution for preserving UI consistency that helps drive user adoption by inferred reliability and stability.

Presenter: Tracy Sterling (Valore Partners)

SharePoint theme transformation resources
• Microsoft UI Fabric Theme Designer: https://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/master/theming-designer/index.html
• SharePoint Theme Version Converter: https://github.com/TracyGH/SPTheme-Converter
• Theming guidance in Office UI Fabric React Wiki: https://github.com/OfficeDev/office-ui-fabric-react/wiki/Theming

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

A

My name is Tracy: I am a senior consultant at valori Partners we're a Microsoft shop. Consulting company corporate offices in Phoenix, Arizona I have been been working with John on development since about 2005 2006 as a developer started messing with SharePoint in around 2008.

A

So it's been a while various ways to contact me if you need to github sharepoint exchange, linkedin email, all that good stuff. Today, I wanted to talk to you a little bit about themes and I'll. Try to keep it short, because I know we have another percenter coming too.

A

First of all, what is a theme, hmm if you don't know, essentially it's the color scheme and SharePoint and there's sort of two renditions of that right now, there's theme in the modern UI and then there's theme in the classic, UI and I can just give you a quick example of vasive. Did this too in his demo, but just to give you a visual of what that theme change looks like it can be, it can be pretty dramatic, as you can see so I think to some of us developers.

A

It feels like fluff, but the reality of an as an end user. Is that it's it's a very impactful it perhaps one of the most aesthetically impactful parts of sharepoint and.

A

So in the modern UI, a theme has become essentially a JSON file or you're, defining color buckets and what those color values will be in the classic UI a theme. What we're calling a theme was referred to as a composed look, which included what's synonymous with the modern UI theme. As an SP color file, were you defining all those colors, it also included, could include fonts and master page as well. Just FYI and we've got Microsoft has provided a few different tools for creating themes depending on whether you're doing a classic theme.

A

Are you doing a modern theme? If you haven't looked at those at all for the classic themes? It's just a pretty small footprint, client install and you get kind of a default settings. When you, when you first open it, you can look at the difference. You can sort them by basically color buckets, which is sort of synonymous with fabric palette slots now loosely translates to that or you can look at them in a more semantic sense, which is going to be by UI groups.

A

But the more exciting theme tool that we have is the UI fabric theme designer for those of you that haven't seen this. Yet it's it's super cool. It's a lot of fun when you first open it you're just gonna get these default color settings here, and you pick these three and then it essentially interprets the different shades of those and you've got to view slot options here one. So this is what I was talking about. It's kind of synonymous with the buckets that you'd see over here, so not as semantic just kind of straight colors.

A

But if you want to understand what that translates to, you can look at the more semantic slots which is going to start to describe the different UI objects and what colors those would be and then there's an accessibility piece here, which is really nice and accessibility validation. So if I, if I start to get my contrast, is not sharp enough and I can't read the text on top of the background, it will warn you, so you get a little little error here, which is that's handy and that existed in the other one.

A

It just wasn't this manual contrast test here is synonymous with that, but this one's a little more. You know in-your-face, if you're, if it's it's not gonna work, that is.

A

Just to give you guys for those I haven't seen it I think those are kind of cool tools. I thought I would bring that up.

A

Okay, so why do we discuss classic versus modern themes? I've been involved in a couple projects where, unfortunately, we weren't able to make a really clean break to modern, so that everything was starting modern and you may find yourself in that situation as well. There can be a number of reasons for that.

A

Some of that might include some of those might include the need to leverage analysis tools that you can only that are only available in the cloud like the page Diagnostics tool, the modernization scanner in, in one case, we just had a very high-risk, on-premise environment, the infrastructure itself was unstable, and so the client just wanted to get everything off and into the cloud as quickly as we could and then from there once we were in the cloud do more of our modernization as it were.

A

In other cases, you might just encounter some user resistance, specifically eliminating sub sites and just going with the hub. You know we always try to sell them on that as much as we can, but at the end of the day, we're in a service industry and if the users just aren't having it, then we have to adapt.

A

So what can happen if you've got some kind of classic theme mixed with some modern theme in office 365? One of the things that can happen is that you get. The user can have a inconsistent, UI experience, which is not ideal because we want them to be on board. We want it to be kind of an intuitive experience for them.

A

So I've encountered this challenge a couple times and I found a few things to be useful.

A

One thing that I built myself because I just had a need for it was a tool. It's just a simple c-sharp console app that converts either a modern JSON theme to classic or a classic SP color theme to JSON.

A

So we can take a look at that real, quick I. Have it up on my github site and the links to everything are in this. Our point I'll give this to basa to provide, so you guys have had that for reference.

A

But I have it's a really quick little readme it'll walk you through exactly how it works, how it does what it does if you're curious, so I did define here exactly the conversion that I'm doing as far as like the translation between the classic palak slots and then the modern pallet slots, and if you're curious how I figured that out. I there's a really cool I stumbled onto this. So this is the office. Ui fabric react wiki and it referenced.

A

It kind of walked me through how it was doing what it was doing and it referenced a typescript file where it was defining the different semantic slots and those translated really closely to these are actually to the UI groups. So that is essentially how I did if you're curious. That's how I created the translation essentially and it seems pretty accurate for the most part it you'll see when I go through the demo. I do still recommend opening it at moderate, whatever, whichever conversion you're doing one way or the other open it up.

A

Look at it look at the settings pages and things like that, because there are some quirky, you might see some unusual quirky things or suddenly there's a line in the header that you can't read the you can't read the text on top of the background, so it is important to kind of test it out and vet it out just to make sure that that's working okay enough talking, let's do the demo. So this is this- is my tool. Basically super simple you're welcome to download it make any changes.

A

You want make any suggestions you want by all means, but it's literally just two functions: one is converting about in a classic. One is converting classic to modern, in the case of modern, a classic you're going to need to provide that JSON file, basically a valid modern theme, JSON file and then in the classic to modern you're going to need to provide a valid espy color file, mm-hmm just uncomment, whichever one you want to run, make sure you're filling in the paths for your respective file, which I have done here.

A

For the sake of time, I kind of it's ahead of time, so I went ahead and created my own custom theme here with lots of pink pinks and purples, which my daughter would love, because she's all about the pink and purple and I I saved this already. So it's downloaded here and we're just gonna run this and convert it super quick and easy done. Your conversion is complete yay and now I have pink modern theme. I had to prove I also provide the name of the output.

A

I did that earlier, as well, so pink minor theme JSON. This is our new theme and I went ahead and put that in a modern I've, actually already put it in my e5 dev subscription, which basa loving, loving the e5 dubstep subscripts in so much by the way.

A

So we can select the new theme that I just converted from classic to modern and there it is it's. Not it's, not crazy. I didn't get nuts with the customizations I. Basically just changed these top colors here to pink and purple shades, but you can see that it did. You know did apply that, but I would imagine. What's the orange there that's interesting, it takes a few refreshes. There we go yeah there we go. No, it's all pink.

A

You would you would probably have the the scenario that I've encountered is. We have a classic theme. We want to get essentially a modern version of it. So that's the typical conversion that I've done so this kind of mentioned before anytime. You can start with a modern site collection. It's gonna make it like the route. It's gonna make your life a lot easier as far as theming, that's just a tip and trick from my own experiences migrating a helpful.

A

The different projects into the cloud like I said: that's not always possible, because sometimes you've got these scenarios up here. But if you can, this is going to remove a lot of headaches, even if you're doing, because even if the user is switching context from like modern that you know they're doing that return to classic view. It does a really good job of converting the modern into classic itself in the cloud when you're using that route, modern site collection, so a communication, our team's template that would move my recommendation.

A

I've also had a couple of projects where we had to do customization master, page customization, so headers and footers essentially, and we had to do that in a hybrid environment where the user was Seek, gonna, see classic and gonna see modern, there's a really great article by Bob German, and he took a project that Julie Turner originally created, and if you're in that situation, I would highly recommend looking into into that.

A

It's essentially what she did was it's all the same pool of assets so like the HTML and the CSS files, it's all the same stuff and they just forked the tool sets so that it's applying those assets using the appropriate tool sets on the classic page and those same assets using the for virtual sets on a modern page, so I, full disclosure, I, haven't actually used that solution, because the project that I worked on, we wound up just creating two side-by-side standalone solutions, but I discovered this afterwards. I thought it was really cool. I thought.

A

If I was ever in that situation again, I would use that technique. So and just this is a link to some really useful resources to help me out some blogs. The everything we've looked at is here: the wiki theming, the theme generator, and even some some other stuff, I didn't mention so just good point of reference and that's all I have excellent excellent thanks. Tracy.