cforms mit unterschiedlichen css-Angaben

Für meine Link-Tipp Seite wollte ich gerne das Kontaktformular in die Seitenleiste (Sidebar) einbauen.

Die bisherige css-Datei ist für den Content-Bereich gedacht und somit zu breit.
Also musste ich das neue Kontaktformular mit einer eigenen css-Datei verknüpfen.
Leider scheint das mit cforms nicht direkt möglich.
Auf der FAQ-Seite von cforms fand ich folgenden Hinweis:

I have several forms, how can I deploy multiple themes (CSS)?
* Simply decide for the ‚base‘ cforms theme
* And apply specific styles for the other forms you have deployed
o Note: these specific styles are applied on top of the base styles of the chosen theme

Here are some examples for specific styles:
To change the fieldset background color for form #2:
#cforms2form fieldset {
background:green;
}

Demnach setze ich für ein bestimmtes Formular abweichende Styling-Angaben vor den Kopf-Bereich der css-Datei.
Die Styling-Datei für cforms befindet sich im Plug-In Ordner „cforms-custom“.

Beispiel Aufbau:

  1. #cforms6form {
    width: 250px;
    }
  2. /* */
    /* main 'top-level' form elements */
    /* */
    @import "calendar.css";
  3. .cform {
    width: 410px;
    }
  1. Die abweichenden Angaben für das ausgewählte Kontaktformular (hier Nr. 6)
  2. Der Standard Header, hier mit Import der Kalender-Styling Angaben
  3. Die Standard Angaben der css-Datei

Bei den Styling-Angaben des speziellen Formulars müssen die Klassen auch neu zugeordnet werden.
.cform immer ersetzen mit #cforms6form
Aus .cform label span {
wird dann #cforms6form label span { usw.

So sehen die unterschiedlichen Stylings aus:

Zum Plug-In: cforms-Plug-In von DeliciousDays.com

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.