Contact Forms 7 - an Post-Layout anpassen

Hi Leute,

ich habe mir ein Kontaktformular mit Contact Forms 7 gebastelt und eingebunden.

Nun möchte ich, dass die felder so aussehen, wie diejenigen, die erscheinen, wenn man einen beitrag kommentiert. wenn ich das richtig sehe, werden ja die größen in der css festgelegt und sind da auch zu verändern. aber...

... wenn ich den cursor in ein textfeld setze, dann erscheint beim kommentieren ein farbiger rahmen um das entsprechende fenster. wie kann ich das umsetzen?

vielleicht hilft euch der link weiter, hier wurde ein ähnliches problem besprochen:

http://forum.wordpress-deutschland.org/design/56498-c…m-anpassen.html

vielen dank schonmal,

griffon

Hallo,

und vielen Dank für Deine Antwort.

Mein Problem ist, dass die dort angegebenen tags sich in meiner CSS für die styles von CF7 nicht finden. Meine CSS hierfür sieht so aus:

Zitat

div.wpcf7 {
margin: 0;
padding: 0;
}

div.wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
}

div.wpcf7-mail-sent-ok {
border: 2px solid #398f14;
}

div.wpcf7-mail-sent-ng {
border: 2px solid #ff0000;
}

div.wpcf7-spam-blocked {
border: 2px solid #ffa500;
}

div.wpcf7-validation-errors {
border: 2px solid #f7e700;
}

span.wpcf7-form-control-wrap {
position: relative;
}

span.wpcf7-not-valid-tip {
position: absolute;
top: 20%;
left: 20%;
z-index: 100;
background: #fff;
border: 1px solid #ff0000;
font-size: 10pt;
width: 280px;
padding: 2px;
}

span.wpcf7-not-valid-tip-no-ajax {
color: #f00;
font-size: 10pt;
display: block;
}

span.wpcf7-list-item {
margin-left: 0.5em;
}

.wpcf7-display-none {
display: none;
}

img.ajax-loader {
border: none;
vertical-align: middle;
}

Alles anzeigen

Ich würde nun ganz gerne die Breite aller Felder verändern (Text- und Infofelder) sowie den Rahmen drumzeichnen. Den Code hast Du mir ja schon gegeben, vielen Dank dafür. Ich weiß nur nicht, wo der hinkönnte - alles testen brachte bisher nicht den erwünschten Erfolg.
Außerdem würde ich gern das Aussehen des Submit-Buttons verändern - wo kann ich das tun? Die tags sind so uneindeutig gekennzeichnet - jedenfalls für mich :grin:

Vielen Dank schonmal im Voraus,

griffon

Ja, geht klar - vielen Dank trotzdem!

Hi,

ich nochmal - ich wollte wegen der Frage kein neues Topic eröffnen, weil sie nach wie vor obiges Thema betrifft.

Ich habe jetzt meine CSS angepasst und bin zufrieden - außer mit dem Rahmen, welcher um die Felder gezeichnet wird. Mit folgendem Code:

.wpcf7 textarea:hover, input:hover, input:active {border: 2px solid #ff5a00;}

in der CS von CF7 entsteht zwar ein Rahmen, aber nur, wenn man mit der Maus drüber fährt. Er soll jedoch auch dableiben, wenn eine Texteingabe erfolgt (und der Mauszeiger woanders steht). Wie kann ich das realisieren?

Danke vielmals und viele Grüße,

griffon

gut, habe rausgefunden, dass das mit der input:focus zu machen ist. mein code sieht nun so aus:

.wpcf7 textarea:hover, textarea:focus, input:hover, input:active, input:focus {border: 2px solid #ff5a00;}

nun bin ich fast am ziel ;)

was ich nun noch möchte, ist, dass die sende-buttons nicht umrahmt werden. kann man die excluden? wenn ja, wie?

auch hier wieder vielen dank im voraus ;)

griffon

ahja, ich erinnere mich dunkel ;)

perfekt, jetzt sieht alles aus, wie es soll. aber eine frage hätte ich dennoch: ist es möglich, auch den button des upload-feldes zu verändern? oder ist das browserspezifisch und so nicht zu ändern?

grüße,

griffon

perfekt, danke - werde mich gleich mal damit beschäftigen! :razz: