Themeable CSS for SharePoint Site

Question

Themeable CSS for SharePoint Site

Mohammed Abed 155

I am working on a SharePoint 2019 Publishing Site with custom CSS and Master Page.

I imported the CSS files regularly as any HTML page in the head:

    <link rel="stylesheet" href="assets/styles/all.min.css" />
    <link rel="stylesheet" href="assets/styles/style.css" />
    <link rel="stylesheet" href="assets/styles/bootstrap.min.css" />
    <script
      src="assets/scripts/bootstrap.bundle.min.js"
      type="text/javascript"
    ></script>

However, not all CSS rules are applied especially with the custom font I am using. I imported the font using font-face

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/SLXVc1nY6HkvangtZmpQdkhzfH5lkSscSCyS4J0.woff2')
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Cairo', sans-serif;
}

The site is still reading the core.css file as it appears in the browser source tab. Adding !important also screw things up.

I have read in some articles that I need to make my CSS themeable and upload to the specific location the import it in the Master Page.

Are there any alternatives, and what is the best way for that ?

Anonymous

2023-06-01T02:33:22.0833333+00:00

Hi, we are currently doing some research on this issue, will let you know as soon as possible.

Accepted answer

0 additional answers

Your answer

Anonymous

2023-06-01T02:33:22.0833333+00:00

Hi, we are currently doing some research on this issue, will let you know as soon as possible.

Answer 1

Anonymous

Hi @Mohammed Abed ,

In SharePoint 2019, the recommended way to apply custom CSS to a Publishing Site and ensure it overrides the default styles is by creating a custom theme. Here's the approach you can follow:

Create a custom theme:

Go to the root site of your SharePoint Publishing Site.

Open Site Settings.

Under the "Look and Feel" section, click on "Change the look."

Customize the theme using the provided options or upload a custom theme file ( and ) that includes your custom CSS and font definitions..spcolor.spfont

Upload the custom CSS file:

In the same "Change the look" settings page, click on "Theme" from the left navigation pane.

Upload your custom CSS file (e.g., ) that includes the CSS rules and font-face declarations.custom.css

Apply the custom theme to the Master Page:

Open the Master Page in SharePoint Designer or any preferred text editor.

Locate the section of the Master Page.<head>

Add the reference to the custom CSS file within the section, like this:Make sure to adjust the URL path based on the location where you uploaded the custom CSS file.

Save and publish the Master Page.

By following this approach, SharePoint will apply the custom theme, which includes your custom CSS file, to the entire site and override the default styles. The custom font-face declarations should also be recognized and applied correctly.

Remember to clear the browser cache to ensure the latest CSS changes are loaded when testing.

Note: It's always recommended to make a backup of the original Master Page before making any modifications.

I hope this helps you achieve the desired customization in SharePoint 2019!

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards

Cheng Feng

Mohammed Abed 155 Reputation points

2023-06-04T06:38:14.8766667+00:00
In "Change the look" page, I am seeing a few themes that comes built-in with SP. Once I select one there are no options at all, just "Try it Out".

One thing, that I thought of is since I am having a custom Master Page, how about I override CSS rules that I want (specifically fonts):

* { margin: 0; padding: 0; /* [ReplaceFont(themeFont:"body")] */ font-family: 'Cairo', sans-serif; } body, .ms-core-defaultFont, #pageStatusBar, #hybridTooltipStatusBar, .ms-status-msg, .js-callout-body { /* [ReplaceFont(themeFont:"body")] */ font-family: 'Cairo', sans-serif; } h2, .ms-h2 { /* [ReplaceFont(themeFont:"large-heading")] */ font-family: 'Cairo', sans-serif; /* [ReplaceColor(themeColor:"StrongBodyText")] */ color: #262626; margin: 20px 0 80px; font-weight: 800; }

But upon loading the page, this will not be located in the themes directory. It will be loaded in addition to the default SP files since. Also, placing them in the "Style Library" I guess is incorrect.

Currently I am placing them in a custom directory with my Master Page.
Anonymous

2023-06-05T06:38:37.2466667+00:00

Hi @Mohammed Abed ,

Please try to view its style file in Themes and modify it to achieve the effect you want

OR

SharePoint Designer: SharePoint Designer is a powerful tool that can be used to customize SharePoint sites. You can use SharePoint Designer to modify a site's master page and style sheets to achieve a customized look and feel.

Here are some links about sharepoint Designer for your reference:

https://support.microsoft.com/en-us/office/introducing-sharepoint-designer-66bf58fe-daeb-4fa6-ae84-fd600e0005c1

https://support.bindtuning.com/hc/en-us/articles/205150885-How-do-I-edit-a-master-page-#:~:text=Open%20your%20site%20with%20SharePoint%20Designer%20Go%20to,version%20Refresh%20your%20browser%20using%20CTRL%20%2B%20F5

https://learn.microsoft.com/en-us/answers/questions/433441/regarding-sharepoint-2019-on-premise-custom-master

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards

Cheng Feng
Mohammed Abed 155 Reputation points

2023-06-08T11:57:57.3933333+00:00

I think the safest way is to make a custom CSS and override SP classes with ! important.

Share via

Themeable CSS for SharePoint Site

0 additional answers

Your answer