Wow, CSS ist ja wirklich einfach!

Eines der am meisten anzupassenden Elemente in SharePoint ist die Suitebar. Die Suitebar selbst wird mithilfe des SharePoint Color Palette Tool eingefärbt. Das Ergebnis der Einfärbung sieht so aus:

Die Einfärbung wird aber auch für die «Kachelnavigation» übernommen:

Oftmals wollen Ihre Kunden dies nicht bzw. wünschen sich die Kacheln in einer anderen Farbe.

Wenn Sie die Kacheln untersuchen, merken Sie schnell, dass die Farbe von SharePoint mithilfe eines Inline-Styles gegeben wurde:

Inline Styles haben im CSS Wertesystem eine sehr hohe Wertung, wodurch Sie als Entwickler gezwungen sind, zu «important» zu greifen. Hier ist es enorm wichtig zu beachten, dass Sie nur die Kacheln ansprechen. Die entsprechende CSS Regel würde nun so aussehen:

.o365cs-nav-appTile {
background: #525252 !important;
}

Das hierdurch erzeugte Ergebnis:

Ein weiteres Element, welches bei Ihren Kunden oft angepasst werden muss, ist die Global Navigation. Die Global Navigation erlaubt Ihren Kunden, Links zu erfassen und somit Navigationen zu erstellen. Leider hat sie den Nachteil, dass sie standardmässig nicht umbricht. Sie sehen dies in folgendem Beispiel:

Sie können den Umbruch aber mit wenig CSS erzwingen:

#DeltaTopNavigation ul[id*=“RootAspMenu“] {

white-space: normal;

}

Dabei hilft uns vor allem der Attributselektor, welchen Sie mit den rechtwinkligen Klammern verwenden können.

Mit diesem CSS lassen Sie die Global Navigation umbrechen, sollte sie, mit der Search Box zusammen, über den Bildschirmrand hinausgehen. Unser Ergebnis sieht danach so aus:

Und das Beste an der Sache ist: Die Links innerhalb der Global Navigation bleiben auch weiterhin verschiebbar und bearbeitbar!

Ein Problem das auftritt, wenn Ihre Kunden viele verschiedene Web Parts auf ihrer Seite verwenden, ist die Bedienung der Seite auf Geräten mit kleinerem Bildschirm.

Im nachfolgenden Beispiel haben wir ein dreispaltiges Seitenlayout, in dem für jede Spalte verschiedene Web Parts verwendet werden:

Wie Sie sehen, wird die letzte Spalte abgeschnitten. Dies können Sie umgehen, indem Sie die Web Parts umbrechen lassen. Per CSS können Sie die verschiedenen Web Part Zonen ansteuern und ihnen jeweils die Attribute «display: inline-block» sowie «width: 100%» geben.

Die Selektoren, um die Web Part Zonen anzusprechen, können sich je nach Seite unterscheiden. In unserem Fall können Sie den Klassenselektor «.ms-webpart-zone» anwenden.

Das Ergebnis sieht wie folgt aus:

Damit diese Änderung aber nur auf Geräten mit kleinerem Bildschirm wirkt, müssen Sie ein sogenanntes «media query» verwenden. Wie man ein media query benutzt, können Sie hier lesen: https://css-tricks.com/logic-in-media-queries/.

Damit dieses media query auch tatsächlich in Kraft tritt, müssen Sie noch einen Viewport festlegen: http://www.n8d.at/blog/how-to-add-viewport-meta-without-editing-the-master-page/.

SharePoint generiert automatisch Klassen und ID’s:

Dieses Element über seine ID anzusprechen würde nur in den seltensten Fällen klappen. Allerdings können Sie hier auf den Attributselektor zurückgreifen. Der Attributselektor erlaubt es Ihnen, Elemente anzusprechen, welche einen bestimmten String in einem beliebigen Attribut haben.

Für unser Element könnte der Attributselektor also folgendermassen lauten: div[id*=“WebPart“].

Mehr Informationen über diesen Selektor finden Sie unter den folgenden Links:

https://css-tricks.com/almanac/selectors/a/attribute/

https://developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors

Um Ihr CSS File in SharePoint einzubinden, haben Sie viele Möglichkeiten.

Eine Möglichkeit wäre, dass Sie Ihr CSS bei den Settings unter «Gestaltungsvorlagen» hinterlegen. Die ADVIS empfiehlt, hierfür eine zentrale Site Collection namens «settings» zu erstellen und das CSS dort abzulegen. Der Vorteil dieser Technik besteht darin, dass Sie alle Ihre global benötigten Dateien zentral ablegen und verändern können, und nicht auf jeder Seite neu hochladen müssen.

Weiter könnten Sie ein Script Web Part verwenden und Ihr CSS unter einem Tag einfügen. Dies ist nützlich, wenn Sie nur auf einer einzigen Seite eine Änderung machen möchten.

Eine andere, und zudem auch sehr nützliche Methode ist das registrieren einer „User Custom Action“ dies kann sowohl mit Powershell wie auch mit JavaScript erfolgen.
Für ein einmaliges Registrieren oder Überprüfen von registrierten Funktionen ist das Chrome Plugin „SP Editor“ von „tavikukko“ enorm nützlich. Mehr Informationen zum Registrieren mit JavaScript finden Sie unter:
https://www.sharepoint.at/2016/07/25/javascript-und-css-einbinden-mit-user-custom-actions/

Zuletzt könnten Sie auch die Master Page bearbeiten und Ihr CSS File direkt in den Header einfügen. Allerdings müssten Sie dann bei jedem SharePoint Update das CSS erneut einbinden. Diese Variante ist also eher eine schlechte Lösung.