While the look of Modern Pages in SharePoint Online can be largely customized, many companies just want more. Sometimes it’s not enough to be able to customize the logo or colors of the design! The intranet should also be part of corporate design and identity. So how does one achieve a new design of Modern Pages in SharePoint Online? It’s easy: via an app that “injects” style sheets and scripts into your pages! What this means and how we have implemented this for a customer, I’ll explain to you in this article.

Injection of CSS and JavaScript for the design of Modern Pages

Creating beautiful pages has never been easier since modern pages were introduced in Office 365 and SharePoint. And all this without any knowledge of design or website programming. But this is where we encounter some obstacles, because the possibilities for real customization are very limited. For example, if a company has stricter branding guidelines that must also be applied to internal systems such as intranets, this is hardly feasible.

But this is where the injection of custom style sheets and scripts for the design of Modern Pages in SP Online comes into play. To do this, in our example, we extend the Modern Site Pages with additional custom CSS and JavaScript via an app. We “inject” the pages with additional code, so to speak. Thus, you can (almost) do any imaginable design adjustments.

This sounds too good to be true. Alas, there’s a catch: Microsoft is constantly implementing new features for SharePoint. This may result in changes to the page structure and the changes you make may no longer work. Or worse, depending on the customization you’ve made, new features may not be visible or usable.

How to build your CSS/JS Injection Extension

Creating the app is quite easy. SharePoint Framework Extension allows us to write code that we can apply to any site, web, or list. It was clear to us that our solution should be as straightforward as possible. Therefore, only two steps are required to implement your design of Modern Pages in SP Online:

  1. The style adjustments should be able to be made in dedicated files. We store them in a SharePoint library.
  2. The actual extension that references our files in the HTML head element of all pages, allowing the custom styles to be rendered.

The great thing about this solution is that you only need to install the app once. Because the changes you make to the CSS/JS files are applied immediately.

CSS and JavaScript Files

This step requires some basic knowledge of CSS and JavaScript. But don’t worry, it’s not rocket science.

In our example, we want to adjust the appearance of the navigation bar on our page. The page looks like this before the adjustments:

  1. First, we’ll create a CSS file in a text editor of our choice and upload it to a SharePoint library. Note that if versioning is enabled in this library, you must check in the file so that the CSS styles are visible to everyone later.
  2. After that, it’s all about styling the HTML elements. Note that you can find out the class names of the HTML elements you want to customize via the browser’s own developer tools (accessible by pressing F12). Again, we would like to emphasize that the IDs and class names can change at any time due to updates from Microsoft.

Here you can see all the adjustments we made with CSS to achieve our final result:

.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; // top navigation
}

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

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

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

Now we want to insert an image between the icon and the menu items in the navigation. Since we need an additional container for this, this is not possible with CSS alone. Therefore, we create a JavaScript file similar to the CSS file and upload it to our SharePoint library as well.

This is the code to add a new HTML element that runs when the page loads:

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]);
}

SharePoint Framework Extension

To conclude your design of Modern Pages in SP Online, you still need an app that integrates your CSS and JavaScript files on all sites.

To do this, we create an SPFx extension, define the URLs for our files in the properties and insert them into the HTML head:

@override

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

    return Promise.resolve();
  }

Then we build the app, add it to our app catalog and it’s done: our design of Modern Pages in SP Online is ready!

It’s as easy as that! Do you have similar requirements in your company or questions about our solution? Then please leave us a comment or contact us via our contact form on this topic.

Contact