Layout in kibeo mit Cascading Stylesheets (CSS)

Den HTML-Seiten, die durch die Templates generiert werden, können Cascading Stylesheets (CSS) zugeordnet werden.

 

Automatisches Formatieren des aktiven Menüpunktes .activ

Beim Generieren der HTML-Seiten werden Links untersucht. Zeigt der Link auf die eigene Seite, wird ein CSS-Tag eingefügt, mit dessen Hilfe der aktuelle Menüpunkt hervorgehoben werden kann.

Aus dem HTML-Code

<a href=seite1.html>Seite1</a>
<br>
<a href=seite2.html>Seite2</a>

wird für "seite1.html" generiert:

<a href=seite1.html><font class=activ>Seite1</font></a>
<br>
<a href=seite2.html>Seite2</a>

Damit kann der aktive Navigationspunkt mit folgendem CSS-Befehl farbig hinterlegt werden:

<style type="text/css">
.activ { background-color:#9999CC; }

Formatierung der Eingabefelder

Jedes Eingabefeld wird mit der Klasse Input markiert, sodass z.B. durch folgenden CSS-Eintrag das Aussehen der Eingabefelder beeinflusst werden kann:

.Input { font-family: arial, helvetica, sans-serif;
font-size: 100%; font-weight:bold; background-color: #DDDDDD;
color: #555555 }

Beispiel einer CSS-Datei

Beispiel CSS-Befehle in menu-start.incl

<style type="text/css">
.activ { background-color:#9999CC; }
a:link { text-decoration:none; color:#000000; }
a:visited { text-decoration:none; color:#000000; }
a:hover { text-decoration:none; background-color:#ff0; }
h1 { font-weight:bold; font-size:150%; }
h2 { font-weight:normal; font-size:120%; }
</style>

Aktualisiert am 29.05.2008 - Startseite           ▲ nach oben