Individuelle CSS-Anpassungen
Visforms erzeugt eine klare HTML-Struktur und CSS-Struktur. Diese Strukturen unterstützen und vereinfachen in fast allen Fällen, punktgenaue individuelle CSS-Anpassungen. Es ist empfehlenswert, die notwendigen CSS-Selektoren möglichst einfach und treffsicher zu formulieren.
Dieser Abschnitt listet alle notwendigen Informationen in übersichtlichen Tabellen, um Sie bei der Formulierung der CSS-Selektoren zu unterstützen. Die in den Tabellen genannten CSS-Klassen können Sie verwenden, um den anzupassenden Bereich, einfach und direkt mit CSS-Selektoren anzusprechen.
Individuelle JavaScript-Anpassungen
Auch im Falle von JavaScript-Anpassungen ist diese Dokumentation der HTML-Struktur und CSS-Struktur nützlich. Denn für JavaScript-Anpassungen ist es ebenfalls von großem Verteil, direkt und spezifisch die notwendigen HTML-Bereiche ansprechen zu können.
Einfügen von CSS-Anpassungen und JavaScript-Anpassungen mit Visforms
Es gibt zahlreiche Möglichkeiten, auf mehr oder weniger einfachen Wegen, Visforms individuelles CSS und JavaScript hinzuzufügen.
Einen Überblick bietet dieser Abschnitt:
JavaScript und CSS hinzufügen.
Ganz besonders einfach erfolgt dabei das Hinzufügen von individuellem CSS und JavaScript mit den
Visforms Front-End-Web-Assets.
Die 3 HTML-Hauptbereiche
Äußerer HTML-Bereich
Visforms erzeugt immer ein äußerstes div-Element: <div class="visforms …"></div>.
CSS-Klassen, die in diesem äußersten div-Element erscheinen, bilden den
äußersten HTML-Bereich.
Innerer HTML-Bereich
Je nachdem, ob das Formular oder die gespeicherten Übertragungen (Formular-Daten) angezeigt werden, erzeugt Visforms im Weiteren unterschiedliche HTML-Elemente.
CSS-Klassen, die in diesen inneren HTML-Elementen erscheinen, bilden den
inneren HTML-Bereich:
- form-Element
- table-Element
- dl-Element
Feld-nahe HTML-Bereich
Alle HTML-Element, um ein einzelnes Formular-Feld herum erzeugt werden, bilden den Feld-nahen HTML-Bereich.
Visforms besondere Strategie der passiven Integration
Bei Layout-Fragen verfolgt Visforms eine besondere Strategie der passiven Integration in das gewählte Joomla Site-Template.
Visforms versucht sich so weit wie möglich ins Look&Feel Ihrer Webseite anzupassen, indem es nur das minimale allernötigste eigene CSS mitbringt.
Die meisten Formatierungsregeln kommen daher aus dem CSS Ihres Templates.
Einführung in Layout-Konfiguration und Layout-Fragen
Wir empfehlen die folgenden Abschnitte in der Dokumentation als Einführung in Layout-Konfiguration und Layout-Fragen.
Grundlegende Layout-Fragen und Settings
Die grundlegenden Layout-Fragen und Settings sind:
- welches UI-Framework das gewählte Template verwendet,
- welches UI-Framework in Visforms eingestellt ist (Formular-Konfiguration, Reiter ‘Erweitert’, Gruppe ‘Layout’),
- welches Sublayout in Visforms eingestellt ist, falls vorhanden (Formular-Konfiguration, Reiter ‘Erweitert’, Gruppe ‘Layout’).
Die Aufgaben des Templates
Es ist Aufgabe des Templates, die Anzeige zu steuern und auch responsiv zu reagieren.
Ausschlaggebend ist auch, ob und wie weit das Template die Anforderungen des UI-Frameworks auch tatsächlich umsetzt.