Ansprache von eigenen Css-Klassen wird ignoriert

[pixelkay]

hallo,

habe die erste Woche Einarbeitung in Contao hinter mir

das größte Problem bereitet mir noch die Ansprache von css-Selektoren, da es oft mehrere Möglichkeiten/Orte gibt eigene CSS-Klassen/Ids zu vergeben..beispielsweise habe ich für ein Kontaktformular dem Absendebutton eine eigene Klasse Button zugewiesen, indem ich im Formulargeneratorfeld-Feld die CSS-Klasse "button" eingetragen habe...

doch wenn ich diese Klasse nun direkt durch einen Eintrag in der CSS-Datei anspreche passiert nix...ein Blick über die ID-Einblendung im Browser sagt mir dann, dass der Klassenname gar nicht zugewiesen wurde

Wie weise ich nun dem Absendebutton eine eigene Klasse zu?

[Napalm]

Wie spricht du denn die Klasse in der CSS-Datei an? So sollte sie drin stehen.

.button {font-weight: bold;}

[tblumrich]

Hi.

ID-Einblendung im Browser? Was soll das sein?
Normal sollte das schon zugewiesen werden und so funktionieren, wie du das beschreibst. Was sagt den der Quelltext? Und wie sprichst du denn den Selektor an?

Gruß
Thomas

[pixelkay]

ja so ähnlich, aber wie gesagt wird die Klasse nicht im Quelltext angezeigt... das Problem ist die generelle Unübersichtlichkeit der ID- und Klassenvergabe..es gibt Felder im Formulargenerator selbst und im Artikel auf mehreren Ebenen...da weiss man schnell nicht mehr was wofür gilt und wo man was eingetragen hat...

[pixelkay]

okay an meinem Formular ist irgendwas schräg, ich habe dem div des Formulars zuvor eine andere Id gegeben..nur finde ich den Ort nicht mehr,wo die ID eingetragen ist ... am besten mach ich nochmal alles neu

[tblumrich]

Hi.

Also ich habs gerade mal probiert... eigene Klassen werden ganz normal zusätzlich zur Standardklasse "submit" eingetragen.
Ansonsten mag das verwirrend erscheinen, das in allen Bereichen was vergeben werden kann, bietet dafür aber maximale Flexibilität. Und oft ist eine eigene Klassenvergabe gar nicht nötig, da wie bemerkt Standardklassen vergeben werden und diese durch kluge Vererbungen und Kombinationen angesprochen werden können.

Gruß
Thomas

[pixelkay]

dass ist der Code

<form action="index.php/kontakt.html" id="f1" method="post" enctype="application/x-www-form-urlencoded">
<div class="formbody">
<input type="hidden" name="FORM_SUBMIT" value="auto_form_1" />
<input type="hidden" name="REQUEST_TOKEN" value="d6ac414b1e38fd7c207ad833f2941d52" />
<input type="hidden" name="MAX_FILE_SIZE" value="2048000" />
<label for="ctrl_4">Firma</label>
<input type="text" name="Firma" id="ctrl_4" class="text" value="" maxlength="50" /><br />
<label for="ctrl_3" class="mandatory"><span class="invisible">Pflichtfeld</span> Name<span class="mandatory">*</span></label>
<input type="text" name="Name" id="ctrl_3" class="text mandatory" value="" maxlength="50" /><br />

<label for="ctrl_5" class="mandatory"><span class="invisible">Pflichtfeld</span> E-Mail<span class="mandatory">*</span></label>
<input type="text" name="email" id="ctrl_5" class="text mandatory" value="" maxlength="50" /><br />
<label for="ctrl_1" class="mandatory"><span class="invisible">Pflichtfeld</span> Betreff<span class="mandatory">*</span></label>
<input type="text" name="Betreff" id="ctrl_1" class="text mandatory" value="" maxlength="50" /><br />
<label for="ctrl_2" class="mandatory"><span class="invisible">Pflichtfeld</span> Nachricht<span class="mandatory">*</span></label>
<textarea name="Nachricht" id="ctrl_2" class="textarea mandatory" rows="10" cols="1"></textarea><br />

<label for="ctrl_7" class="mandatory"><span class="invisible">Pflichtfeld</span> Sicherheitsabfrage<span class="mandatory">*</span> <span class="invisible">Bitte addieren Sie 6 und 3.</span></label>
<input type="text" name="ced4c388b25ecd8aad6ac8a88c43075c7" id="ctrl_7" class="captcha mandatory" value="" maxlength="2" /> <span class="captcha_text">Bitte addieren Sie 6 und 3.</span><br />
<div class="submit_container">
<input type="submit" id="ctrl_8" class="submit" value="Nachricht senden" />
</div>
</div>
</form>

wenn ich das css durch einen Imagebutton austauschen will muss ich doch besser den ID als die Klasse ansprechen oder?

[tblumrich]

Ja, das ist der Code, der ausgegeben wird, richtig.
Was genau willst du denn überhaupt erreichen? Der Absendebutton soll eine Grafik sein, oder wie? Das könntest du doch schon direkt im Formulargenerator erledigen - da gibts direkt eine Checkbox.

Wenn du darunter eine Klasse vergibst, bekommt dein Absendebutton eben diese Klasse.

Und wenn du hinschaust, hat dein Absendebutton schon eine Klasse namens "submit". Dazu würde dein eigener Klassennamen kommen.

Du könntest diesen z.b. mit input.submit {eigenschaft:wert;} ansprechen. Das gilt dann natürlich für alle Absendebuttons in deiner Installation. Wenn du das verhindern willst, kommt dein eigener Klassenname ins Spiel und du nimmst (anstatt) z.B. input.deineklasse.

Es gibt durch die Vererbungen und Kombinationen noch weit mehr Möglichkeiten..., die je nachdem Vor- und Nachteile haben - deswegen lohnt es sich, sich mal intensiver mit CSS auseinanderzusetzen.

Gruß
Thomas