CSS (Cascading Style Sheets) - baseportal Dokumentation

Beschreibung

Anstatt mit den Parametern ist es auch möglich die baseportal-eigene Ausgabe der Datenbank mit CSS (Cascading Style Sheets)im Aussehen zu verändern. Mit dem Parameter class=Name werden alle baseportal-Formatierungen entfernt und das Aussehen kann nun mit einem eigenen CSS Block, der vor dem Aufruf von <do action=… class=Name> im Template notiert wird, angepasst werden.

Es gibt folgende Namen für den direkten Zugriff auf die Elemente:

.Name Die gesamte Ausgabe (der mit class=... angegebene Name)

.menu Alles, Ändern, Details....
.page 0, 10, 20...
.index Die zusätzliche Index-Reihe
.arrows Die Symbole zum Blättern

.button Buttons
.selected Momentan ausgewählter Button
.spacer Abstand zwischen den Buttons
.line Linie unter den Buttons

.form Ändern- und Neu-Formular
.search Suchen-Formular
.detail Detailansicht
.list Listenansicht

.data2 Jede zweite Zeile in der Listenansicht
.Action,.Id... Die Spalten (bzw. Zeilen) sind über den Feldnamen ansprechbar

.text besondere Texte in der Ausgabe

Natürlich ist es zusätzlich auch möglich Elemente über die Tag-Namen zu erreichen. So würden z.b. mit

.list th {color: red;}

die Feldnamen bei der Listenausgabe in Rot ausgegeben werden.

Falls Felder Sonder- oder Leerzeichen enthalten werden diese für den CSS-Namen in _ gewandelt, z.B. würde "Preis in $" im CSS Preis_in__ heissen. Bitte beachten: Das Ansprechen der Spalten über die Feldnamen wird von manchen Browsern zur Zeit recht eigenwillig interpretiert.

Alle Parameter die das Aussehen bestimmen (z.b. databack), verlieren bei der Benutzung von class=Name ihre Wirksamkeit. Eine Ausnahme bilden dabei padding=... und spacing=... die aufgrund fehlender browserübergreifender CSS-Alternativen weiterhin aktiv sind.

Beispiele

Gesamtübersicht

Hier wurden, um sich besser zurecht zu finden, alle verfügbaren Hauptblöcke unterschiedlich eingefärbt:

<style>
.menu   {background-color:red;}
.page   {background-color:green;}
.index  {background-color:olive;}
.arrows {background-color:blue;}
.form   {background-color:purple;}
.search {background-color:aqua;}
.detail {background-color:silver;}
.list   {background-color:lime;}
.text   {background-color:black; color:white;}
</style>

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

13981 Einträge gesamt: 1 6 11 16 21 26 31 36 41 46 >>

Aktion Staat Bundesland Regierungsbezirk Breitengrad Laengengrad Autokennzeichen

Ändern | Löschen DE BW Freiburg 47.8511 8.85 KN

Ändern | Löschen DE RP - 49.7833 6.6 TR

Ändern | Löschen DE NW Köln 50.7667 6.1 AC

Ändern | Löschen DE BW Stuttgart 48.8333 10.1 AA

Staat: DE

Bundesland: NW

Regierungsbezirk: Köln

Landkreis: Kreisfreie Stadt

Ort: Aachen

Breitengrad: 50.7667

Laengengrad: 6.1

Autokennzeichen: AC

Postleitzahlen: 52062,52064,52066,52068,52070,52072,52074,52076,52078,52080

Aktion: Ändern | Löschen

Eintrag ändern:

Staat:
Bundesland:
Regierungsbezirk:
Landkreis:
Postleitzahlen:

Suche:

Regierungsbezirk:
Postleitzahlen:

Neuer Eintrag:

Staat:
Bundesland:
Regierungsbezirk:
Landkreis:

Übersicht menu,page,index und arrows

Die Unterelemente von menu, page, index und arrows sind identisch aufgebaut:

<style>
.line {height:5px; background-color:red;}
.button {background-color:green;}
.selected {background-color:blue;}
.spacer {width:5px; background-color:silver;}
</style>

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

13981 Einträge gesamt: 1 6 11 16 21 26 31 36 41 46 >>

Übersicht form, search, detail und list

Die Unterelemente von form, search, detail und list sind ähnlich aufgebaut.
Die Überschriften erreicht man über den normalen HTML-Tagnamen th.
Die Feldnamen entsprechen in list den Spalten und in form, search und detail den Zeilen.
Falls die Feldnamen Sonderzeichen enthalten werden diese in Unterstrich gewandelt.

<style>
th {background-color:red;}
.Aktion {background-color:blue;}
.Staat {background-color:green;}
.Bundesland {background-color:silver;}
.Regierungsbezirk {background-color:olive;}
.Breitengrad {background-color:purple;}
.Laengengrad {background-color:lime;}
.Autokennzeichen {background-color:aqua;}
</style>

Aktion	Staat	Bundesland	Regierungsbezirk	Breitengrad	Laengengrad	Autokennzeichen
Ändern \| Löschen	DE	BW	Freiburg	47.8511	8.85	KN
Ändern \| Löschen	DE	RP	-	49.7833	6.6	TR
Ändern \| Löschen	DE	NW	Köln	50.7667	6.1	AC
Ändern \| Löschen	DE	BW	Stuttgart	48.8333	10.1	AA

Staat:	DE
Bundesland:	NW
Regierungsbezirk:	Köln
Landkreis:	Kreisfreie Stadt
Ort:	Aachen
Breitengrad:	50.7667
Laengengrad:	6.1
Aktion:	Ändern \| Löschen

Eintrag ändern:

Staat:
Bundesland:
Regierungsbezirk:
Landkreis:
Postleitzahlen:

Suche:

Regierungsbezirk:
Postleitzahlen:

Neuer Eintrag:

Staat:
Bundesland:
Regierungsbezirk:
Landkreis:

baseportal-Design (Default Style)

Dier CSS-Code führt zum gewohnten baseportal-Aussehen:

<style>
table, p, body {font-family: arial, helvetica, 'Sans Serif'; font-size:10pt;}
body {color:#000000; background-color:#FFFFFF;}

a {text-decoration:none; color:#0000F0;}
a:hover {color:#d00000;}

.line {background-color:#C0D0F0; height:5px;}
.button {font-size:10pt; text-align:center; background-color:#E0E0E0;}
.selected {font-size:10pt; text-align:center; background-color:#C0D0F0; font-weight:bold;}
.spacer {width:3px;}

.list, .detail {background-color:#F0F0F0;}
.list th, .detail th,  .form th, .search th  {font-weight:normal;}
.list th, .detail th {background-color:#C0D0F0}
.search th, .form th, .detail th {text-align:right;}

.data2 {background-color:#E0E0E0}
.Aktion {font-size: 10px;}
</style>

<do action=all class=demo1>

13981 Einträge gesamt: 1 6 11 16 21 26 31 36 41 46 >>

Eintrag ändern:

Staat:
Bundesland:
Regierungsbezirk:
Landkreis:
Postleitzahlen:

Suche:

Regierungsbezirk:
Postleitzahlen:

Neuer Eintrag:

Staat:
Bundesland:
Regierungsbezirk:
Landkreis:

	Alles		Ändern		Detail

	Alles		Ändern		Detail

	Alles		Ändern		Detail