Design

Aus CavoxCms Wiki

(Weitergeleitet von Designs)
Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

Übersicht

Designs sind im System im Verzeichnis /designs zu finden. Ein Design besteht aus folgenden Dateien und Verzeichnissen:

  • Verzeichnisse:
    • css/
    • images/:
    • views/mymodule: In diesem Verzeichnis sind Template-Dateien vorhanden, welche die Standard-Templates von Modulen "überschreiben".
  • Dateien:
    • index.html
    • print.html
    • popup.html
    • *_mobile.html, für alle oben genannten html- und css-Dateien kann mit _mobile als Postfix eine mobile Version definiert werden.

Template Variabeln

Das System verwendet die HTML-Datei als Template. Aus diesem Grund kann in der HTML-Datei auf dynamische Daten zugegriffen werden. Natürlich kann ein Design, wie jedes Template, auch sprachabhängige ausgaben machen, dazu muss das Array $lang verwendet werden, und die entsprechenden Sprachdateien vorhanden sein. Ein Design sollte alle Sprachen der Website unterstützten, da das Design nur pro Sektion, nicht aber je nach Sprache festgelegt werden kann.

Beispiel zum Einfügen des Titels und Inhalts: 

<head>
	<title>{$page.title}</title>
</head>
<body>
	{$page.content}
</body>

page

Stellt ein Array mit den Werten der aktuellen Seite zur Verfügung.

  • title = Titel
  • subtitle = Untertitel
  • metatitle = Meta-Titel (verwendet in den Meta-Tags)
  • content = Inhalt der Seite
  • language = Sprache der Seite
  • creator = ID des Seitenerstellers
  • TODO

params

Beim Bearbeiten einer Seite können unter Erweitert > Parameter angegeben werden, auf die das Design zugreifen kann. Diese können in der Variabel params ausgelesen werden.

Kann dann im Template z.B. so verwendet werden: 

{if $params.myvalue}
	my special design modification
{/if}

design

Pfad zum Designverzeichnis, also z.B. designs/abc

user

Array mit folgenden Werten:

  • language = Sprache des aktuellen Benutzers
  • username = Aktuell eingeloggter Benutzer

infos

Array das aus der Datei design.txt des Designs generiert wurde.

Einstellungsdatei

Die Einstellungsdatei eines Designs muss immer design.txt heissen und enthält fixe Einstellungen fürs Design. Folgende Einstellungen werden vom System verwendet:

Sektion 'content'

Diese Sektion enthält Werte, die den Inhaltsbereich des Designs betreffen.

Beispiel: Roter Hintergrund und 300px breiter Inhaltsbereich: 

[content]
bgcolor=FF0000
width=300
  • bgcolor = Definiert die Hintergrundfarbe des Inhaltsbereichs. Thumbnails werden automatisch mit dieser Hintergrundfarbe erstellt. Der Standardwert für den Inhaltshintergrund ist weiss (#FFFFFF).
  • width = Angabe über die Breite des Content-Bereichs (Ganzzahl in Pixel, ohne Einheit). Gibt die Breite des Bereichs, wo {$page.content} steht. Wird z.B. für die Erstellung von Thumbnails mit der gesamten Content-Breite verwendet.

Stylesheets

In der HTML-Datei (z.B. index.html) werden die Stylesheet-Dateien mit folgender Funktion eingefügt: 

[[system.head]]

Dies fügt alle weiter unten besprochenen CSS-Dateien im HTML-Code richtig ein (Reihenfolge beachten). Desweiteren wird auch das Javascript eingebunden. Falls Benutzerdefinierte CSS-Dateien eingebunden werden müssen kann dies so gemacht werden: 

<link href="pfad/eigene/css_datei.css" rel="stylesheet" type="text/css" />

Beginnt der Pfad dabei mit css/ wird dieser automatisch mit dem Pfad des Designs erweitert (z.B. designs/mydesign/css/).

Dabei werden die Dateien

  • style.css
  • menus.css
  • layout.css

in folgender Reihenfolge eingefügt:

  1. Suche nach der Datei für mobile Geräte wenn gewünscht. z.B. „mydesign/css/style_mobile.css“
  2. Suche danach nach der gesuchten Datei im Design-Verzeichnis. z.B. „mydesign/css/style.css“
  3. Es wird das Standarddatei aus dem System-Modul geladen. z.B. „modules/system/css/style.css“

inputs.css

Aussehen der Formulareingabefelder. Hier wird normalerweise das System-CSS verwendet.

style.css

Definition von Textgrössen, Überschriften, Bildern usw.

menus.css

Enthält CSS-Definitionen für Menüs. Im Design kann die Navigation mit 

[[system.navigation css=xyz]]

generiert werden. Wenn css nicht gesetzt wird, wird als Name automatisch menu genommen. Im CSS wird das Menü wiefolgt angepasst:

Klassen

Mit dem Paramter css (oben beschrieben) kann auch eine andere Unterklasse anstatt xyz (wie hier dargestellt) verwendet werden. So können verschiende Menüs definiert werden.

Gesamtes Menü: 

.xyz{}

Eine Zeile (Listelement): 

.xyz li{}

Link: 

.xyz a{}

Level 2. Anstelle von 2 kann jedes Level angegeben werden: 

.xyz .level2 a{}

Aktives Listenelement im Menü: 

.xyz li.active a{}

Inaktives Listenelement im Menü: 

.xyz li.inactive a{}

Aussehen beim Überfahren des Listenelements 

.xyz li a:hover{}

layout.css

Definitionen für Listen, Formulare, Blöcke und Detailansichten.

Platzhalter für Designs

Die hier aufgeführten Platzhalter sind nur Modulaufrufe. Hier werden allerdings nur die für Designentwickler relevanten und wichtigen dargestellt. Weitere Platzhalter sind in den Modulbeschreibungen direkt zu finden.

Mehrsprachig

Da Designdateien (z.B. index.html) auch Templates sind, können Sie auch in mehrere Sprachen übersetzt werden. Dazu muss nur eine Sprachdatei (z.B. index.de.txt) erstellt werden, und die neuen Platzhalter im Design verwendet werden.

Javascript

Das System benötigt einige eigene Javascript-Funktionen. Diese werden in der javascript.php Datei generiert, welche automatisch eingebunden wird, wenn 

[[system.head]]

aufgerufen wird. Diese Funktion bindet auch alle CSS-Dateien ein, muss also nur einmal aufgerufen werden. Als Designer müssen Sie diese Javascript-Funktionen nicht kennen, sie müssen nur eingebunden werden, damit auch alles richtig funktioniert.

Links

Von „http://www.cavoxcms.ch/wiki/index.php/Design“
Persönliche Werkzeuge