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, one more styling problem

Dieses Thema im Forum "Plugins und Widgets" wurde erstellt von DanielKirsten, 15. April 2018.

Schlagworte:
  1. DanielKirsten

    DanielKirsten Active Member

    Registriert seit:
    7. März 2018
    Beiträge:
    28
    Zustimmungen:
    1
    Hallo Leute,

    ich habe begonnen, mit Contact Form 7 ein Kontakformular zu erstellen und anzupassen:

    http://www.drphotgraph.de/?page_id=1155
    (Das Formular sendet im Moment an eine trash-mail Adresse.)

    Ich habe unter Custom CSS u.a. folgendes angegeben:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Die einzelnen Einträge im Formular sehen dann z.B. so aus:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Wie kann ich erreichen, dass der Text "Ihre Telefonnummer ..." genausoweit eingerückt ist, wie die Eingabefelder?

    Daniel
     
  2. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Zunächst mal darf eine ID nur genau einem Element zugewiesen werden und nicht, wie du es gemacht hast, allen Input Elementen.
    Das solltest du dringend ändern, in dem du im CSS aus #my-special-field ein .my-special-field machst und dann im CF7 das natürlich auch bei den Inputs auf 'class' statt 'id' änderst.
    Dem Input für die Telefonnummer gibst du dann einen anderen Klassennamen (zB my-special-telefon).
    Diese Klasse schreibst du auch in dein CSS .my-special-telefon und gibst dieser Klasse identische Formatierung, wie .my-special-field, setzt aber das margin-left auf 0.
    Damit sollte der Text 'Ihre Telefonnummer...' und das Inputfeld linksbündig am Rand stehen.
    Jetzt musst dem Label den linken Rand geben, damit das genau so eingerückt ist, wie die anderen Inputs
    .wpcf7-form > p:nth-child(4) > label:nth-child(1){
    margin-left: 5%;
    }
     
  3. DanielKirsten

    DanielKirsten Active Member

    Registriert seit:
    7. März 2018
    Beiträge:
    28
    Zustimmungen:
    1
    Danke.
    Den ersten Teil (aus id eine class machen) habe ich verstanden und umgesetzt.

    Den Rest habe ich nicht ganz verstanden. Da sich das Einrücken auf alle
    Einträge, und nicht nur auf die Telefonnummer beziehen soll, habe ich auf die
    Einführung der Klasse my-special-telefon verzichtet, und für alle Einträge
    my-special-field verwendet. Darin habe ich margin-left auf 0 gesetzt.

    Die letzten drei Zeilen von Sailor56 habe ich zu Custom CSS hinzugefügt,
    beim Abspeichern wurden die > in %gt; geändert. Custom CSS sieht jetzt
    so aus:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Die Labels und Inputfelder stehen jetzt am linken Rand.

    Daniel
     
  4. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Ok... hatte ich dann falsch verstanden. Nach deiner Beschreibung dachte ich, es geht 'nur' um die Telefonnummer.
    Das macht die Sache jetzt aber auch deutlich einfacher... hast du auch schon richtig gemacht, dann bekommen natürlich alle Inputs die selbe Klasse.
    Diesen 'Sonderfall'
    .wpcf7-form > p:nth-child(4) > label:nth-child(1){
    margin-left: 5%;
    }
    kannst du dann auch gleich wieder löschen... der sollte nur das erste <label> im vierten <p> im Formular beeinflussen.
    Ich gehe allerdings davon aus, dass du es eh irgendwie nicht richtig gemacht hast, denn an der richtigen Stelle eingetragen hätte sich die spitze Klammer (>) nicht in das Entity (%gt;) umwandeln dürfen.
    Richtige Stelle für solche CSS - Änderungen/ Einträge ist das zusätzliche CSS im Custumizer (vom Dashboard -> Design -> Customizer -> zusätzliches CSS)

    Muss denn jetzt noch etwas verändert werden, oder bist du jetzt mit der durchgängigen Linksbündigkeit zufrieden?
     
  5. DanielKirsten

    DanielKirsten Active Member

    Registriert seit:
    7. März 2018
    Beiträge:
    28
    Zustimmungen:
    1
    Im Untermenü zu meinem Theme (Mantra) gab es einen Bereich Namens "Custom CSS",
    dort habe ich die Dinge hingschrieben. Ich habe die Dinge jetzt dahin verlagert, wo Du
    geschrieben hast. Den 'Sonderfall' habe ich herausgelöscht.

    Es ist jetzt durchgehend linksbündig, aber ich wollte es durchgehend eingerückt.

    Daniel
     
  6. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Da gibt es hunderte Wege das hinzubekommen... der Einfachste ist aber wohl
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Wobei die 5% natürlich auch jeder andere Wert sein kann.
    Und wenn das nicht so funktionieren sollte, wie du es dir vorstellst, dann nehmen wir einen der 99 anderen Wege ;)!
     
  7. DanielKirsten

    DanielKirsten Active Member

    Registriert seit:
    7. März 2018
    Beiträge:
    28
    Zustimmungen:
    1
    Danke, es sieht jetzt sehr gut aus.

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Den Send-Button muss ich bei Gelegenheit verschönern, aber ich weiß noch nicht,
    wie er aussehen soll.

    Daniel
     
  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