SharePoint 2010 MasterPage und CSS Design

Da das anpassen des SharePoint Design immer ein bisschen schwierig ist werde ich hier ein paar Tipps geben.
Heute zeige ich die Grundlagen der Anpassung oder Branding einer SharePoint 2010 Website.

Bevor ich Anfange am Design Anpassungen vor zu nehmen sollte ich ein paar Vorkehrungen treffen.
Alle Designeigenschaften wie Bilder, Schrift, Farben und Positionen sind in der Standard CSS Datei corev4.css definiert. Wenn man sich die Datei einmal im Texteditor öffnet kann man recht gut erkennen wie viel Stylesheet-Tags da drin sind. Wenn ich direkt in der Datei alles Style Änderungen machen würde wäre das ziemlich unübersichtlich. Vor allem wenn man nach 2 Monaten wieder in die CSS Datei reinschaue findet man sich schwer zurecht.
Aus diesem Grund erstelle ich mir eine eigene CSS Datei in der ich alle Änderungen und Anpassungen an meinem Design vornehmen werde.

Um noch zu erklären wie das mit den Styles Anpassungen in verschiedenen CSS-Dateien funktioniert, welche Style-Tag verwendet die MasterPage und aus welcher Datei. Dies ist im Prinzip ganz simple. Solang es nur die Standard corev4.css von Microsoft gibt werden alles Eigenschaften aus ihr angewendet. Wenn jetzt aber eine weitere CSS-Datei „IntranetStyle.css“ ins Spiel kommt ist die zusätzliche Stylesheet-Datei in der Priorität höher angesiedelt als die Standard corev4.css.
Ein Beispiel:
Wenn in beiden Stylesheet-Dateien der gleiche Style-Tag vorhanden ist wird der Style-Tag aus der IntranetStyle.css verwendet. Alle Style-Tags die sonst noch in der MasterPage aufgerufen werden und nicht in der IntranetStyle.css vorhanden sind werden direkt aus der corev4.css verwendet.

Um eine eigene Style-Datei zu erzeugen gehe ich folgendermaßen vor.

1. Erzeugen einer eigenen Stylesheet-Datei

2. Verknüpfen der Stylesheet-Datei mir der MasterPage

Zuerst öffne ich die SharePoint Seite bei der das Design angepasst werden soll im SharePoint Designer. Im SharePoint Designer unter Websiteobjekte markiere ich den Ordner Alle Dateien. Jetzt werden im rechten Fenster des SharePoint Designers alle Ordner angezeigt die in der Website vorhanden sind. Hier sollte es deinen Ordner mit dem Namen _Styles geben. In diesem sind Orden liegt die corev4.css für die jeweilige Website. Beim erstellen einer neuen Websitesammlung wird jedes mal diese Datei aus dem folgendem Pfad des Servers(C:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions14TEMPLATELAYOUTS1031STYLES) rausgenommen und für die Websitesammlung zur Verfügung gestellt. Die Zahl 1031 steht für die verwendete Sprachversion im SharePoint(1031 = Deutsch). In dem Ordner erstelle ich mir dann einen neue CSS Stylesheet-Datei über den Eintrag Datei in der Multifunktionsleiste und vergebe eine Aussagekräftigen Namen(IntranetStyle.css).

clip_image002

Jetzt ist die eigene Stylesheet-Datei schon mal erstellt. Als nächstes verknüpfe ich die Stylesheet-Datei mit meiner MasterPage. Hierfür gibt es mehrere Möglichkeiten ich werde einen langen und einen schnellen Weg zeigen.
Der lange natürlich zuerst. Im SharePoint Designer unter Websiteobjekte im Ordner Gestaltungsvorlagen liegen alle möglichen Gestaltungsvorlagen. Auch die v4.master welche die Standard MasterPage der SharePoint Website ist.

clip_image004

Um diese zu v4.master zu öffnen klick ich sie an und Anpassung im Mittleren Bereich wähle ich Datei bearbeiten. Jetzt werde ich gefragt ob ich die Datei auschecken möchte.
clip_image005

Dies muss zum bearbeiten der Masterpage gemacht werden. Die Frage bestätige ich mit Ja dann öffnet sich die v4.master Seite im SharePoint Designer. Um die Stylesheet-Datei jetzt anzufügen wähle ich in der Multifunktionsleiste oben den Karteireiter Formatvorlage. In der Multifunktionsleise sollte es jetzt einen Punkt Stylesheet anfügen geben. Wenn ich diesen betätige öffnet sich ein Dialog in dem ich den Pfad zur eigenen Stylesheet-Datei angeben kann. Über durchsuchen kann ich durch die Ordnerstruktur meiner SharePoint Website navigieren. Hier gehe zum Ordner _Styles und wähle meine IntranetStyle.css aus. Danach bestätige ich alles mit OK.

clip_image007

Es passiert nichts anders das in der MasterPage der Pfad auf die eigene Stylesheet-Datei eingefügt wird. Um das zu prüfen begebe ich mich in der Quellcodeansicht der v4.master nach oben bei ca. der Zeile 35. Hier wurde folgender Eintrag eingefügt
<link rel="stylesheet" type="text/css" href="/_styles/IntranetStyle.css" />.
Der Kurze Weg besteht darin diesen Eintrag manuell einzufügen ohne über den Assistenten zu gehen. Wie es jedem lieber ist. Zum Schluss muss nur noch die v4.master Gespeichert, Eingecheckt und Genehmigt werden.

Jetzt habe ich die Vorbereitungen für die Anpassungen meiner SharePoint Seite getroffen und kann mit den Design Anpassungen los legen.

Dies dann im nächsten Artikel.

Gruß Chris

Author: Fumus

1 thought on “SharePoint 2010 MasterPage und CSS Design

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert