Create a project management milestone view with the Content Query Web Part

In my last blog post I showed how you can create a nice looking calendar icon for a Content Query Web Part linked to an events list. Now I want to use the same icon to show information from a task list. You can use this for instance as a view for milestones in a project management site. If you haven’t read that article, I suggest you do that first. I will rely in this blog post heavily on information you can read in that article.

Adding a calendar icon to a Content Query Web Part

I was working on a project the other day, when I stumbled upon this webpage with a nice little calendar done completely in CSS. So I was wondering if it would be possible to create an events list from this:

to this:

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.