Forum Discussion

Copper Contributor

Feb 08, 2018

Yeoman Scaffolding and Node_Modules

Every time I create a new Web Part using Yeoman (yo @micrsosoft/sharepoint) in NPM, I get a huge project including tons of node_modules. The folder adds up to almost 300. I have tested adding web par...

Joel Rodrigues

MVP

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

Fredrick Lassiter

Copper Contributor

Mar 19, 2018

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!