SOLVED
Home

Can I use Office UI Fabric on classic wiki pages?

%3CLINGO-SUB%20id%3D%22lingo-sub-523689%22%20slang%3D%22en-US%22%3ECan%20I%20use%20Office%20UI%20Fabric%20on%20classic%20wiki%20pages%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-523689%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3CBR%20%2F%3Eour%20intranet%20is%20still%20based%20on%20classic%20not%20modern%20but%20I%20was%20wondering%20how%20much%20of%20the%20modern%20design%20elements%2C%20such%20as%20Office%20UI%20Fabric%20or%20Bootstrap%2C%20HTML5%20etc.%20I%20can%20use%20to%20create%20a%20nice%20looking%20classic%20wiki%20page.%20Basically%2C%20I%20would%20like%20it%20to%20resemble%20a%20modern%20communication%20site%20to%20an%20extend.%20Can%20this%20all%20be%20done%20with%20the%20HTML%20editor%20that%20is%20part%20of%20a%20classic%20wiki%20site%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20for%20your%20reply.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-523689%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EBootstrap%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EClassic%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ECommuncation%20Sites%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Emodern%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Eoffice%20ui%20fabric%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-524401%22%20slang%3D%22en-US%22%3ERe%3A%20Can%20I%20use%20Office%20UI%20Fabric%20on%20classic%20wiki%20pages%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-524401%22%20slang%3D%22en-US%22%3EHi%20Florian%2C%3CBR%20%2F%3EYep%2C%20you%20should%20be%20able%20to%20use%20also%20Office%20UI%20Fabric%20and%2For%20bootstrap%20in%20classic%20sites%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-525012%22%20slang%3D%22en-US%22%3ERe%3A%20Can%20I%20use%20Office%20UI%20Fabric%20on%20classic%20wiki%20pages%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-525012%22%20slang%3D%22en-US%22%3E%3CP%3E%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%26nbsp%3BThanks%20for%20confirming.%20I%20will%20now%20dive%20more%20into%20it.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1097341%22%20slang%3D%22en-US%22%3ERe%3A%20Can%20I%20use%20Office%20UI%20Fabric%20on%20classic%20wiki%20pages%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1097341%22%20slang%3D%22en-US%22%3E%3CP%3E%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%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F249006%22%20target%3D%22_blank%22%3E%40gflory%3C%2FA%3E...%20We%20use%20Fabric%20UI%20on%20some%20of%20our%20Classic%20pages%2C%20but%20there's%20a%20trick%20to%20be%20aware%20of%3A%20Microsoft%20has%20some%20JS%20which%20runs%20on%20classic%20pages%20which%20hunts%20down%20and%20removes%20link%20elements%20in%20the%20document%20with%20an%20href%20containing%20%22fabric.min.css%22.%20This%20code%20is%20presently%20found%20in%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fspoprod-a.akamaihd.net%2Ffiles%2Fsp-client%2Fsp-classic-page-assembly_en-us_8b406f9bcb2f34f60515e941d0bdcfb3.js%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fspoprod-a.akamaihd.net%2Ffiles%2Fsp-client%2Fsp-classic-page-assembly_en-us_8b406f9bcb2f34f60515e941d0bdcfb3.js%3C%2FA%3E.%20It's%20in%20a%20function%20called%20%22removeFabricLinks%22.%20Thus%2C%20to%20load%20the%20Fabric%20UI%20CSS%2C%20you%20must%20not%20call%20it%20%22fabric.min.css%22%20in%20your%20link%20tag.%20We%20simply%20renamed%20the%20CSS%20file%20and%20load%20it%20from%20our%20own%20source.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Florian Hein
Regular Contributor

Hi,
our intranet is still based on classic not modern but I was wondering how much of the modern design elements, such as Office UI Fabric or Bootstrap, HTML5 etc. I can use to create a nice looking classic wiki page. Basically, I would like it to resemble a modern communication site to an extend. Can this all be done with the HTML editor that is part of a classic wiki site?

 

Thanks for your reply.

3 Replies
Highlighted
Solution
Hi Florian,
Yep, you should be able to use also Office UI Fabric and/or bootstrap in classic sites
Highlighted

@Juan Carlos González Martín Thanks for confirming. I will now dive more into it.

Highlighted

@Juan Carlos González Martín@gflory... We use Fabric UI on some of our Classic pages, but there's a trick to be aware of: Microsoft has some JS which runs on classic pages which hunts down and removes link elements in the document with an href containing "fabric.min.css". This code is presently found in https://spoprod-a.akamaihd.net/files/sp-client/sp-classic-page-assembly_en-us_8b406f9bcb2f34f60515e9.... It's in a function called "removeFabricLinks". Thus, to load the Fabric UI CSS, you must not call it "fabric.min.css" in your link tag. We simply renamed the CSS file and load it from our own source.

Related Conversations
Copying images to Wiki from Files.
beclub in Microsoft Teams on
0 Replies
Drag and drop modern pages feature removed
David Bishop in SharePoint on
2 Replies
Office Deployment: Pin to START Menu
Brian LeFlem in Microsoft Intune on
1 Replies
I can't open a Macro enable excel and word file
Roxanne26 in Office 365 on
2 Replies