Forum Discussion
Yeoman Scaffolding and Node_Modules
Thanks Joel!
Switching gears here a little bit, have you or any of your colleagues ever tried to add "Custom CSS" to a modern site by using a new SPFx Extension? From what I understand, creating and adding Extensions in your APP catalog creates global "customization" to your site, vs having to add a custom web part to every page.
I have some custom branding I want to add to my site that would affect the overall look and feel, and I know that while Microsoft does not recommend much, if ANY custom branding to modern pages (which is a bit ridiculous in my opinion). I was thinking of using an Extension to add a custom CSS file, which could be easily updated on the fly. Also I would love to add some custom JavaScript to the site, vs having to add to each page in a Custom Web part. I am sure Microsoft, would not recommend this, however if they are unwilling to provide a solid branding capability, then people will figure out a way around it.
Hi Fredrick,
The application customizer extension will allow you to add custom code to every page.
You can see a tutorial here, hope it helps
Regarding custom CSS to change the default SharePoint styles, I would also advise to be careful about that as it can easily break by MS changing the HTML or CSS behind it. Remember that SharePoint online changes really fast, and the "safety" of controlled updates for on-prem environments is not an option here. You can wake up in the morning and your styles could be completely broken depending on what you do.
There is a way to override global CSS classes by prefixing them with ":global", but again, do it on your own risk if you feel brave :)
For example, if there was an existing CSS class on the site named ms-styles that you wanted to override, you would need a CSS entry like this:
:global .ms-styles {
...css properties here...
}
Hope it helps :)
Joel,
I have actually begun developing an extension on a dev Communication template site to change some CSS properties. I have been using jQuery in my extension.. Not sure if this is the best way, however I could not figure out a way to reference a separate CSS files of sorts and make it work.
For example, here are a couple of lines that have worked for me:
$('.ms-siteHeader-siteName').css('font-size', '24px'); $('head').append("<style>.ms-siteLogo-defaultLogo {width: 150px !important;}")Note that I have had to inject in-lines styles to get them to work. I am not a fan of doing this inline "hackery" of sorts, however it seems the only way I can get the look to change, even if it is ugly. I am hoping that Micrsofot will introduce an Alternate CSS method for the Communication sites soon enough!