Living a SharePoint life

Wednesday, August 14, 2013

Eigene CSS Inhalte in einer SharePoint 2010 Seite einfügen

Diese Informationen funktionieren nur mit dem SharePoint 2010 Server und aktiviertem Publishing Feature. Mit SharePoint 2010 Foundation ist ein anderes Vorgehen notwendig, welches hier nicht beschrieben wird.

Die eigene CSS Datei erstellen

Die einfachste Methode eigene CSS Inhalte in einer SharePoint Seite einzufügen, ist die Masterdatei anzupassen. Als erstes sollte man sich immer eine Kopie der Masterdatei erstellen, bevor man Veränderungen daran vornimmt. Am besten kann man dies mit dem SharePoint Designer erledigen, da man damit auch gleich die Änderungen vornehmen kann. Kann man den SharePoint Designer nicht verwenden, so ist es möglich die Masterdatei aus der "Gestaltungsvorlagen und Seitenlayouts" Galerie in den Websiteeinstellungen herunterladen.

In der SiteCollection navigiert man in die Formatbibliothek und erstellt den Unterordner "Custom". Der Unterordner kann auch eine andere Bezeichnung erhalten, allerdings finde ich es in Ordnung wenn man gleich erkennen kann welche Inhalte im Ordner gespeichert werden. Die Formatbibliothek hat im Englischen die Bezeichnung "Style Library" und ist mit folgender URL erreichbar:
http://<SiteCollectionRoot>/Style%20Library/
Mit einem Editor der Wahl erstellt man seine CSS Datei und speichert schließlich diese in dem soeben erstellten Ordner. In diesem Beispiel nennen wir die Datei "customstyles.css". Auch hier gilt, die Datei kann beliebig benannt werden, es müssen aber die Pfade beim Einfügen in die Masterdatei angepasst werden.

Die CSS Datei in der Masterdatei einfügen

Nach einer neuen SharePoint 2010 Installation wird die v4.master Datei als Master verwendet. Wenn man die Datei noch nicht heruntergeladen hat bzw. noch nicht im SharePoint Designer geöffnet, dann tut man es jetzt. Als nächstes suchen wir folgenden Eintrag in der Datei:
<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">
Jetzt fügen wir eine neue Zeile vor dem asp:ContentPlaceHolder Tag ein.
<SharePoint:CssRegistration name="<% $SPurl:~SiteCollection/Style Library/Custom/customstyles.css %>" After="corev4.css" runat="server"/>
Dieser Abschnitt registriert unsere CSS Datei und lädt diese nach der SharePoint eigenen "corev4.css" Datei. Somit wird sichergestellt, dass Änderungen die wir in unsere CSS Datei vornehmen die Defaulteinstellungen von SharePoint überschreibt.

Featured Post

How are Microsoft Search quota consumed?

With Office 365 Search, Microsoft has created a central entry point for the modern workplace. In one convenient spot, users can access all ...