Design SharePoint Modern Pages with CSS/JS Injection

Modern pages in SharePoint Online are easy to build, but many organizations need more control than out-of-the-box options allow. Changing just a logo or color palette often isn’t enough—your intranet should reflect your corporate design and identity. The solution: a small app that injects stylesheets and scripts into your pages. In this article, we show how we implemented this approach for a client.

Why CSS/JS Injection?

Since Microsoft introduced modern pages in Office 365 and SharePoint, anyone can create attractive pages without deep design or coding skills. However, customization options are limited. If your organization enforces strict brand guidelines across internal systems, the default features won’t cover everything.

This is where injecting custom stylesheets and scripts helps. By adding a lightweight app that inserts additional CSS and JavaScript into modern site pages, you can implement almost any visual adjustment you need.

Caution: Microsoft ships new SharePoint features continuously. Page structure can change, and your customizations may break. In some cases, new features might not display or work as expected if your overrides conflict with them.

How the Extension Works

Using SharePoint Framework Extensions, we can run code across a site, web, or list. Our goal is simplicity, so the setup comes down to two steps:

1. Keep your CSS/JS assets in a SharePoint library where editors can update them.
2. Use an SPFx extension to reference those files in the HTML head of all pages.

The benefit: you install the app once. Any change to your CSS/JS files is applied immediately site-wide.

CSS and JavaScript Files

Basic CSS and JavaScript knowledge is helpful, but you don’t need to be an expert. In this example, we adjust the navigation bar styling. Before customization, it looks like this:

Tip: Use your browser’s developer tools (F12) to inspect class names. Be aware that Microsoft can change IDs and class names at any time via updates.

Here are the CSS tweaks we applied to reach the desired outcome:

.mainHeader-47 {
  display: block;
  height: initial;
}

.logoCell-48 {
  margin: 10px 0;
  justify-content: flex-end;
}

.titleAndNavWrapper-51 {
  margin-right: initial;
  margin-top: 20px;
  margin-bottom: 20px;
}

.titleSubcell-52 {
  display: none;
}

.ms-HorizontalNavItems {
  display: flex;
  justify-content: space-between;
}

.ms-HorizontalNavItem {
  width: 25%;
  text-align: center;
  background-color: #cb4903;
  margin: 0 !important;
}

.ms-HorizontalNavItem > button {
  color: white !important;
  font-size: 20px;
  font-weight: bold;
  height: 40px;
}

.ms-HorizontalNavItem,
.ms-HorizontalNavItem-link {
  cursor: pointer !important;
}

.ms-HorizontalNavItem[data-automationid='HorizontalNav-edit'] {
  display: none;
}

.ms-HorizontalNav-chevronDown {
  display: none;
}

.ms-HorizontalNavItem-splitbutton {
  display: none;
}

.headerImage {
  background-image: url('');
  height: 200px;
  background-size: 100% 100%;
}

/* Header bar */
.o365sx-waffle,
.o365sx-appName,
.o365sx-button,
.o365sx-navbar {
  background-color: #cb4903 !important;
}

/* Footer bar */
.simpleFooterContainer-97 {
  background-color: #cb4903 !important;
}

.ms-Callout {
  /* margin-left: -6%; */
  width: 20%;
}

/* Show context menu element with an inline square */
.ms-ContextualMenu-linkContent:before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  margin-left: 15px;
  margin-bottom: 0;
  background-color: #cb4903;
}

We also insert an image between the icon and the menu items. For that we need an extra container, so we add a small JavaScript snippet:

window.onload = function () {
  var elements = document.getElementsByClassName('mainHeader-47');
  var logoCellDiv = elements[0];
  var newDiv = document.createElement('div');
  newDiv.classList.add('headerImage');

  logoCellDiv.insertBefore(newDiv, logoCellDiv.children[1]);
};

SPFx Extension

To enable this across all sites, we create an SPFx extension that reads the CSS/JS URLs from its properties and injects them into the page head:

@override
public onInit(): Promise<void> {
  const cssUrl: string = this.properties.cssurl;
  const jsUrl: string = this.properties.jsurl;
  if (cssUrl) {
    const head: any =
      document.getElementsByTagName('head')[0] || document.documentElement;
    const customStyle: HTMLLinkElement = document.createElement('link');
    customStyle.href = cssUrl;
    customStyle.rel = 'stylesheet';
    customStyle.type = 'text/css';
    head.insertAdjacentElement('beforeEnd', customStyle);
  }
  if (jsUrl) {
    const head: any =
      document.getElementsByTagName('head')[0] || document.documentElement;
    const customScript: HTMLScriptElement = document.createElement('script');
    customScript.src = jsUrl;
    customScript.type = 'text/javascript';
    head.insertAdjacentElement('beforeEnd', customScript);
  }

  return Promise.resolve();
}

After building and deploying the app to your app catalog, your modern page styling is applied across the site.

Have similar requirements or questions about this setup? Leave a comment or get in touch via our contact form.

Contact us