Home

Sharepoint customizing themes with css and fonts

%3CLINGO-SUB%20id%3D%22lingo-sub-220073%22%20slang%3D%22en-US%22%3ESharepoint%20customizing%20themes%20with%20css%20and%20fonts%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-220073%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20there%2C%E2%80%A8%3CBR%20%2F%3EJust%20after%20some%20advise%20please.%3C%2FP%3E%3CP%3EWe%20are%20currently%20creating%20a%20Team%20communication%20website%20for%20an%20internal%20intranet%20(news%20post%20etc)%20but%20would%20like%20to%20stylise%20the%20theme%20a%20little%20with%20custom%20fonts%20and%20maybe%20a%20small%20amount%20of%20additional%20css.%20%E2%80%A8%3CBR%20%2F%3E%E2%80%A8%3CBR%20%2F%3EI%20found%20and%20have%20completed%20the%20online%20course%20(link%20below)%20but%20wasn't%20sure%20if%20this%20was%20best%20practise%20as%20i%20can't%20seem%20to%20view%20the%20'Composed%20looks%20library'%20under%20the%20Web%20Designer%20Galleries%20in%20settings%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHas%20anybody%20else%20created%20a%20custom%20theme%20and%20then%20added%20to%20this%20theme%20by%20changing%20fonts%20etc%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fwww.lynda.com%2FSharePoint-Online-tutorials%2FSharePoint-Customizing-Themes-CSS%2F647650-2.html%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fwww.lynda.com%2FSharePoint-Online-tutorials%2FSharePoint-Customizing-Themes-CSS%2F647650-2.html%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAny%20advise%20would%20be%20appreciated.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-220073%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EPermissions%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-234142%22%20slang%3D%22en-US%22%3ERe%3A%20Sharepoint%20customizing%20themes%20with%20css%20and%20fonts%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-234142%22%20slang%3D%22en-US%22%3E%3CP%3EIf%20you%20are%20using%20SharePoint%20Online%20Modern%20Experience%2C%20the%20options%20available%20to%20you%20are%20limited%20at%20this%20time.%20Font%20changes%20are%20not%20possible%20for%20out%20of%20the%20box%20components.%20Branding%20changes%20are%20(mostly)%20limited%20to%20what%20you%20can%20do%20under%20%22Change%20the%20look%22%20(Rich%20header%20colours%20are%20rolling%20out).%20CSS%20changes%20are%20done%20at%20your%20own%20risk%20and%26nbsp%3Bin%20many%20cases%26nbsp%3Byou%20run%20the%20risk%20of%20them%20breaking%20as%20changes%20are%20implemented%20by%20Microsoft.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-234130%22%20slang%3D%22en-US%22%3ERe%3A%20Sharepoint%20customizing%20themes%20with%20css%20and%20fonts%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-234130%22%20slang%3D%22en-US%22%3E%3CP%3EFull%20disclosure%2C%20we%20have%20a%20FREE%20app%20in%20AppSource%20that%20might%20help.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fappsource.microsoft.com%2Fen-au%2Fproduct%2Foffice%2FWA104380485%3Ftab%3DOverview%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fappsource.microsoft.com%2Fen-au%2Fproduct%2Foffice%2FWA104380485%3Ftab%3DOverview%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-220415%22%20slang%3D%22en-US%22%3ERe%3A%20Sharepoint%20customizing%20themes%20with%20css%20and%20fonts%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-220415%22%20slang%3D%22en-US%22%3E%3CP%3EDear%20Neil%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EYou%20can%20find%20some%20details%20also%20for%20the%20modern%20look%20theme%20into%20that%20message%3A%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2FSharePoint%2FSharePoint-Online-Configure-the-Theme-for-the-modern-look-pages%2Fm-p%2F212096%23M19391%22%20target%3D%22_blank%22%3Ehttps%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2FSharePoint%2FSharePoint-Online-Configure-the-Theme-for-the-modern-look-pages%2Fm-p%2F212096%23M19391%3C%2FA%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3EBe%20careful%2C%20the%20modern%20theme%20is%20only%20associated%20with%20the%20color%20set%2C%20nothing%20is%20possible%20for%20the%20CSS%20change%20as%20I%20understood.%3C%2FP%3E%0A%3CP%3EThe%20solution%20you%20talked%20is%20related%20to%20the%20old%20style%20(classic)%20pages%20necessary%20for%20some%20technical%20pages%20or%20some%20lists%20which%20are%20not%20yet%20modernized.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIf%20you%20really%20need%20to%20customize%20more%20than%20the%20simple%20colorset%2C%20you%20need%20to%20look%20the%20Dev%20options%20inserting%20boxes%20(like%20Webpart)%20calling%20the%20CSS%2FJS...%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EFab%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-220085%22%20slang%3D%22en-US%22%3ERe%3A%20Sharepoint%20customizing%20themes%20with%20css%20and%20fonts%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-220085%22%20slang%3D%22en-US%22%3E%3CP%3EI%20recommend%20following%20the%20guidance%20at%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fdeclarative-customization%2Fsite-theming%2Fsharepoint-site-theming-overview%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fdeclarative-customization%2Fsite-theming%2Fsharepoint-site-theming-overview%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Neil Kendrick
Occasional Visitor

Hi there,

Just after some advise please.

We are currently creating a Team communication website for an internal intranet (news post etc) but would like to stylise the theme a little with custom fonts and maybe a small amount of additional css. 


I found and have completed the online course (link below) but wasn't sure if this was best practise as i can't seem to view the 'Composed looks library' under the Web Designer Galleries in settings?

 

Has anybody else created a custom theme and then added to this theme by changing fonts etc

https://www.lynda.com/SharePoint-Online-tutorials/SharePoint-Customizing-Themes-CSS/647650-2.html

 

Any advise would be appreciated.

 

4 Replies
Highlighted

Dear Neil,

 

You can find some details also for the modern look theme into that message:

Be careful, the modern theme is only associated with the color set, nothing is possible for the CSS change as I understood.

The solution you talked is related to the old style (classic) pages necessary for some technical pages or some lists which are not yet modernized.

 

If you really need to customize more than the simple colorset, you need to look the Dev options inserting boxes (like Webpart) calling the CSS/JS...

 

Fab

 

Full disclosure, we have a FREE app in AppSource that might help.

 

https://appsource.microsoft.com/en-au/product/office/WA104380485?tab=Overview

 

Highlighted

If you are using SharePoint Online Modern Experience, the options available to you are limited at this time. Font changes are not possible for out of the box components. Branding changes are (mostly) limited to what you can do under "Change the look" (Rich header colours are rolling out). CSS changes are done at your own risk and in many cases you run the risk of them breaking as changes are implemented by Microsoft. 

Related Conversations
IOWSPostData Failed
MMMZ14 in SharePoint on
0 Replies
Sharepoint and Onedrive Access
DavidYorkshire in Office 365 on
4 Replies
outlook 365 endless synchronizing
James_22 in Office 365 on
0 Replies