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
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

@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
Scrollbar appearance
royamicus185 in Discussions on
3 Replies
UI issue with lockdown policies
Tom_Fox in Enterprise on
0 Replies
Using comments in office documents in teams
eddyyeah in Microsoft Teams on
2 Replies
Understanding Wiki
Shannon1635 in Microsoft Teams on
2 Replies
WVD On/Off based on activity
Adam Black in Windows Virtual Desktop on
2 Replies