Design von Modern Pages in SP Online durch Injection von CSS/JS

Das Aussehen von Modern Pages in SharePoint Online kann zwar weitgehend angepasst werden, jedoch wünschen sich viele Unternehmen mehr. Manchmal reicht es einfach nicht, nur das Logo oder Farben des Designs anpassen zu können! Auch das Intranet soll Teil des Corporate Design und der Corporate Identity sein. Wie funktioniert also das Design von Modern Pages in SharePoint Online? Ganz einfach: über eine App, die Stylesheets und Skripte in deine Seiten „injiziert“! Was das bedeutet und wie wir dies für einen Kunden umgesetzt haben, erkläre ich dir in diesem Beitrag.

Es ist seit der Einführung von Modern Pages in Office 365 und SharePoint so einfach wie noch nie, wunderschöne Seiten zu erstellen. Und das ganz ohne Kenntnisse in Design oder Websiteprogrammierung. Hier liegen aber schon die ersten Hürden, denn die Anpassungsmöglichkeiten sind sehr limitiert. Sollte also ein Unternehmen beispielsweise strengere Branding Guidelines haben, die auch auf interne Systeme wie Intranets angewandt werden müssen, ist dies kaum umsetzbar.

Doch hier kommt die Injection von Custom Stylesheets und Skripten für das Design von Modern Pages in SP Online ins Spiel. Dafür erweitern wir in unserem Beispiel die Modern Site Pages über eine App um zusätzliches, benutzerdefiniertes CSS und JavaScript. Wir „injizieren“ den Seiten sozusagen zusätzlichen Code. Somit kann man wirklich (fast) alles an Designanpassungen durchführen.

Doch Vorsicht, bevor du jetzt Luftsprünge machst: Microsoft setzt ständig neue Features für SharePoint um. Dadurch können sich Änderungen an der Seitenstruktur ergeben und die von dir gemachten Änderungen könnten nicht mehr funktionieren. Oder schlimmer: je nach vorgenommener Anpassung kann es passieren, dass neue Features nicht sichtbar oder benutzbar sind.

Die Erstellung der App funktioniert recht einfach. Durch SharePoint Framework Extension können wir Code schreiben, den wir auf jede Site, Web oder Liste anwenden können. Für unsere Lösung war klar, dass sie so unkompliziert wie möglich sein soll. Daher sind nur zwei Schritte nötig, um das Design von Modern Pages in SP Online zu ermöglichen:

1. Die Anpassungen am Style sollen in dafür vorgesehenen Files vorgenommen werden können. Diese legen wir in einer SharePoint-Bibliothek ab.
2. Die eigentliche Extension, die unsere Files im HTML Head-Element aller Seiten referenziert und so die Darstellung der benutzerdefinierten Styles ermöglicht.

Das tolle an dieser Lösung ist, dass du die App nur ein einziges Mal installieren musst. Denn die Änderungen, die du an den CSS/JS Files vornimmst, werden sofort übernommen.

Für diesen Schritt sind ein paar Grundlegende Kenntnisse in CSS und JavaScript nötig. Aber keine Sorge, es ist keine Raketenwissenschaft.

In unserem Beispiel wollen wir die Darstellung der Navigationsleiste auf unserer Seite anpassen. Diese sieht vor den Anpassungen so aus:

1. Zuerst erstellen wir eine CSS-Datei in einem Texteditor unserer Wahl und laden diese in eine SharePoint-Bibliothek. Beachte, falls die Versionierung in dieser Bibliothek aktiviert ist, musst du die Datei einchecken, damit die CSS-Styles später für alle sichtbar sind.
2. Danach geht es auch schon ans Styling der HTML-Elemente. Kleiner Tipp: hier bietet sich an, die Klassennamen der HTML-Elemente, die du anpassen möchtest, über die browsereigenen Entwicklertools (aufrufbar mit F12) herauszusuchen. Auch an dieser Stelle möchten wir nochmal betonen, dass sich die IDs und Klassennamen jederzeit durch Updates von Microsoft ändern können.

Hier siehst du alle Anpassungen, die wir mit CSS durchgeführt haben, um unser Endergebnis zu erzielen:

.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;
}

Nun wollen wir in der Navigation noch ein Bild zwischen dem Icon und den Menüpunkten einfügen. Da wir hierfür einen zusätzlichen Container benötigen, ist dies mit CSS alleine nicht möglich. Daher erstellen wir analog zur CSS-Datei eine JavaScript-Datei und laden diese ebenfalls in unsere SharePoint-Bibliothek hoch.

Dies ist der Code zum Hinzufügen eines neuen HTML-Elements, der beim Laden der Seite ausgeführt wird:

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

Um dein Design von Modern Pages in SP Online zu verwirklichen, benötigst du noch eine App, die unsere CSS und JavaScript Dateien auf allen Sites einbindet.

Hierfür erstellen wir eine SPFx extension, definieren die URLs zu unseren Dateien in den Properties und fügen diese im HTML Head ein:

@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();
  }

Danach builden wir die App, fügen diese unserem Appkatalog hinzu und es ist vollbracht: unser Design von Modern Pages in SP Online ist fertig!

So einfach kann’s gehen! Hattest du schon ähnliche Anforderungen bei dir im Unternehmen oder Fragen zu unserer Lösung? Dann hinterlasse uns gerne ein Kommentar oder kontaktiere uns über unser Kontaktformular zu diesem Thema.