1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Contact Form 7 / CSS / Form an Comment Form anpassen

Dieses Thema im Forum "Design" wurde erstellt von TinaR, 6. August 2009.

  1. TinaR

    TinaR Well-Known Member

    Registriert seit:
    25. Februar 2009
    Beiträge:
    189
    Zustimmungen:
    0
    Hallo,

    ich schon wieder :neutral:.

    Ich versuche die Kontakt-Formen zu vereinheitlichen.

    Deshalb kopierte ich irgendwelche #comment-CSS-Formatierungen und ergänzte welche für die Kontaktform [ganz am Ende der CSS-Datei].

    Nun habe ich aber leider das Problem, dass die Textarea total schmal ist, statt so breit wie die der Kommentar-Form. Außerdem sieht der Submit-Button so gewöhnlich aus.

    (Dass der Hintergrund der input-Felder anders ist, das ist zum Testen gewollt.)

    Leider schnalle ich so außergewöhnliche class und id Sachen noch nicht wirklich und in der CSS-Datei ist irgendwas falsch.


    Kontaktseite:

    CSS:


    Frage No. 1:

    Wie formatiere ich den "Ab damit"-Submit-Button der Kontakt-Form, damit er so aussieht wie der Submit-Button der Standard-Kommentar-Form unten drunter?


    Frage No. 2:

    Wie bekomme ich es via CSS hin, dass die Textboxen der Kontakt-Form so formatiert/aussehen wie die der Standard-Kommentar-Form unten drunter, auch die Textarea?


    HTML-Quelltext der Kontakt-Form:
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    So, für heute gebe ich auf.
     
    #1 TinaR, 6. August 2009
    Zuletzt bearbeitet: 26. September 2009
  2. koslowski

    koslowski Well-Known Member

    Registriert seit:
    9. Juni 2009
    Beiträge:
    645
    Zustimmungen:
    0
    Moin,

    du hast für deine textarea keine Breite in der CSS hinterlegt (style.css Zeile 59).

    Sowas kannst du mit Firebug herausfinden. Tutorial Firebug.

    Dein Einfluß auf den Submitbutton ist begrenzt. Schau dir den Button mal im FF, IE, Opera und Safari an. Sieht überall anders aus.

    Versuch mal vorsichtige Änderungen und prüf das in den Browsern.
    Das Aussehen der Buttons wird teilweise von den Browsern vorgegeben. ;)

    Gruß
    koslowski
     
  3. hero-master

    hero-master Well-Known Member

    Registriert seit:
    8. Juni 2007
    Beiträge:
    332
    Zustimmungen:
    0
    Moin :)
    Du hast ja das Aussehen für die Kommentar-Funktion bereits definiert. Somit kannst du auch damit arbeiten musst das Ganze nur ein wenig umschreiben.
    Das ist dein CSS für dein Kommentar-Formular:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Wenn du möchtest, dass jegliche Formularfelder auf deinen Seiten gleich aussehen sollen, dann kannst du das alles veralgeminert definieren:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

    Dein großer Fehler im CSS war, dass du alles zwar richtig definiert hast, aber für das falsche Objekt:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Nun hast du aber "wpcf7" nicht als ID, sondern wurde als Klasse (class) definiert. Also musst du aus der Raute (#) einen Punkt (.) machen ;)


    Und: Submit-Buttons kannst du für alle fast alle Browser so definieren, dass sie genau gleich aussehen! Hintergrundfarbe, Rahmen, Schriftgröße, Breite, Abstände, alles kein Problem, es sieht in allen neueren Browsern dann genau gleich aus!
     
  4. TinaR

    TinaR Well-Known Member

    Registriert seit:
    25. Februar 2009
    Beiträge:
    189
    Zustimmungen:
    0
    :D Toll, vielen Dank!!!

    Das mit dem Unterschied bei class "." und id "#" wusste ich noch garnicht. Ich habe mich immer nur gewundert, warum da 'mal ein Punkt und dann wieder 'ne Raute steht.
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden