Wie passe ich das Design von VIMP an meine Anforderungen an?

Wenn Sie das Design von VIMP an Ihren individuellen Styleguide anpassen möchten, gibt es dazu grundsätzlich zwei empfohlene Wege.

Eigener Skin

VIMP bietet die Möglichkeit, das Standarddesign eines Templates mit Skins anzupassen. Skins sind eigene CSS-Dateien, die zum Standard-CSS hinzugeladen werden und dieses ergänzen oder überschreiben.

Wählen Sie dafür zunächst das Template aus, das Sie für Ihr VIMP-Frontend einsetzen möchten. Im Folgenden gehen wir vom Ocean-Template aus.

Erstellen Sie dann im Verzeichnis templates/ocean/css eine neue CSS-Datei, die Ihren eigenen Skin benennt. Wir nennen die Datei hier beispielhaft "myskin.css".

Bearbeiten Sie dann die Datei /templates/ocean/template.yml mit einem Texteditor und fügen Sie den Dateinamen Ihres eben erstellen Skins als neuen Parameter für den Schlüssel "skins" hinzu:

templates:
  ocean:
    name:           Ocean
    engine:         PHP
    skins:          [default, accessibility, myskin]
    layouts:        {default: layout.php, embed: embed.php}
    application:    [frontend]
    mobile:         false
    separator:      '::'

Fertig - nun müssen Sie nur noch den Cache auf dem Server leeren:

./vimp cc

und danach können Sie den neuen Skin im Backend unter Konfiguration -> Basis -> Templates -> Template Skin auswählen.

Wichtiger Hinweis:

In VIMP-Versionen kleiner 6.x benutzen Sie bitte statt ./vimp den Befehl ./symfony in obigem Code.

Änderungen, die Sie in der myskin.css-Datei vornehmen, werden dann ab sofort angewendet und sind updatesicher (d.h. Ihre eigene Skin-Datei bleibt auch bei einem Update erhalten. Sie müssen lediglich den Eintrag in der template.yml-Datei nach einem Update wiederherstellen).

Eigenes Template

Wenn Sie nicht nur Farben, Abstände, Schriftarten, also nicht nur das CSS ändern möchten, sondern auch kleine funktionale Änderungen oder größere Layout-Änderungen, die HTML-Änderungen erfordern, umsetzen möchten, dann erstellen Sie dafür ein eigenes Template.

Wir empfehlen, ein vorhandenes Template als Grundlage zu kopieren. Wie Sie das machen, wird in diesem Artikel beschrieben.

Ein eigenes Template ist ebenfalls updatesicher, allerdings müssen Sie Änderungen, die eine neue Version templateseitig möglicherweise mitbringt, immer manuell in Ihr eigenes Template nachziehen. Ein Update wird dadurch also etwas aufwändiger, allerdings haben Sie so auch mehr Möglichkeiten in der Anpassung Ihres Frontends.