Branding von MySites in SharePoint 2010 Teil 2

Im zweiten Teil meines Artikels (Teil 1 gibt es hier) steigen wir jetzt in die Anpassung der MySite ein.

Jeder von uns ist auf seine eigene Art und Weise Mensch und Mitarbeiter. Ob grundsätzlich im Stil des Unternehmens oder ganz individuell auf jeden einzeln zugeschnitten. Beim Branding der eigenen MySite gibt es erst einmal keine Grenzen, insofern sie nicht durch eine interne Unternehmens-Richtlinie festgelegt sind.

Für das Branding kommen verschiedene Möglichkeiten in Frage:

Anpassung der allgemeinen Profilseite

KB-01-01

Abbildung 1: Ansicht einer Standard-Profilseite

Anpassung der individuellen Inhaltsseite

KB-01-02

Abbildung 2: Ansicht einer Standard-MySite

Bei der Anpassung der allgemeinen Profilseite kann das Branding nur über die gesamte Site Collection hinweg vorgenommen werden. Das heißt alle in dieser Site Collection angezeigten Profile werden im gleichen Stil dargestellt. Das benutzerdefinierte Branding und die eigentliche MySite beziehen sich auf die individuelle Inhaltsseite. Aber bevor wir auf das individuelle Branding der MySite eingehen, widmen wir uns erst einmal der übergreifenden Design-Anpassung der Profile (Abbildung 1).

Das Branding der Profilseiten erfolgt über den direkten Zugriff auf die MySite Masterpage.
Zuerst wird die Site Collection im SharePoint Designer geöffnet.
Im Verzeichnis _catalogs > masterpage ist eine Datei mit dem Namen mysite.master zu finden, diese wird geöffnet.

KB-01-03

Abbildung 3: Ansicht Verzeichnis-Struktur „Masterpage“

Wir befinden uns jetzt in der MySite Masterpage und können diese nach Belieben anpassen. Um die Möglichkeiten des Brandings zu demonstrieren folgen nun einige Anweisungen, die natürlich frei erweiterbar/anpassbar sind.

Zwei Schritte sind in der Masterpage nötig:

  • eine eigene CSS Datei registrieren
  • Struktur-Anpassungen

Um eine neue CSS Datei zu registrieren suchen wir im Header Bereich der Masterpage nach folgender Anweisung:

<SPSWC:MySiteCssRegistration runat="server" Name="mysitelayout.css"/>

und ergänzen diese um die Zeile:

<SharePoint:CssRegistration runat="server" Name="<%$ SPUrl:~sitecollection/Style Library/mysite.css %>" >

Wie dem Attribut „Name“ zu entnehmen ist, registrieren wir hiermit unsere neue CSS Datei -mit dem Namen „mysite.css“ – sie befindet sich in dem Ordner „Style Library“, direkt im Root-Verzeichnis und muss nun noch von uns hinterlegt werden.

Um die Datei entsprechend anzeigen und anpassen zu können, navigieren wir also in den Ordner „Style Library“ und legen die neue CSS Datei an.

KB-01-04

Abbildung 4: Ansicht Verzeichnis-Struktur „Style Library“

Dafür wird mit der rechten Maustaste auf den Ordner „Style Library (Formatbibliothek)“ geklickt und über New (Neu) > CSS eine neue Datei generiert und entsprechend unserer Registrierung umbenannt.

Mit diesen zwei Schritten haben wir schon die Voraussetzung erfüllt die Profilseiten nun nach Belieben anpassen zu können. Wir kehren zurück in die Masterpage und machen folgende Anpassungen – suchen nach dem Abschnitt:

<div id="s4-workspace">
<div id="s4-bodyContainer">

und ergänzen das Div mit der ID „s4-workspace“ um die Klasse „MySite“:

<div id="s4-workspace">
<div id="s4-bodyContainer">

Die Klasse dient der konkreten Bezeichnung eines Bereichs, um sicherzustellen dass wir bei den späteren CSS Anpassungen keine unerwünschten Änderungen vornehmen.

Die Masterpage muss noch um eine weitere Zeile ergänzt werden. Wir suchen nach dem Abschnitt:

<div class="s4-ba">
<div class="ms-bodyareacell">

und ergänzen ihn um folgende Zeile:

<div class="s4-ba">
<div><span>Mein Profil</span></div>
<div class="ms-bodyareacell">

Die Änderungen an der Masterpage sind damit abgeschlossen.

Jetzt aber – her mit den CSS Styles

Neben den Anpassungen in der Masterpage ist es natürlich unumgänglich, unsere CSS Datei mit Styles zu hinterlegen und uns hier auszutoben. Damit man sehen kann, dass überhaupt etwas passiert, sind die Änderungen im folgenden Beispiel kompakter gehalten. Sie schreien aber förmlich nach Erweiterung und Verwirklichung der eigenen Ideen.

Der Inhalt der vorab angelegten „mysite.css“ umfasst folgende Zeilen:

.MySite  { background: transparent url('Images/BG_Second.jpg') no-repeat; }
.MySite .ms-bodyareacell a:link,
.MySite .ms-bodyareacell a:visited,
.MySite .ms-bodyareacell a:hover,
.MySite .ms-bodyareacell a:active,
.MySite .ms-WPBody a:link,
.MySite .ms-WPBody a:visited,
.MySite .ms-WPBody a:hover,
.MySite .ms-WPBody a:active,
.MySite .s4-sn li.static > a:link,
.MySite .s4-sn li.static > a:visited,
.MySite .s4-sn li.static > a:hover,
.MySite .s4-sn li.static > a:active
{ color: #CB7F08; }
div#s4-bodyContainer { width: 980px !important; margin: 0 auto; }
div.ms-profilepageheader,
div.ms-profileasseenby  { border: 0; }
.MSTop { height: 100px; background-color: #E4900B; }
.MSTop span { color: #FFF; padding: 25px 0 0 33px; font-size: 36px; display: block; }
.ms-bodyareacell { padding: 12px; }
.MySite .ms-bodyareacell .s4-sn li.static > a:link,
.MySite .ms-bodyareacell .s4-sn li.static > a:hover { color: #3B4F65; }
.MySite .s4-sn li.static > a.selected { border-color: #2DB32A #2DB32A #FFF; }
.MySite .ms-contactcardtext1 { color: #288426; }
.MySite .s4-sn { border-bottom: 1px solid #2DB32A; }
.MySite .ms-orgme { border: 1px solid #2DB32A; }
.MySite .ms-profilepageheader,
.MySite .ms-orgme,
.MySite .s4-sn { background-color: #F5FCF5; }

Nach dem Speichern der Datei und dem aktualisieren der MySite im Browser ist nun folgendes Ergebnis zu sehen:

KB-01-05

Abbildung 6: Ansicht einer Standart-Profilseite Nachher

Damit sind wir am Ende dieses Artikels, ich freue mich über Feedback, Kommentare und Anregungen.