Communications Sites Custom Branding (CSS/JS)

%3CLINGO-SUB%20id%3D%22lingo-sub-94934%22%20slang%3D%22en-US%22%3ECommunications%20Sites%20Custom%20Branding%20(CSS%2FJS)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-94934%22%20slang%3D%22en-US%22%3E%3CP%3EHello%2C%20I%20have%20some%20custimizations%20I%20have%20made%20to%20a%26nbsp%3Bsharepoint%20site%20using%20a%20master%20page%20with%20custom%20CSS%20%26amp%3B%20files.%20However%2C%20these%20changes%20dont%20appear%20to%20affect%20communication%20sites%20(see%20attached%20screenshots%20below).%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20been%20reading%20about%20the%20Sharepoint%20PnP%20and%20am%20having%20trouble%20running%20the%20samples%20in%20the%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2FPnP%2Ftree%2Fmaster%2FSamples%2FBranding.AlternateCSSAndSiteLogo%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3ESharepoint%20PnP%20Github%20repo%3C%2FA%3E.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20wondering%20though%20if%20the%20CSOM%20customization%20methods%20(Described%20in%20the%20Sharepoint%20PnP)%20would%20allow%20me%20to%20make%20the%20customizations%20carry%20over%20to%20the%20new%20Communications%20Sites%20or%20if%20that%20is%20not%20even%20possible%3F%20Specifically%20I%20am%20trying%20to%20add%20in%20my%20own%20stylesheet%20and%20JS%20like%20I%20have%20done%20successfully.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F18457iCA21E8231DF94A61%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Untitled-1.jpg%22%20title%3D%22Untitled-1.jpg%22%20%2F%3E%3C%2FSPAN%3Ewith%20the%20master%20page.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-94934%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESites%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-95084%22%20slang%3D%22en-US%22%3ERe%3A%20Communications%20Sites%20Custom%20Branding%20(CSS%2FJS)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-95084%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F60%22%20target%3D%22_blank%22%3E%40Juan%20Carlos%20Gonz%C3%A1lez%20Mart%C3%ADn%3C%2FA%3E%2C%20I%20guess%20I%20agree%20with%20that%20-%26nbsp%3B%3C%2FP%3E%3CP%3EModifications%20to%20the%20master%20page%20dont%20have%20any%20effect%20on%20the%20modern%20pages%2C%20so%20yea%2C%20making%20modifications%20to%20the%26nbsp%3Bmaster%20page%20will%20make%20for%20a%20sloppy%20UX.%20I%20just%20wish%20I%20had%20known%20that%20when%20I%20started%20my%20effort%20to%20customize%20our%20site.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'm%20glad%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F2387%22%20target%3D%22_blank%22%3E%40Pieter%20Veenstra%3C%2FA%3E%26nbsp%3Bhelped%20point%20me%20in%20the%20right%20direction.%20It%20sounds%20like%20SP%20Extensions%20is%20the%20right%20path%20forward%20for%20future%20customizations%2C%20once%20that%20feature%20is%20available%20to%20the%20general%20public.%26nbsp%3BI%20found%20%3CA%20href%3D%22http%3A%2F%2Fwww.tonyishere.co.uk%2Fnews%2Fbranding-sharepoint-using-application-customizers%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ea%20decent%20video%20demoing%20an%20introduction%20to%20this%20process%20(Application%20Customizers)%20by%20Tony%20Philips%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFor%20now%20I%20will%20familiarize%20myself%20with%20the%20SPFx%20framework%20and%20hopefully%20accomplish%20some%20of%20what%20I%20need%20via%20a%20custom%20Webpart.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-95074%22%20slang%3D%22en-US%22%3ERe%3A%20Communications%20Sites%20Custom%20Branding%20(CSS%2FJS)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-95074%22%20slang%3D%22en-US%22%3EAnd%20by%20the%20way%2C%20avoid%20to%20touch%20%2F%20modify%20directly%20SPO%20master%20pages%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-94964%22%20slang%3D%22en-US%22%3ERe%3A%20Communications%20Sites%20Custom%20Branding%20(CSS%2FJS)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-94964%22%20slang%3D%22en-US%22%3E%3CP%3EIndeed!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESee%20also%20here%3A%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2FSharePoint-Developer%2FAnnouncing-Availability-of-SharePoint-Framework-Extensions%2Fm-p%2F75542%23M2571%22%20target%3D%22_blank%22%3Ehttps%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2FSharePoint-Developer%2FAnnouncing-Availability-of-SharePoint-Framework-Extensions%2Fm-p%2F75542%23M2571%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-94962%22%20slang%3D%22en-US%22%3ERe%3A%20Communications%20Sites%20Custom%20Branding%20(CSS%2FJS)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-94962%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F2387%22%20target%3D%22_blank%22%3E%40Pieter%20Veenstra%3C%2FA%3E%26nbsp%3Bfor%20the%20speedy%20reply.%20I%20will%20give%20this%20a%20shot.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%26nbsp%3Bguess%20that%20means%20I%20wont%20be%20able%20to%20deploy%20to%20our%20company's%20new%20communication%20site%20yet%20until%20it%20is%20made%20GA%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-94938%22%20slang%3D%22en-US%22%3ERe%3A%20Communications%20Sites%20Custom%20Branding%20(CSS%2FJS)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-94938%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F71472%22%20target%3D%22_blank%22%3E%40adam%3C%2FA%3E%2C%3C%2FP%3E%3CP%3ECommunicatiuon%20sites%20don't%20support%20branding%20yet.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eyou%20will%20want%20to%20use%20SPFx%20Extensions%20to%20sort%20out%20branding%2C%20however%20this%20hasn't%20gone%20GA%20yet.%20You%20can%20try%20this%20out%20in%20developer%20tenants.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdev.office.com%2Fsharepoint%2Fdocs%2Fspfx%2Fextensions%2Fget-started%2Fusing-page-placeholder-with-extensions%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdev.office.com%2Fsharepoint%2Fdocs%2Fspfx%2Fextensions%2Fget-started%2Fusing-page-placeholder-with-extensions%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESee%20the%20screenshot%20near%20the%20end%20of%20the%20article.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2407829%22%20slang%3D%22en-US%22%3ERe%3A%20Communications%20Sites%20Custom%20Branding%20(CSS%2FJS)%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2407829%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F71472%22%20target%3D%22_blank%22%3E%40adam%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ehi%26nbsp%3B%3C%2FP%3E%3CP%3EDo%20you%20find%20a%20solution%20to%20custumize%20a%20communication%20site%20with%20css%20%3F%3C%2FP%3E%3CP%3EI%20want%20to%20inject%20some%20css%20to%20change%20h1%20and%20h2%20tags%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20for%20your%20help%3C%2FP%3E%3C%2FLINGO-BODY%3E
New Contributor

Hello, I have some custimizations I have made to a sharepoint site using a master page with custom CSS & files. However, these changes dont appear to affect communication sites (see attached screenshots below).

 

I have been reading about the Sharepoint PnP and am having trouble running the samples in the Sharepoint PnP Github repo.

 

I am wondering though if the CSOM customization methods (Described in the Sharepoint PnP) would allow me to make the customizations carry over to the new Communications Sites or if that is not even possible? Specifically I am trying to add in my own stylesheet and JS like I have done successfully.

 

 

 

Untitled-1.jpgwith the master page.

6 Replies

Hi @adam,

Communicatiuon sites don't support branding yet. 

 

you will want to use SPFx Extensions to sort out branding, however this hasn't gone GA yet. You can try this out in developer tenants.

 

https://dev.office.com/sharepoint/docs/spfx/extensions/get-started/using-page-placeholder-with-exten...

 

See the screenshot near the end of the article.

Thanks @Pieter Veenstra for the speedy reply. I will give this a shot.

 

I guess that means I wont be able to deploy to our company's new communication site yet until it is made GA?

And by the way, avoid to touch / modify directly SPO master pages

Thanks @Juan Carlos González Martín, I guess I agree with that - 

Modifications to the master page dont have any effect on the modern pages, so yea, making modifications to the master page will make for a sloppy UX. I just wish I had known that when I started my effort to customize our site. 

 

I'm glad @Pieter Veenstra helped point me in the right direction. It sounds like SP Extensions is the right path forward for future customizations, once that feature is available to the general public. I found a decent video demoing an introduction to this process (Application Customizers) by Tony Philips

 

For now I will familiarize myself with the SPFx framework and hopefully accomplish some of what I need via a custom Webpart.

 

 

@adam 

hi 

Do you find a solution to custumize a communication site with css ?

I want to inject some css to change h1 and h2 tags

 

Thanks for your help