Customising Communication Sites?

[Luca Pellegrino]

Hi all, hope everyone has been lucky enough to be playing with their new communication sites! They kick some serious a$$ :)

I have spent some time familiarising myself with these sites and wanted to ask the community if they've had any luck customising them in any way? I was able to change the default blue you see to another colour using the MSI palette tool but I haven't had any luck changing the default fonts. I created and stripped a new spfont file, uploaded it to the theme folder (15) and then applied it to the site. The new font scheme appeared and I was able to apply it but it seems it only took affect in certain areas (i.e. Site settings)

The fonts on the main page under the new web parts, i.e. Hero, news feed, events etc are still using the default font from the communication site and I know for a fact our Brand team will be asking me to change this :)

I'd love to find out some information on this so I'm putting it out there in our community. Is it possible? Has anyone done it? Can it be done? Could it be the new sites maybe use another fontslot that I need to add?

Here is just an example of the colour change applied to the site on a hero web part without an image. You can see the new colour but its using the default font from the communicate site template

Love to hear from you @Mark Kashman :)

Thanks!

[#2]

I don't believe that you can change the font used at this point. In the official documentation on customizing modern team sites (which basically goes to communication sites as well) their example of applying a custom theme (using PowerShell) uses a null-value for the font-scheme URL - so I suspect that it cannot be done (Applying custom theme to modern site).

Furthermore these modern sites uses a lot from Office UI Fabric (Typography @ Office UI Fabric) as it's the official Office Design Language. The default font is "Segoe UI", which also is used on modern sites. They also use the base classes for sizing (ms-font-m for example), which is a part of Office UI Fabric.

[#3]

Thanks for the response Jonas. I assumed as much but thought there possibly was a way around it. Do you know if this is something we will be able to possibly do in the future?

[#4]

Here's hoping the Alternate CSS property (or some similar mechanism) applies to Modern in the future so that I can override things on my own :)

[#5]

I cannot imagine, that Microsoft isn't aware of this requirements from customers. As Jim Duncan mentioned, the "Alternating CSS" property from classic SharePoint could be a great addition from a customization perspective.

Another option might be the new SPFx Extensions - especially ApplicationCustomizers - where we can register script in the scope of a site collection, like classic UserCustomActions. That might give us some supported tooling for making site collection wide changes using scripts (or css) that would solve the problem. But again, this is still dev preview and haven't yet seen examples that solve this particular scenario.

[#6]

I don't see communciation sites on my tenant. Is there any setting that needs to be enabled to get that option available. Even i tried it by creating a trial account as well but no luck on that as well.

Can you help me on how to get the communication sites available for my tenant?

[#7]

Off course. Go to your Office 365 admin center. Under "Settings", choose change release state to "First Release - Select users". Add yourself to the list and wait for approx. 30 minutes.

Go to SharePoint Home, click Create and boom - Communication sites will be available for your selected First Release users.

[#8]

I am liking the experience so far but after watching this video https://www.youtube.com/watch?v=WEnQKzzbvfo I saw that on the demo contoso site they have a custom site logo.  I couldn't see the standard site title and logo options under site settings but i used the url ;p from another site _layouts/15/prjsetng.aspx . The logo change appeared to have work but when i went to the home page the default logo was there. Any ideas? css or powershell needed?

[#9]

Thank you for your feedback. Adding @Sean Squires who may be able to provide more details on  custom theme/ branding options we are looking and and when these will be coming to SharePoint.  

[#10]

Thanks. This works for me :)

[#11]

Hi Luca

Can you please explain how you uploaded the colour file into the communication site?

Did you overwrite an existing file?

[#12]

I have been able too customize Communication site by creating Extensions. In the extensions I have used CSS, JS, and jQuery to override the styles and such. It has been a bit of a hack, however I have really changed the look of the site to be much more custom for our brand. For example, I did not like the square small size of the top logo....I was able to change that to a more rectangular size, like on the Classic pages. I also changed the background image of the site. 

[#13]

Do you have any samples posted to github or somewhere? Thank you.

[#14]

Just adding my two cents...

I would be very careful about using SPFx Application Customizers to add CSS into your environment to override out of the box styles in modern. Yes, it is possible but it's also not recommended. 

You do not own the HTML or CSS classes that modern SharePoint uses and they are subject to change (and they have changed many times already). If you do happen to create an extension that is overriding or changing the native content... please... please...please document what you do, so that the next person who may have to work through an issue, they know why and what was changed.