Informations-Management
 
 
Background picture
Background picture
Uni from A-Z
Universität Bielefeld > University > Faculties and Departments > Pressestelle > Informations-Management
  

Anpassung des Layouts an eigene Farbwerte

Für die Anpassung an die eigenen Farbwerte müssen Sie in Ihrem Roxen-Verzeichnis zwei Dateien hinzufügen. Eine css-Datei und ein eigenes Template. Wie diese aufgebaut sind, sehen Sie hier.

1. Die Stylesheet-Datei


Grundeintäge

Erstellen Sie eine CSS-Datei (z.B. "style.css"). Diese Datei sollte für eine Farbanpassung mindestens die Grundeinträge (unten im Textfeld angegeben) enthalten.

Menüpunkt-Einträge

Sollen die grünen Menüpunkte auch ausgetauscht werden, dann muss ein gif erzeugt werden und die entsprechenden CSS-Angaben hinzugefügt werden.

Folgende Farben stehen bereits zur Verfügung:

   #186aa3 ( ähnlich zu Farbe 28 ):
       /images/template_2009/menuponits_blau_186aa3.gif
   #2a9ddf ( Farbe 10 ):
       /images/template_2009/menuponits_blue_2A9DDF.gif
   #91beb9 ( ähnlich zu Farbe 20 ):
       /images/template_2009/menuponits_blue_91BEB9.gif
   #8cbca7 ( Farbe 18 ):
       /images/template_2009/menuponits_gruen_8CBCA7.gif
   #85bc21 ( Farbe 23 ):
       /images/template_2009/menuponits_green_85bc21.gif
   #d5c98f ( Farbe 17 ):
       /images/template_2009/menuponits_d5c98f.gif
   #f59f00 ( Farbe 11):
       /images/template_2009/menuponits_orange_f59f00.gif
   #ee7401 ( Farbe 06 ):
       /images/template_2009/menuponits_orange_EE7401.gif
   #e73e0c ( Farbe 01 ):
       /images/template_2009/menuponits_rot_E73E0C.gif
   #e30026 ( Farbe 02 ):
       /images/template_2009/menuponits_E30026.gif

CSS-Angaben für weitere Style-Elemente

Auf den Uni-Seiten werden viele verschiedene Style-Elemente verwendet (Siehe Styleguide), unter anderem Listen- und Contentboxen. Damit sie die Elemente farblich anpassen können, finden Sie die wichtigsten davon in der CSS-Datei unter der Überschrift "Weitere Styleelemente":





2. Das Template

Als nächstes erzeugen Sie ein xsl-Template (z.B. 'template_einrichtung_2014.xsl') mit folgendem Inhalt (vergessen Sie nicht die Pfade anzupassen - z.B. zur CSS-Datei):