Quad Design und Titel im Header

[Tukey]

Hallo,
ich habe zwei Fragen, die in gewisserweise zusammenhängen:

1) Gibt es eine Beschreibung des Quad Design, wobei es mir mehr um die Aufteilung der Seite in vier Blöcke als um die Widgets geht (wobei hier auch eine kurze Einführung zusätzlich zu der vorhandenen Beschreibung der Widgets nett wäre).

2) Ich hätte gerne auf jeder Seite im Header zwischen dem Menü und dem smartVISU Logo ein Titel (möglichst zentriert) und das sowohl auf einer "normalen" Seite (basierend auf base.html) als auch auf einer Quad Design Seite (basierend auf quad_root.html). Irgendwie bekomme ich eine saubere Positionierung (sowohl horizontal als auch vertikal) nicht hin, bzw. es sieht auf den Seiten unterschiedlich aus. Hat dazu evtl. jemand eine Idee?

Viele Grüße und besten Dank
Stefan

[wvhn]

Hi Stefan,

zu 1): es gibt die umfassende inline-Doku, sowie die Beispielseiten. Zudem kann man sich die deutschsprachige Kurzanleitung herunter laden bzw. auf smartvisu.de ansehen. Die Quad-Widgets basieren hinsichtlich der Funktion auf den Standard-Widgets von smartVISU und übersetzen diese in das Layout von Quad. Hier sind die langen Parameterlisten gewöhnungsbedürftig, mit denen Dir der Widget Assistent hilft.

zu 2): für die Kopfzeile gibt es im Standard-Menü die Klassen .ui-header (alles), .ui-left (Menü) und .ui-right (smartVISU-Logo und Uhrzeit). Ausschnitt aus der ./pages/base/base.css:

.ui-page > .ui-header {
   text-align: center;
   height: 62px;
   border-bottom: 1px solid #222;
   min-width: 320px;
}
.ui-page > .ui-header .ui-left {
   margin: 5px 0 0 2px;
  float: left;
}
.ui-page > .ui-header .ui-right {
   max-width: 160px;
   float: right;
   margin: 9px 6px 0 0;
}

Im Quad sind diese Klassen verändert und um die Klasse .ui-title ergänzt. Ausschnitt aus der ./pages/base/quad.css:

.quad > .ui-header .ui-title {
   display: inline-block;
   margin: 10px 0 6px 0;
   font-weight: bold;
}
.quad > .ui-header {
   display: inline-block;
   margin: 2px 0 6px 0;
}
.quad.ui-right {
   margin: 1px 5px 2px 0!important;
}

Für die vertikalen Abweichung dürften vor allem die unterschiedlichen "margin"-Werte verantwortlich sein. Die Klasse .ui-title müsstest Du im Standard-Layout ergänzen.

Alle diese Eigenschaften kannst Du in Deiner eigenen visu.css eintragen und dort verändern. Du brauchst also die Originaldateien nicht anzufassen.

Gruß
Wolfram