• Rozwiązano mierzluk

    (@mierzluk)


    witajcie,

    kombinuje (niektórzy powiedzą – jak koń pod górkę) z wygladem formularza kontaktowego. mianowicie chodzi o to ze w motywie: Academica formularz kontaktowy (wtyzka cf7) nie ma bodre-a i wyglada to nieatrakcyjnie.

    wiec dodalem border w css wtyczki do pozycji: span.wpcf7-form-control-wrap ale przynioslo to polowiczny efekt koncowy, przedtawiony na foto:
    http://img833.imageshack.us/img833/2384/28380956.jpg (bez czerwonych linii)

    i teraz prosilbym Was o podpowiedz, gdzie dobrzucić i co aby tam gdzie czerwone linie pokazal sie border ktorego dodalem do css: border: 1px solid

    czy to wogole trzeba kombinowac z css wtyczki?

    css wtyczki:

    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;
    	border: 1px solid
    }
    
    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;
    }
    
    div.wpcf7 img.ajax-loader {
    	border: none;
    	vertical-align: middle;
    	margin-left: 4px;
    }
    
    div.wpcf7 .watermark {
    	color: #888;
    }

    z gory dziekuje za podpowiedz

Zobacz 9 odpowiedzi - od 1 do 9 (z 9 łącznie)
  • Przede wszystkim – nie zmieniaj plików wtyczki – będziesz to robić za każdym razem, gdy będziesz ją update’ować? :>

    Dodaj odpowiednie style w CSSie swojego motywu – przecież nie ma większego znaczenia, w którym pliku znajdują się dane reguły CSS.

    Jeśli chcesz, żeby to działało, to musisz przede wszystkim wstawiać prawidłowe style… border: 1px solid nie jest raczej w pełni prawidłowy. Po pierwsze, brakuje Ci tam koloru (ten #xxxxxx – to kolor). Po drugie – to nie błąd, ale dla porządku lepiej dodać – brakuje średnika 😉

    Twórca wątku mierzluk

    (@mierzluk)

    Dziękuje!

    A więc, dodałem:

    span.wpcf7-form-control-wrap {
    	border: 1px solid #686868  ;
    }

    do css motywu, i otrzymałem taki efekt:
    http://img594.imageshack.us/img594/6894/95884714.jpg

    Ciągle pole tekstowe, nie jest obramowane w 100%. Jak mógłbym to poprawić?

    A może dodaj border do textarea?
    .wpcf7 textarea

    Twórca wątku mierzluk

    (@mierzluk)

    Niestety nie przyniosło to rezultatu.

    A weź odpal firebuga i zobacz dlaczego. Może warto dodać !important.

    Twórca wątku mierzluk

    (@mierzluk)

    wpisałem tak:
    span.wpcf7-form-control-wrap .wpcf7 textarea !important {border: 1px solid #686868;}

    i nic

    stronka to: link

    OMG. Co mi za stronę pokazujesz jak tam nic nie ma?

    Wpisz tak:
    .wpcf7 textarea {border: 1px solid #686868 !important;}

    Nie znasz podstaw CSS, musisz to trochę ogarnąć jak chcesz stawiać strony WWW.
    Ten szablon to sam pisałeś od początku?

    OK, masz włączony Maintenance Mode – teraz dopiero zauważyłam. Jak masz to włączone to nie mam jak spojrzeć na Twój kod.

    Twórca wątku mierzluk

    (@mierzluk)

    Dzięki!
    teraz juz powinno pojawic sie to co trzeba 😉 sorki, zapomnialem o MM 😉
    po wpisaniu tego:
    .wpcf7 textarea {border: 1px solid #686868 !important;}
    okazuje sie, że działa tak jak powinno, ale tylko dla „textarea”
    z tym, że dodałem jeszcze coś takiego:
    .wpcf7 input {border: 1px solid #686868 !important;}
    i teraz wydaje się być ok

    Wielkie dzięki za pomoc!

Zobacz 9 odpowiedzi - od 1 do 9 (z 9 łącznie)

Temat ‘contact form 7 i css’ jest zamknięty na nowe odpowiedzi.