Anpassen der Lesbarkeit mittels css ?

Hallo zusammen
Ich muss für meinen Kunden ein recht umfangreiches Formular erstellen:

http://www.loeffler-web.ch/testumgeb...-formular.html

Gerne würde ich nun für die Lesbarkeit:
- Die einzelnen Kategorien vielleicht farblich abwechseln, dass jedes zweite eine leicht andere Farbe hat
- Die Kategorieboxen sind nach den ersten beiden Spalten ausrichten, also gleich breit sind wie die Boxen des Namens und der Strasse auf der gleichen Zeile
- Die Boxen pro Kategorie von links nach rechts ausgerichtet sind, dass man sieht, dass die Zeile quasi zusammengehört
- Dort wo es nur zwei Boxen anstelle von drei hat, dass die Boxen dann etwas grösser sind
- Der Beispieltext in den Boxen etwas kleiner dargestellt wird

Ich vermute das lässt sich alles mit css erstellen, doch weiss ich leider nicht genau wie und wo anpacken, dass es hier alles so entsprechend übernimmt und auch nur bei diesem Formular angewendet wird.

Besten Dank für eure Hilfe und Unterstützung.

Grüsse
Michi

Moin,

zu Deinem ersten Punkt:
Gib den ganzen Kategorie-Feldern im Formulargenerator allen die selbe CSS-Klasse, z.B. "category". Dann kannst Du die "geraden" so ansprechen:

Code:

---

.category:nth-child(even) {background: #c0ffea;}

---

Grüße,
Stefko

Hallo Stefko

Vielen Dank, dass mit der Farbe klappt schon mal sehr gut. Nun wollte ich auch das Feld noch etwas grösser machen, zb so:

.material-main-content-fieldset {
width: 118%;
background: #c0ffea;
}

So wird nun das Feld grösser, aber auch die Farbe geht aus dem Feld heraus. Wenn ich es wieder auf width: 100% reduziere, dann geht die Farbe zurück, aber auch das Feld wird wieder kleiner.

Hast Du eine Ahnung oder Hinweis, wie ich das entsprechend anpassen kann ?

Vielen Dank und Grüsse
Michi

Deine input-Felder haben alle eine Breite von 75%. Gebe denen mal 100%

Code:

---

.main-content input {
    width: 100%;
}

---

Benutzt Du keinen Web-Developer oder ein ähnliches Browsertool? Damit kannst Du das auch selbst rausfinden... ;)

Hallo stefan-at-work

Vielen Dank, dass habe ich gesehen, doch habe ich es eigentlich mit dem custom.css übersteuert und diese Klasse dann auch übergeben beim entsprechenden Formularfeld. Die Klasse war wie oben beschrieben.

.material-main-content-fieldset {
width: 118%;
background: #c0ffea;
}

Dies scheint es ja auch genommen zu haben, doch nimmt es doch diese

.main-content input {
width: 100%;
}

Aber ich möchte es ja nur auf dieser Seite bei diesem Formular ändern und nicht auf der ganzen Seite. Darum wollte ich es ein wenig anpassen.
Ich weiss leider nicht wie es funktionieren soll, dass es die richtige Klasse nimmt :-(

Grüsse
Michi

Hallo Michi Löffler,

Zitat:

---

Zitat von Michi Löffler

...Ich vermute das lässt sich alles mit css erstellen, doch weiss ich leider nicht genau wie und wo anpacken, dass es hier alles so entsprechend übernimmt und auch nur bei diesem Formular angewendet wird.

---

du kannst dir das Leben wesentlich leichter machen wenn du z.B. ein Tool wie Firebug nutzt.

Viele Grüße
MiTsch

Schaust du mit den Developer Tools, dann wirst du auch die Formular-ID ider das Alias als Klasse im form finden.

Außerdem kannst du dich mal über "CSS selector specifity" informieren. Dadurch, dass du eine vorhandene CSS-Klasse im CSS verwendest ist noch nicht sicher gestellt, dass deine Änderungen auch tatsächlich angewendet werden. Falls andere Angaben mit einer höheren Specifity formuliert wurden, dann werden sie nicht einfach überschrieben!
Aber auch hierbei helden die Developer Tools, da sie dir die Regeln anzeigen, die an der betreffenden Stelle greifen. Daraus kannst du dann ablesen, wie du die Regel überschreiben musst, so dass deine Änderungen auch angenommen werden.

Wie bei allen Themes von Rocksolid verwendest Du für die den ganzen Kram rund ums Ausrichten Rocksolid Columns. Schau da mal in die Anleitung.https://rocksolidthemes.com/de/contao/plugins/columns

Beim Oneo, das Du hier benutzt, gibt es sogar vordefinierte Schriftgrößen, sodass Du die Klasse nur noch im Backend im Formular einzutragen brauchst. Das ist wie Abschreiben früher in der Schule. ;)

Hallo zusammen

Mit der Aufnahme von

.main-content input {
width: 100%;
}

im custom.css hat es geklappt und funktioniert soweit ganz gut.
Danke euch allen.

Grüsse
Michi