- baseportal Dokumentation

Titel:

<h2>Beschreibung</h2>
Anstatt mit den <a href="baseportal.pl?htx=/doku/wiki&kennung=66">Parametern</a> ist es auch möglich die baseportal-eigene Ausgabe der Datenbank mit CSS (<i>Cascading Style Sheets</i>)im Aussehen zu verändern. Mit dem Parameter <c>class=Name</c> werden alle baseportal-Formatierungen entfernt und das Aussehen kann nun mit einem eigenen CSS Block, der vor dem Aufruf von <c><do action=… class=Name></c> im Template notiert wird, angepasst werden. 
 
Es gibt folgende Namen für den direkten Zugriff auf die Elemente: <ul> <li><b>.<i>Name</i></b> Die gesamte Ausgabe (der mit class=... angegebene Name)</li> <ul> <li><b>.menu</b> Alles, &Auml;ndern, Details....</li> <li><b>.page</b> 0, 10, 20...</li> <li><b>.index</b> Die zus&auml;tzliche Index-Reihe</li> <li><b>.arrows</b> Die Symbole zum Bl&auml;ttern</li> <ul> <li><b>.button</b> Buttons</li> <li><b>.selected</b> Momentan ausgew&auml;hlter Button</li> <li><b>.spacer</b> Abstand zwischen den Buttons</li> <li><b>.line</b> Linie unter den Buttons</li> </ul> <li><b>.form</b> &Auml;ndern- und Neu-Formular</li> <li><b>.search</b> Suchen-Formular</li> <li><b>.detail</b> Detailansicht</li> <li><b>.list</b> Listenansicht</li> <ul> <li><b>.data2</b> Jede zweite Zeile in der Listenansicht</li> <li><b>.Action,.Id...</b> Die Spalten (bzw. Zeilen) sind über den Feldnamen ansprechbar</li> </ul> <li><b>.text</b> besondere Texte in der Ausgabe</li> </ul> </ul> 
Nat&uuml;rlich ist es zus&auml;tzlich auch m&ouml;glich Elemente &uuml;ber die Tag-Namen zu erreichen. So w&uuml;rden z.b. mit
 
<code>
.list th {color: red;}
</code>

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 <c>Preis_in__</c> 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. <c>databack</c>), verlieren bei der Benutzung von <c>class=Name</c> ihre Wirksamkeit. Eine Ausnahme bilden dabei <c>padding=...</c> und <c>spacing=...</c> die aufgrund fehlender browserübergreifender CSS-Alternativen weiterhin aktiv sind.
<div class=Text><style> .button {background-color:transparent;} .spacer {background-color:transparent;} .line {background-color:transparent;} .selected {background-color:transparent;} .table {border:solid transparent 0px;} .table th {background-color:transparent} </style> </div> 
<h2>Beispiele</h2>
<h3>Gesamtübersicht</h3>
Hier wurden, um sich besser zurecht zu finden, alle verfügbaren Hauptblöcke unterschiedlich eingefärbt:
 
<code>
<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>
</code> 
<style> .demo2 .menu {background-color:red;} .demo2 .page {background-color:green;} .demo2 .index {background-color:olive;} .demo2 .arrows {background-color:blue;} .demo2 .form {background-color:purple;} .demo2 .search {background-color:aqua;} .demo2 .detail {background-color:silver;} .demo2 .list...{background-color:lime;} .demo2 .text...{background-color:black; color:white;} </style> <div class=demo2> <table cellpadding=2 cellspacing=0 class=menu><tr><td class=spacer></td><td class=button>&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')">Alles</a>&nbsp;</td><td class=spacer></td><td class=button>&nbsp;Ändern&nbsp;</td><td class=spacer></td><td class=selected>&nbsp;<b>Detail</b>&nbsp;</td><td class=spacer></td></tr><tr><td></td><td class=line colspan=5></td><td></td></tr></table>

<table cellpadding=2 cellspacing=0 class=page><tr><td class=spacer></td><td> <span class=text>13981&nbsp;Einträge&nbsp;gesamt:&nbsp;</span> </td><td class=spacer></td><td class=selected>&nbsp;<b>1</b>&nbsp;</td><td class=spacer></td><td class=button>&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')">6</a>&nbsp;</td><td class=spacer></td><td class=button>&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')">11</a>&nbsp;</td><td class=spacer></td><td class=button>&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')">16</a>&nbsp;</td><td class=spacer></td><td class=button>&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')">21</a>&nbsp;</td><td class=spacer></td><td class=button>&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')">26</a>&nbsp;</td><td class=spacer></td><td class=button>&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')">31</a>&nbsp;</td><td class=spacer></td><td class=button>&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')">36</a>&nbsp;</td><td class=spacer></td><td class=button>&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')">41</a>&nbsp;</td><td class=spacer></td><td class=button>&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')">46</a>&nbsp;</td><td class=spacer></td><td class=button>&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')">&gt;&gt;</a>&nbsp;</td><td class=spacer></td></tr><tr><td></td><td class=line colspan=23></td><td></td></tr></table>

<table cellspacing=2 cellpadding=0 border=0><tr><td></td><td> <table><tr><td><table class=list cellspacing=2 cellpadding=4> <tr><th>Aktion</th><th>Staat</th><th>Bundesland</th><th>Regierungsbezirk</th><th>Breitengrad</th><th>Laengengrad</th><th>Autokennzeichen</th></tr> <col class=Aktion><col class=Staat><col class=Bundesland><col class=Regierungsbezirk><col class=Breitengrad><col class=Laengengrad><col class=Autokennzeichen> <tr><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">Ändern</a>&nbsp;|&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')" onclick="return confirm('Diesen Eintrag wirklich löschen: DE?')">Löschen</a></td><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">DE</a></td><td>BW</td><td>Freiburg</td><td>47.8511</td><td>8.85</td><td>KN</td></tr> <tr class=data2><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">Ändern</a>&nbsp;|&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')" onclick="return confirm('Diesen Eintrag wirklich löschen: DE?')">Löschen</a></td><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">DE</a></td><td>RP</td><td>-</td><td>49.7833</td><td>6.6</td><td>TR</td></tr> <tr><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">Ändern</a>&nbsp;|&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')" onclick="return confirm('Diesen Eintrag wirklich löschen: DE?')">Löschen</a></td><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">DE</a></td><td>NW</td><td>K&ouml;ln</td><td>50.7667</td><td>6.1</td><td>AC</td></tr> <tr class=data2><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">Ändern</a>&nbsp;|&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')" onclick="return confirm('Diesen Eintrag wirklich löschen: DE?')">Löschen</a></td><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">DE</a></td><td>BW</td><td>Stuttgart</td><td>48.8333</td><td>10.1</td><td>AA</td></tr> </table></td></tr></table></td></tr></table><table cellspacing=2 cellpadding=0 border=0><tr><td></td><td><table><tr><td><table class=detail><tr><th>Staat:</th><td class=Staat>DE</td></tr> <tr><th>Bundesland:</th><td class=Bundesland>NW</td></tr> <tr><th>Regierungsbezirk:</th><td class=Regierungsbezirk>Köln</td></tr> <tr><th>Landkreis:</th><td class=Landkreis>Kreisfreie Stadt</td></tr> <tr><th>Ort:</th><td class=Ort>Aachen</td></tr> <tr><th>Breitengrad:</th><td class=Breitengrad>50.7667</td></tr> <tr><th>Laengengrad:</th><td class=Laengengrad>6.1</td></tr> <tr><th>Autokennzeichen:</th><td class=Autokennzeichen>AC</td></tr> <tr><th>Postleitzahlen:</th><td class=Postleitzahlen>52062,52064,52066,52068,52070,52072,52074,52076,52078,52080</td></tr> <tr><th>Aktion:</th><td class=Aktion><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">Ändern</a>&nbsp;|&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')" onclick="return confirm('Diesen Eintrag wirklich löschen: DE?')">Löschen</a></td></tr> </table></td></tr></table></td></tr></table>

<span class=text>&nbsp;&nbsp;Eintrag ändern:</span> </p><table cellspacing=2 cellpadding=0 border=0><tr><td></td><td><table><tr><td><table class=form><form name="_baseportal_form0" method="post" enctype="multipart/form-data"><tr><th>Staat:</th><td class=Staat><input type="text" name="Staat:=" size=20 value="DE"></td></tr> <tr><th>Bundesland:</th><td class=Bundesland><input type="text" name="Bundesland:=" size=20 value="NW"></td></tr> <tr><th>Regierungsbezirk:</th><td class=Regierungsbezirk><input type="text" name="Regierungsbezirk:=" size=20 value="Köln"></td></tr> <tr><th>Landkreis:</th><td class=Landkreis><input type="text" name="Landkreis:=" size=20 value="Kreisfreie Stadt"></td></tr> <tr><th>Postleitzahlen:</th><td class=Postleitzahlen><input type="text" name="Postleitzahlen:=" size=20 value="52062,52064,52066,52068,52070,52072,52074,52076,52078,52080"></td></tr> <tr><td></td><td nowrap><input type=submit value="Abschicken"> </td></tr></form></table></td></tr></table></td></tr></table>

<span class=text>&nbsp;&nbsp;Suche:</span> </p><table cellspacing=2 cellpadding=0 border=0><tr><td></td><td><table><tr><td><table class=search><form name="_baseportal_form0" method="post" enctype="multipart/form-data"> <tr><th>Regierungsbezirk:</th><td class=Regierungsbezirk><input type="text" name="Regierungsbezirk~=" size=20 value=""></td></tr> <tr><th>Postleitzahlen:</th><td class=Postleitzahlen><input type="text" name="Postleitzahlen~=" size=20 value=""></td></tr> <tr><td></td><td nowrap><input type=submit value="Abschicken"> </td></tr></form></table></td></tr></table></td></tr></table>

<span class=text>&nbsp;&nbsp;Neuer Eintrag:</span> </p><table cellspacing=2 cellpadding=0 border=0><tr><td></td><td><table><tr><td><table class=form> <form name="_baseportal_form0" method="post" enctype="multipart/form-data"> <tr><th>Staat:</th><td class=Staat><input type="text" name="Staat:=" size=20 value=""></td></tr> <tr><th>Bundesland:</th><td class=Bundesland><input type="text" name="Bundesland:=" size=20 value=""></td></tr> <tr><th>Regierungsbezirk:</th><td class=Regierungsbezirk><input type="text" name="Regierungsbezirk:=" size=20 value=""></td></tr> <tr><th>Landkreis:</th><td class=Landkreis><input type="text" name="Landkreis:=" size=20 value=""></td></tr> <tr><td></td><td nowrap><input type=submit value="Abschicken"> </td></tr></form></table></td></tr></table></td></tr></table> </div>

<hr size=1>
<h3>Übersicht menu,page,index und arrows</h3>
Die Unterelemente von menu, page, index und arrows sind identisch aufgebaut:

<code><style>
.line {height:5px; background-color:red;}
.button {background-color:green;}
.selected {background-color:blue;}
.spacer {width:5px; background-color:silver;}
</style></code>
 <style> .demo3 .line {height:5px; background-color:red;} .demo3 .button {background-color:green;} .demo3 .selected {background-color:blue;} .demo3 .spacer {width:5px; background-color:silver;} </style> <div class=demo3> <table cellpadding=2 cellspacing=0 class=menu><tr><td class=spacer></td><td class=button>&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')">Alles</a>&nbsp;</td><td class=spacer></td><td class=button>&nbsp;Ändern&nbsp;</td><td class=spacer></td><td class=selected>&nbsp;<b>Detail</b>&nbsp;</td><td class=spacer></td></tr><tr><td></td><td class=line colspan=5></td><td></td></tr></table>

<hr size=1>
<h3>Übersicht form, search, detail und list</h3>
Die Unterelemente von <c>form</c>, <c>search</c>, <c>detail</c> und <c>list</c> sind ähnlich aufgebaut. 
Die Überschriften erreicht man über den normalen HTML-Tagnamen <c>th</c>.
Die Feldnamen entsprechen in <c>list</c> den Spalten und in <c>form</c>, <c>search</c> und <c>detail</c> den Zeilen. 
Falls die Feldnamen Sonderzeichen enthalten werden diese in Unterstrich gewandelt. 
<code>
<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>
</code> 
 <style> .demo4 th {background-color:red;} .demo4 .Aktion {background-color:blue;} .demo4 .Staat {background-color:green;} .demo4 .Bundesland {background-color:silver;} .demo4 .Regierungsbezirk {background-color:olive;} .demo4 .Breitengrad {background-color:purple;} .demo4 .Laengengrad {background-color:lime;} .demo4 .Autokennzeichen {background-color:aqua;} </style> <div class=demo4> <table><tr><td><table class=list cellspacing=2 cellpadding=4> <tr><th>Aktion</th><th>Staat</th><th>Bundesland</th><th>Regierungsbezirk</th><th>Breitengrad</th><th>Laengengrad</th><th>Autokennzeichen</th></tr> <col class=Aktion><col class=Staat><col class=Bundesland><col class=Regierungsbezirk><col class=Breitengrad><col class=Laengengrad><col class=Autokennzeichen> <tr><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">Ändern</a>&nbsp;|&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')" onclick="return confirm('Diesen Eintrag wirklich löschen: DE?')">Löschen</a></td><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">DE</a></td><td>BW</td><td>Freiburg</td><td>47.8511</td><td>8.85</td><td>KN</td></tr> <tr class=data2><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">Ändern</a>&nbsp;|&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')" onclick="return confirm('Diesen Eintrag wirklich löschen: DE?')">Löschen</a></td><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">DE</a></td><td>RP</td><td>-</td><td>49.7833</td><td>6.6</td><td>TR</td></tr> <tr><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">Ändern</a>&nbsp;|&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')" onclick="return confirm('Diesen Eintrag wirklich löschen: DE?')">Löschen</a></td><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">DE</a></td><td>NW</td><td>K&ouml;ln</td><td>50.7667</td><td>6.1</td><td>AC</td></tr> <tr class=data2><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">Ändern</a>&nbsp;|&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')" onclick="return confirm('Diesen Eintrag wirklich löschen: DE?')">Löschen</a></td><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">DE</a></td><td>BW</td><td>Stuttgart</td><td>48.8333</td><td>10.1</td><td>AA</td></tr> </table></td></tr></table></td></tr></table><table cellspacing=2 cellpadding=0 border=0><tr><td></td><td><table><tr><td><table class=detail><tr><th>Staat:</th><td class=Staat>DE</td></tr> <tr><th>Bundesland:</th><td class=Bundesland>NW</td></tr> <tr><th>Regierungsbezirk:</th><td class=Regierungsbezirk>Köln</td></tr> <tr><th>Landkreis:</th><td class=Landkreis>Kreisfreie Stadt</td></tr> <tr><th>Ort:</th><td class=Ort>Aachen</td></tr> <tr><th>Breitengrad:</th><td class=Breitengrad>50.7667</td></tr> <tr><th>Laengengrad:</th><td class=Laengengrad>6.1</td></tr> <tr><th>Aktion:</th><td class=Aktion><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">Ändern</a>&nbsp;|&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')" onclick="return confirm('Diesen Eintrag wirklich löschen: DE?')">Löschen</a></td></tr> </table></td></tr></table></td></tr></table>

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>

<table cellspacing=2 cellpadding=0 border=0><tr><td></td><td><table><tr><td><table class=list cellspacing=2 cellpadding=4> <tr><th>Aktion</th><th>Staat</th><th>Bundesland</th><th>Regierungsbezirk</th><th>Breitengrad</th><th>Laengengrad</th><th>Autokennzeichen</th></tr> <col class=Aktion><col class=Staat><col class=Bundesland><col class=Regierungsbezirk><col class=Breitengrad><col class=Laengengrad><col class=Autokennzeichen> <tr><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">Ändern</a>&nbsp;|&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')" onclick="return confirm('Diesen Eintrag wirklich löschen: DE?')">Löschen</a></td><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">DE</a></td><td>BW</td><td>Freiburg</td><td>47.8511</td><td>8.85</td><td>KN</td></tr> <tr class=data2><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">Ändern</a>&nbsp;|&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')" onclick="return confirm('Diesen Eintrag wirklich löschen: DE?')">Löschen</a></td><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">DE</a></td><td>RP</td><td>-</td><td>49.7833</td><td>6.6</td><td>TR</td></tr> <tr><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">Ändern</a>&nbsp;|&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')" onclick="return confirm('Diesen Eintrag wirklich löschen: DE?')">Löschen</a></td><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">DE</a></td><td>NW</td><td>K&ouml;ln</td><td>50.7667</td><td>6.1</td><td>AC</td></tr> <tr class=data2><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">Ändern</a>&nbsp;|&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')" onclick="return confirm('Diesen Eintrag wirklich löschen: DE?')">Löschen</a></td><td><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">DE</a></td><td>BW</td><td>Stuttgart</td><td>48.8333</td><td>10.1</td><td>AA</td></tr> </table></td></tr></table></td></tr></table><table cellspacing=2 cellpadding=0 border=0><tr><td></td><td><table><tr><td><table class=detail><tr><th>Staat:</th><td class=Staat>DE</td></tr> <tr><th>Bundesland:</th><td class=Bundesland>NW</td></tr> <tr><th>Regierungsbezirk:</th><td class=Regierungsbezirk>Köln</td></tr> <tr><th>Landkreis:</th><td class=Landkreis>Kreisfreie Stadt</td></tr> <tr><th>Ort:</th><td class=Ort>Aachen</td></tr> <tr><th>Breitengrad:</th><td class=Breitengrad>50.7667</td></tr> <tr><th>Laengengrad:</th><td class=Laengengrad>6.1</td></tr> <tr><th>Autokennzeichen:</th><td class=Autokennzeichen>AC</td></tr> <tr><th>Postleitzahlen:</th><td class=Postleitzahlen>52062,52064,52066,52068,52070,52072,52074,52076,52078,52080</td></tr> <tr><th>Aktion:</th><td class=Aktion><a href="javascript:alert('Links sind im Beispiel ohne Funktion')">Ändern</a>&nbsp;|&nbsp;<a href="javascript:alert('Links sind im Beispiel ohne Funktion')" onclick="return confirm('Diesen Eintrag wirklich löschen: DE?')">Löschen</a></td></tr> </table></td></tr></table></td></tr></table>

Name: Passwort: Stichworte: Version: 1 2 3 Angebot:

Ohne Änderungen zurück zur Seite

Neue Seite erstellen