Eigene CSS-Datei in Gestaltungsvorlage integrieren

Oftmals ist man mit der Gestaltung welche von Microsoft vorgegeben wird nicht ganz zufrieden. Änderungen am Cascading Style Sheet können nötig sein. Sinn macht es hier jedoch die Änderungen nicht in der systemeigenen corev4.css vorzunehmen da man sich hier schnell seine komplette Seite zunichtemachen kann. Besser ist es die Gestaltungsvorlage um ein eigenes CSS zu erweitern.

Wir machen uns hier die Kaskadierungseigenschaften des Stylesheets zu nutze. Vereinfach erklärt bedeutet das, dass wir eine Klasse auch mehrfach definieren können aber nur die letzte Definition genutzt wird. Was will ich also mit diesem komischen Satz sagen. Wir können Klassen aus der corev4.css in ein neues CSS übernehmen. Dieses CSS wird nach der corev4.css ausgeführt und “überschreibt” somit dessen Werte.

Die beste Methode hierfür ist:

  1. Ein neues Textdokument   mit der Endung .css erstellen (z.B. EigeneCSS.css)
  2. Die Hauptseit der   Webseitensammlung in Sharepoint Designer öffnen
  3. In der linken   Navigation “Alle Dateien” auswählen und im rechten Fenster die   “Formatbibliothek” (Style Library) öffnen
  4. Die neue CSS-Datei hier   hochladen
  5. In der linken   Navigation “Gestaltungsvorlagen” auswählen und im rechten Fenster die “v4.master” Vorlage auswählen und öffnen
  6. Im Code-Bereich wir   nun im <head>-Tag hinter <SharePoint:CssLink   runat=”server” Version=”4″/> folgende Zeile eingefügt: <SharePoint:CssRegistration name=”<%   $SPUrl:~SiteCollection/Style Library/EigeneCSS.css%>”   runat=”server” After=”corev4.css”/>

Die Gestaltungsvorlage nutzt nun das neue CSS zur bestehenden corev4.css. Durch die Kaskadierung der Stye Sheets können so nun Eigenschaften hinzugefügt oder Eigenschaften aus dem original Style Sheet von Sharepoint “überschrieben” werden ohne die corev4.css bearbeiten zu müssen. So können Anpassungen bei Problemen auch wieder schnell rückgängig gemacht werden.

Ersten Kommentar schreiben

Antworten

Deine E-Mail-Adresse wird nicht veröffentlicht.


*


Bitte geben Sie das Ergebnis ein * Time limit is exhausted. Please reload the CAPTCHA.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.