Add custom css to sharepoint online

Question

I have created Custom.master page from the SharePoint Designer 2013, which is a copy of the Seattle.master page. then I attached customcss.css file from the Site Library Folder. I saved the master page file and set as default master page in SP Designer. Also in Sharepoint online I have selected my custom.master page in Site Manger Page Setting. However the custom master page updates does not reflect to sharepoint site. In the viewsource of the page customcss.css link is not found. my aim is the add the customcss.css file to the sharepoint site so I can customize the fonts and the page look and feel. I tried with Alternate CSS Url to apply my customcss.css file however it reflects to Sharepoint Setting text not on the actual site home page.

Can any one please help. really appreciated.

here is the customcss.css file code

@import url("https://fonts.googleapis.com/css?family=Oswald");

.ms-rteFontFace-16

{

font-family: 'Oswald';

 font-style: normal;

  font-weight: 400;

}

.fontColorThemeDark , .fontColorThemeDarkAlt , h3, h4,

h4 span, h3 span

{

  font-family: 'Oswald' !important;

  font-style: normal !important;

  font-weight: 400 !important;

}

Answer 1

We would love to help you with your query, however, your query is related to SharePoint development,

It's not really a development question, it's a question about why out of the box functionality is not working. In classic sites you could always apply a custom stylesheet using this method with no development effort. Msft should either follow best practices and upgrade the classic features for real or remove them completely. A competent company would never do an "upgrade", but leave traces of non-working components in place.

Kem104-not sure if you're only working with classic sites but if you switch to modern you can add your own stylesheet with this script injection SPFx app: https://github.com/pnp/sp-dev-fx-extensions/blob/main/samples/react-application-injectcss/README.md

Answer 2

My suggestion would be to open the css file in SP Designer and make edits there. This way once you have a file injected, you can easily make updates there. You can also create another solution and reference a different file if needed-like we have one we only apply to specific sites, and also some other files like javascript.

.

Answer 3

HI @webbrewers,

Thank you for your response, really appreciated.

I have updated CSS file in Sharepoint Designer and check in the file as well but still the sharepoint page is not updated with the latest style.

There is another problem, may be it is related to above issue. Usually when the site is open in sharepoint Designer , need to enable the SP Designer setting from the Site Collection Administration setting. Which I can not see the SP Designer Setting link as shown below. and I can not activate the "SharePoint Server Publishing Infrastructure" feature. its gives error "Something went Wrong". well my site is a Communication site , its not Teamsite.

however I can open the CSS file in Sharepoint Designer and can update. May be it is not connected to SharePoint Online site?

Any help will be appreciated!

Answer 4

If you can open a site in SPD, I assume it's enabled but you can check by appending this url to a site like:

xxx.sharepoint.com/sites/sitename**/_layouts/15/SharePointDesignerSettings.aspx**

Likewise, if you can edit a file in SPD "custom scripting" is probably enabled, but follow this article if you want to check that: https://www.sharepointdiary.com/2018/09/sharepoint-online-enable-sharepoint-designer-using-powershell.html

Keep in mind, SP caching is very aggressive, so you may have to clear your browser cache or try an incognito window to see your changes. You can also try reindexing the site from search and offline availability in site settings.

You can verify the css file is getting called and check if changes are applied in the sources tab of a browser inspector:

Answer 5

Hi

You are correct! It was caching issue in sharepoint which was not rendering CSS.

Also my site was connected with SharePoint Designer that I checked with the provided URL.

Thank you so much for your help. Really Appreciated.