Im vorherigen Artikel habe ich gezeigt, wie ein Seitenlayout für die öffentliche Website von Office 365 angelegt wird. Dieser Artikel beschäftigt sich damit, wie Sie dieses optisch anpassen können.

Nachdem Sie das Layout erstellt haben, wird dieses direkt in SharePoint Designer Ordner Seitenlayouts angelegt und geöffnet. Der Quellcode eines Seitenlayouts besteht immer aus den Direktiven am Anfang und den Platzhaltern (Placeholders). Diese dienen als Container für Inhalte in SharePoint. Es ist nicht möglich etwas außerhalb der Direktiven oder der Platzhalter zu platzieren. Da wir vom Standardlayout geerbt haben, haben wir auch nur den Placeholder Main bisher in der Datei.

Dieser Placeholder ist der eigentliche Inhalt einer SharePoint Datei, also der Inhalt, den Sie auch im Browser bearbeiten können. Der Bereich des Placeholders Main ist unten gelb markiert, der Rest kommt aus der Masterpage.

Um ein wenig mehr Leben in der Datei zu bringen, können Sie einen Platzhalter für den Head einfügen und zwar unmittelbar unterhalb der Direktiven und oberhalb des Placeholder Main.

<asp:Content ContentPlaceholderID=“PlaceHolderAdditionalPageHead“ runat=“server“>

<SharePointWebControls:CssRegistration name=“<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %>“ runat=“server“/>

        <PublishingWebControls:EditModePanel runat=“server“>

        <!– Styles for edit mode only–>

        <SharePointWebControls:CssRegistration name=“<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/editmode15.css %>“

            After=“<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %>“ runat=“server“/>

    </PublishingWebControls:EditModePanel>

</asp:Content>

Um Layout in das Design zu bringen, ergänzen Sie den Inhalt des PlaceHolderMain wie unten gezeigt. Dieser Code fügt Ihnen zwei Spalten in das Layout ein.

<asp:Content ContentPlaceholderID=“PlaceHolderMain“ runat=“server“>

<PublishingWebControls:LayoutDivContainer runat=“server“ class=“layout-col twoColumnLayout-left ms-verticalAlignTop“>

        <PublishingWebControls:LayoutDivContainer runat=“server“ class=“twoColumnLayout-left-inner“>

            <PublishingWebControls:RichHtmlField FieldName=“PublishingPageContent“ HasInitialFocus=“True“ MinimumEditHeight=“400px“ runat=“server“/>

        </PublishingWebControls:LayoutDivContainer>

    </PublishingWebControls:LayoutDivContainer>

    <PublishingWebControls:LayoutDivContainer runat=“server“ class=“layout-col twoColumnLayout-right ms-verticalAlignTop“>

        <PublishingWebControls:LayoutDivContainer runat=“server“ class=“twoColumnLayout-right-inner“>

            <PublishingWebControls:RichHtmlField FieldName=“SBWPageContent1″ HasInitialFocus=“False“ MinimumEditHeight=“400px“ runat=“server“/>

        </PublishingWebControls:LayoutDivContainer>

    </PublishingWebControls:LayoutDivContainer>

</asp:Content>

Spalten einfügen

Wie kommt jetzt aber das Datum der letzten Änderung in den Code? Dazu haben Sie am rechten Rand im SharePoint Designer den Arbeitsbereich Toolbox. Wenn Sie in diesem ganz nach unten gehen, finden Sie den Punkt Inhaltsfelder. Hier ist die Websitespalte, welche wir vorher in den Inhaltstyp eingefügt haben.

Zeigen Sie auf den Eintrag Geändert am und ziehen Sie diesen in das Fenster mit dem Code. Platzieren Sie diesen unmittelbar über dem schließenden Tag des Placeholders. Damit steht der Eintrag unten links. Wer möchte, kann dies natürlich via CSS auch ändern.

Nachdem Sie alle Änderungen vorgenommen haben, suchen Sie die Datei in dem Ordner Seitenlayouts. Mit einem Rechtsklick rufen Sie das Kontextmenü auf und wählen den Punkt Einchecken.

Im folgenden Dialog ist es wichtig, dass Sie den Punkt Hauptversion wählen. Andernfalls ist das Seitenlayout sonst nicht verfügbar für normale Benutzer.

Gehen Sie dann in den Browser und bearbeiten Sie die Webseite, die das neue Design erhalten soll. Klicken Sie im Modus Bearbeiten auf das Menüband Seite und dort auf Seitenlayouts. In den erscheinenden Dialog können Sie nun das neue Design auswählen.

Hier nun das neue Design, aber noch ohne Inhalt 🙂 Ich hoffe, diese Artikel haben Ihnen weitergeholfen und freue mich auf Kommentare. Der Kurzlink zu diesem Artikel ist http://wp.me/p4y7ta-4v.