css_styles_content: Formulare werden falsch dargestellt

Hallo,

ich kapiere es einfach nicht. Wenn ich über Include Static die CSS Styled Content aktiviere, dann wird die Darstellung meines Mailformulars völlig zerschossen:

• 1. oberhalb der Feldbeschriftung kommt so ein Blaken, der die input-Felder nach rechts aus der seite heraus rutschen lässt.

  2. Formularelemente mit Radiobuttons werden völlig anders dargestellt als der Rest der Seite.

  3. Mein Formular steht am Ende der Seite. Die Formularelemente der mit den Radiobuttons werden aber am Anfang der Seite dargestellt.

  4. Die Feldbeschriftung zu den Radioelemeneten werden doppelt dargestellt

Gibts nicht eine gescheite Anleitung zu css-Styles-content. wo ich u. a. auch auf bestimmte CSS-Klassen (z.B. auf die Class csc-mailform-radio) Am besten auf deutsch.

hast du auch das entspr. stylesheet eingebunden?

zu finden (ab v4 glaub ich) unter: \typo3\sysext\css_styled_content\css\example.css

dann einfach aus dem quelltext ein element schnappen (csc-mailform o.s.ä.) und damit im css rum spielen!

Früher oder später kommt der aha-effekt =)

Gruß
Info

Hallo InforMedic,

danke für deine Antwort. Aber ich habe schon die example.css nach meinen Anforderungen angepasst und eingebunden. Soweit geht alles ganz gut, nur eben die Anzeige der Formularelemente für Radiobuttons spinnen. Die bekommen immer die Beschriftung/Legende doppelt angezeigt (s. Link.)

http://www.netkampagne.de/screenshot.jpg">
Zum einen kann ich nirgends finden, wo ich die Formalurelemente per CSS anpasssen kann (IMHO nicht in dem example.css) und zum anderen bin ich mir nicht sicher, was an den Radioelementen falsch sein könnte, das die Legende zweimal angezeigt wird?

So sehen die Angaben in meinem Inhaltelement für das Formular aus:

Teilnahme mit Übernachtung? | *Uebernachtung=radio | Ja, Nein

Danke

Robbi

hhhmmmmm, also nach screenshot sieht das für mich so aus, als hättest du eine individuelle Überschrift UND eine Überschrift in einem fieldset!

Wie hast du denn dieses Formular erstellt? Als extension? Als reines html eingebunden?

Könntest Du mal das stückchen quelltext posten?

Letztendlich kannst Du händisch eigene class und id angaben machen und dann entsprechend deinem css hinzufügen?!? Erzähl dir damit aber wohl nix neues?
#paralyzed#

Gruß
Info

Irgendwie raff ich es einfach nicht. Ich habe das Formular ganz normal über das Inhaltselement "Mailfomular" erstellt. Ist das "CSS Styled Content" aktiviert, bekomme ich die Legende zweimal. Und ich weiß nicht, wo ich das abstellen kann.

Ich habe jetzt mal in meiner CSS-Datei eine class "csc-mailform-radio { }" erstellt (also einfach ohne Inhalt in den geschweiften Klammern), aber es hat bisher nicht gefruchtet. Vielleicht bin ich auch schon ein wenig betriebsblind.

Hier nochmal ein Auszug aus dem HTML-Quellcode zu Formularbereich:

<fieldset class="csc-mailform">
<table><tr>
<td class="formlabel">
<label for="mailformname">Name:</label>
</td>
<td class="csc-form-fieldcell">
<input type="text" name="name" id="mailformname" size="40" value="" />
</td>
</tr></table>
<table><tr>
<td class="formlabel">
<label for="mailformaddress">Adresse:</label>
</td>
<td class="csc-form-fieldcell">
<textarea name="address" id="mailformaddress" cols="40" rows="5"></textarea>
</td>
</tr></table>
<table><tr>
<td class="formlabel">
<label for="mailformemail">Email:</label>
</td>
<td class="csc-form-fieldcell">
<input type="text" name="email" id="mailformemail" size="40" value="" />
</td>
</tr></table>
<div class="csc-mailform-field">
<label for="mailformuebernachtung">Übernachtung</label> 
<span class="csc-mailform-radio">
<fieldset id="mailformuebernachtung">
<legend>Übernachtung</legend>
<input type="radio" name="uebernachtung" id="mailformuebernachtungJa" value="Ja" class="csc-mailform-radio" />
<label for="mailformuebernachtungJa">
<span class="csc-form-radio">Ja</span><br />
</label>
<input type="radio" name="uebernachtung" id="mailformuebernachtungNein" value="Nein" class="csc-mailform-radio" />
<label for="mailformuebernachtungNein">
<span class="csc-form-radio">Nein</span><br />
</label>
</fieldset></span>
</div>
<table><tr><td class="formlabel"></td>
<td class="csc-form-fieldcell">
<input type="submit" name="formtype_mail" id="mailformformtype_mail" value="Send form!" class="csc-mailform-submit" />
</td>
</tr></table>
</fieldset>

Ich hoffe, es ist einigermaßen leserlich.

Danke, Robbi

Mensch Kerle 😉
Du hast auch 2 labels angegeben!! Einmal ausserhalb und einmal innerhalb eines Fieldsets

das muss weg (zeile 27) dann klappts auch mitm Nachbarn:

<label for="mailformuebernachtung">Übernachtung</label>

Gruß
Info

Zum Thema css_styled_content sieh dir mal den letzten Post von Just2B an:
#63193

Dein Mailform wird in Tabellen gerendert, was mir sagt das du content(default) verwendest. Ich würde diese Template aus dem root tpl. rausnehmen und nur css_styled_content verwenden - soweit du css willst!! =)

Gruß
Info

Danke Info,

den Post habe ich auch schon gelesen.

• - ich habe content(default) raus genommen
  - ich hatte über tt_content.mailform.20.layout das ganze mit einer tabelle gewrapt, aber wieder rausgenommen
  - den Quellcode, den ich gepostet hatte, ist der Quellcode vom Ausgabeseite. Woher die Zeile 27 her hat, ist ja mein kleines Problem

Nur noch nochmal zur Sicherheit: wenn ich eine Klasse "csc-mailform-radio { }" in mein eigenes CSS schreibe, dann sollte das doch auch übernommen werden, und nicht eines, von dem ich bisher immer noch nicht weiß, wo das her kommt.

Im Setup in sysext/css_styled_content/static finde ich lediglich den Eintrag

RADIO.layout = <div class="csc-mailform-field">###LABEL### <span class="csc-mailform-radio">###FIELD###</span></div>

Das ist alles, was ich zu den Radios und class="csc-mailform-radio" finde.

Grüße

Robbi

...könntest du den code für das mailform posten? dann würd ich es bei mir mal testen! den code unter "configuration" im page setup!

grüßle
info

Ähm sorry, jetzt stehe ich noch mehr auf dem Schlauch? Wie genau komm ich an den code im page-Setup ran :o ? Die Angaben aus dem TSConfig in den Seiteneigenschaften der Rootseite sind doch nicht damit gemeint, oder. Dort habe ich nämlich ausser RTE Konfigurationen nichts drin stehen.

Oder meinst Du die Angaben aus dem Object Browser:

tt_content.mailform.20.layout = <table><tr><td class="formlabel">###LABEL###</td><td class="csc-form-fieldcell">###FIELD###</td></tr></table>

tt_content.mailform.20.layout.RADIO.layout = <div class="csc-mailform-field"><span class="csc-mailform-radio">###FIELD###</span></div>

tt_content.mailform.20.labelWrap.wrap = <p class="csc-form-label">|</p>

tt_content.mailform.20.radioWrap.wrap = <span class="csc-form-radio">|</span><br />

Ich hoffe, dass das die Angaben sind, die Du meintest?

Danke

Robbi

Angenommen Du hast folgende Homepage:
root
About Us
Contact Us
Mail Us
Guestbook
etc.

unter Mail Us z.B. hast du ein Content-Element (Mailform) angelegt. In den Eigenschaften dieses Content-Elements musst du doch angegeben haben wie Dein Mailform aussehen soll -> standardmäßig wird folgendes angezeigt:

# Example content:
Name: | *name = input,40 | Enter your name here
Email: | *email=input,40 |
Address: | address=textarea,40,5 |
Contact me: | tv=check | 1

|formtype_mail = submit | Send form!
|html_enabled=hidden | 1
|subject=hidden| This is the subject

Dieses Dingens müsstest Du eigentlich angepasst haben spricht um die Radioboxen erweitert haben. Das was du gepostest hast ist nur die übersetzung bzw darstellung des von mir angegebenen codes! =)

Oder wie hast Du sonst das mailform integriert? Eigene Extension?

Gruß
Info

#angry#
Was für ein Krampf - habe jetzt herausgefunden wie das gerendert wird.

Also - deinem Problem kann wie folgt geholfen werden:

Geh in den Ordner "typo3\sysext\css_styled_content\static" und öffne die setup.txt

In zeile ~1163 siehst Du folgendes

RADIO.layout = <div class="csc-mailform-field">###LABEL### <span class="csc-mailform-radio">###FIELD###</span></div>

entferne das div samt label so das folgendes übrig bleibt:

<span class="csc-mailform-radio">###FIELD###</span>

Datei speichern - cache leeren und freuen =)

Gruß
Info

JAAAAAAAA !!!! Super-Klasse !!!!

Vielen Dank für deine geduldige Hilfe. Aber was mich nur wundert, dass dieses Phänomen bzw. Problem nicht auch bei anderen Nutzern aufgetaucht ist.

Also, nochmals vielen Dank. Du bist Klasse!

Robbi

8-) sowas hört man gern...

gute frage, zum anderen wundert es mich das das seitens des ext-entwicklers nicht gefixt bzw. bekannt ist? Mann sollte zumindest eine weiter option im mailform content element haben, womit man das fieldsetlabel ändern könnte...? #paralyzed#

Markierst Du bzw. schließt du dieses topic dann?

Gruß
Info

Ähem,

wenn ich eins hier verstanden habe, dann, dass man nicht in den Core-Dateien von Typo3 rum editieren sollte (wegen der Updatefähigkeiten).

Also besser ist es z.B. folgenden Eintrag im TS zu machen

vorher:
tt_content.mailform.20.RADIO.layout = <div class="csc-mailform-field">###LABEL###<span class="csc-mailform-radio">###FIELD###</span></div>

nachher:
tt_content.mailform.20.RADIO.layout = <div class="csc-mailform-field"><span class="csc-mailform-radio">###FIELD###</span></div>

oder (der einfachste Weg für mich) folgende css Anweisung zu schreiben:

.csc-mailform-field legend{display:none;}

So bracuth sich auch kein extension Entwickler zu schämen.