Informations-Management
 
 
Hintergrundbild
Hintergrundbild
University from A-Z
Bielefeld University > 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.

Die Stylesheet-Datei

Eine css-Datei (z.B. 'einrichtung.css') muss folgende Inhalte enthalten (Farbe anpassen):
#kopf {
  background: #f59f00;
}

#history a {
  color : #f59f00;
}

.Button {
  border:1px solid #f59f00;
}

#menubereich a
{
  border-bottom-color: #f59f00;
}

Sollen die grünen Menüpunkte auch ausgetauscht werden, dann muss ein gif erzeugt werden und folgender Code der css-Datei hinzugefügt werden:

.titelimg {
  background-image: url(/images/template_2009/menuponits_orange_f59f00.gif) left no-repeat;
}

.menuimgorange {
  background-image: url(/images/template_2009/menuponits_orange_f59f00.gif) left no-repeat;
}

.menuimggrey {
  background-image: url(/images/template_2009/menuponits_gray.gif) left no-repeat;
}

ul.menu-left li a.active {
  background: url(/images/template_2009/menuponits_orange_f59f00.gif) no-repeat;
  background-position: 0px 4px; }


Template

Als nächstes erzeugen Sie ein xsl-Template (z.B. 'template_einrichtung_2009.xsl') mit folgendem Inhalt:

<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

 

<!-- Hier wird das Uni-Haupttemplate integriert -->

<xsl:import href="/unitemplate_2009.xsl"/>

 

<!-- Hier können Sie eine eigene css-Datei anführen, den Pfad anpassen -->

<xsl:template mode="unibi:head" match="dummy">
<xsl:apply-imports/>
<link type="text/css" href="/sport/arbeitsbereiche/ab_ii/einrichtung.css" rel="stylesheet"/>
</xsl:template>

 

<!-- Body -->

<xsl:template name="unibi:body">

<body>

 

<!-- Logo, Kopf und obere Funktionen -->

<div id="logo"><a href="http://www.uni-bielefeld.de">
<img src="/images/template_2009/logo.jpg" alt="gr&uuml;nes Logo der Universit&auml;t Bielefeld" border="0" width="185px" height="72px"/></a></div>

<div id="titel">
<gtext bgcolor="ffffff" font="Fagopro-bold" fgcolor="#333333" fontsize="16" crop="">Titel-Überschrift </gtext>
</div>

<!-- Setzen Sie diesen Terminus statt 'Titel-Überschrift' ein, wenn dynamisch der Seitentitel der index-Datei angezeigt werden soll -->
<!-- <xsl:value-of select="$title"/> -->

<!-- die farbige Kopfleiste -->

<div id="kopf">
</div>

<!-- wenn in dem Ordner 'images' eine Datei mit Namen 'logo_einr.jpg' liegt, dann wird diese angezeigt, wenn nicht, bleibt das Feld leer -->

<div id="logo_einr">
<if exists='images/logo_einr.jpg'>
<img src="images/logo_einr.jpg" alt="Logo der Einrichtung"/>
</if>
<else>&nbsp;</else>
</div>

<!-- wenn in dem Ordner 'images' eine Datei mit Namen 'piktogramm.gif' liegt, dann wird diese angezeigt, wenn nicht, bleibt das Feld leer -->

<div id="piktogramm">
<if exists='images/piktogramm.gif'>
<img src="images/piktogramm.gif" alt="Thematisches Piktogramm"/>
</if>
<else>&nbsp;</else>
</div>

<!-- wenn in dem Ordner 'images' eine Datei mit Namen 'kopfbild_links.jpg' liegt, dann wird diese angezeigt, wenn nicht, wird das Standard-Bild angezeigt -->

<div id="Kopfbild1">
<if exists='images/kopfbild_links.jpg'>
<img src="images/kopfbild_links.jpg" alt="Hintergrundbild"/>
</if>
<else>
<img src="/images/template_2009/home_foto1.jpg" alt="Hintergrundbild" />
</else>
</div>

<!-- wenn in dem Ordner 'images' eine Datei mit Namen 'kopfbild_rechts.jpg' liegt, dann wird diese angezeigt, wenn nicht, wird das Standard-Bild angezeigt -->

<div id="Kopfbild2">
<if exists='images/kopfbild_rechts.jpg'>
<img src="images/kopfbild_rechts.jpg" alt="Hintergrundbild"/>
</if>
<else>
<img src="/images/template_2009/home_foto2.jpg" alt="Hintergrundbild" />
</else>
</div>

<!-- Uni von A-Z -->

<div id="linkkopf"> <a href="http://www.uni-bielefeld.de/Universitaet/Serviceangebot/Uni%20A-Z/index.html">Uni von A-Z</a></div>

<!-- Die Ausklappmenüs -->

<div id="pulldown"><insert file='/Universitaet/pdmenu_neu.html'/></div>

<!-- wenn es zwei oder mehrere Sprachvarianten gibt, werden diese oben mit Flaggen angezeigt -->

<div id="language"><xsl:call-template name="unibi:select-language"/></div>

<!-- die so genannte Brotkrumenleiste unterhalb des Kopfes -->

<div id="history">
<table width="100%" height="34px" border="0" cellpadding="0" cellspacing="0" valign="middle">
<tr>
<td><xsl:call-template name="ua:history"/></td>
</tr>
</table>
</div>

<!-- das Suchfeld -->

<div id="suche">
<form action="http://search.uni-bielefeld.de/index.php"
method="get" accept-charset="ISO-8859-1, ISO-8859-2, UTF-8">

<input value="" class="Feld" size="19" name="q[0][c]" type="text"/>
<input value="all" name="q[0][d]" type="hidden"/>
<input
value="" name="q[1][c]"
type="hidden"/>
<input value="url" name="q[1][d]" type="hidden"/>&nbsp;&nbsp;<input value="Suche" class="Button" type="submit"/>

</form></div>

<!-- Content - der Hauptinhalt -->

<div id="contentwide">
<div id="contenthauptspalte">
<xsl:apply-templates/></div><br/><br/>
<div id="fussstrich">&nbsp;</div>
<div id="fussmenu"><xsl:call-template name="fwg:footer"/><br/><br/></div>
</div>

<!-- Menuebereich -->

<div id="menubereich">

<div id="menulinks">

<!-- Die Überschrift über dem Menü -->

<h1 style="border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #b3c834; padding-top:0px; padding-bottom:4px; margin-top:-3px;">
<gtext font="Fagopro" fontsize="15" fgcolor="#000000" split='split'>
Navigation&nbsp;</gtext></h1>

<xsl:call-template name="unibi:navmenu"/><br/><br/>

<xsl:call-template name="pus:menu-left">
<xsl:with-param name="menu-left-file" select="$left-menu-file"/></xsl:call-template><br/></div>
<br/>

<!-- Zusätzliche Menues, nur wenn sie im Ordner als Dateien existieren. Die Dateien left2_titel.txt bzw. left3_titel.txt erzeugen die Überschriften. -->

<if exists='left2.menu'>
<div id="menulinks2"><strong><insert file="left2_titel.txt"/></strong>
<br/><xsl:call-template name="pus:menu-left2">
<xsl:with-param name="menu-left-file2" select="$left-menu-file2"/></xsl:call-template><br/></div><br/>
</if>
<else>
&nbsp;
</else>

<if exists='left3.menu'>
<div id="menulinks3"><strong><insert file="left3_titel.txt"/> </strong>
<xsl:call-template name="pus:menu-left3">
<xsl:with-param name="menu-left-file3" select="$left-menu-file3"/></xsl:call-template>
</div><br/>
</if>
<else>
&nbsp;
</else>

<if exists='left4.menu'>
<div id="menulinks4"><strong><insert file="left4_titel.txt"/> </strong>
<xsl:call-template name="pus:menu-left4">
<xsl:with-param name="menu-left-file4" select="$left-menu-file4"/></xsl:call-template>
</div><br/></if>
<else>
&nbsp;
</else>

 

<!-- Wenn ein 'right.menu' existiert, dann wird dieses rechts angezeigt -->

<if exists='right.menu'>
<div id="menuboxrechts">
<if exists='right_titel.txt'>
<h1 style="border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #b3c834; padding-top:5px; padding-bottom:4px; margin-top:-3px;">
<gtext font="Fagopro" fontsize="15" fgcolor="#333333" split='split'><insert file="right_titel.txt"/> </gtext></h1>
</if>
<else>
<h1 style="border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #b3c834; padding-top:5px; padding-bottom:4px; margin-top:-3px;">
<gtext font="Fagopro" fontsize="15" fgcolor="#ffffff" split='split'>.</gtext></h1>
</else>
<xsl:call-template name="pus:menu-right">
<xsl:with-param name="menu-right-file" select="$right-menu-file"/></xsl:call-template>
</div>
</if>
<else>
&nbsp;
</else>

</div>

</body>

<!-- Body Ende -->

</xsl:template>

<!-- H1 bis H3 als gtext in Fago. Hier sollte bei h1 und h2 nur die Farbe ('border-bottom-color') angepasst werden, sofern eine andere Kopf-Frabe ausgewählt wurde -->

<xsl:template match="h1">
<a name="{generate-id(.)}"/>
<h1 style="border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #b3c834; padding-top:0px; padding-bottom:4px; margin-top:-3px;">
<gtext font="Fagopro" fontsize="15" fgcolor="#000000" bold="" split='split'>
<rxml:copy-attributes/>
<xsl:apply-templates/>
</gtext>
</h1>
<xsl:call-template name="unibi:insert-missing-p"/>
</xsl:template>

<xsl:template match="h2">
<h2 style="border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #b3c834; padding-top:0px; padding-bottom:4px; margin-bottom: 4px; margin-top:-3px;">
<gtext font="Fagopro" fontsize="15" fgcolor="#000000" bold="" split='split'>
<xsl:apply-templates/>
</gtext>
</h2>
</xsl:template>

<xsl:template match="h3">
<h3 style="border: none; padding-top:4px; padding-bottom:4px;">
<gtext font="Fagopro" fontsize="15" fgcolor="#000000" bold="" split='split'>
<xsl:apply-templates/>
</gtext>
</h3>
</xsl:template>

</xsl:stylesheet>