piątek, 15 stycznia 2016
Pewnie każdy z Was zna Bloggerowy formularz kontaktowy, kiedyś pojawiła się jedna instrukcja na temat tego gadżetu. Pokazywałam Wam w niej, jak wstawić formularz kontaktowy w podstronie. Teraz nadszedł czas na to, aby poprawić wygląd naszego gadżetu. Przyznacie chyba sami, że pierwotny wygląd tego gadżetu nie zachwyca.
To teraz czas na zmiany.
1. Przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS i wklejamy poniższy kod:
.contact-form-widget {max-width:100%; width:auto;}
.contact-form-email, .contact-form-name, .contact-form-email-message, .contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover, .contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {background: #fff; border-style: solid; border-color: #ddd; box-shadow: none; width: 100%; height:45px; font-size:14px; vertical-align:middle; padding:8px;}
.contact-form-button-submit {background: #e3cad1; border: none; float: none; height: 35px; margin: 5px 0 0 0; width: 310px; cursor: pointer; line-height:45px; font-size: 14px; text-transform: uppercase; font: normal normal 17px Open Sans; border-radius: 0px;}
.contact-form-button-submit:hover {background: #f5e9e2; border: none;}
.contact-form-name, .contact-form-email, .contact-form-email-message {max-width:none;}
.contact-form-email, .contact-form-name {margin-bottom:10px;}
Analiza kodu:
.contact-form-widget {max-width:100%; width:auto;}
.contact-form-email, .contact-form-name, .contact-form-email-message, .contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover, .contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {background: #fff; border-style: solid; border-color: #ddd; box-shadow: none; width: 100%; height:45px; font-size:14px; vertical-align:middle; padding:8px;}
.contact-form-button-submit {background: #e3cad1; border: none; float: none; height: 35px; margin: 5px 0 0 0; width: 310px; cursor: pointer; line-height:45px; text-transform: uppercase; font: normal normal 17px Open Sans; border-radius: 0px;}
.contact-form-button-submit:hover {background: #f5e9e2; border: none;}
.contact-form-name, .contact-form-email, .contact-form-email-message {max-width:none;}
.contact-form-email, .contact-form-name {margin-bottom:10px;}
Kolor tła ramek imię, e-mail, wiadomość
Styl obramowania ramek imię, e-mail, wiadomość
Kolor obramowania ramek imię, e-mail, wiadomość
Wysokość ramek imię, e-mail, wiadomość
Rozmiar czcionki (chodzi o rozmiar czcionki, którą uzupełniamy nasze ramki)
Marginesy wewnętrzne
Kolor tła, przycisku "wyślij"
Wysokość przycisku "wyślij"
Szerokość przycisku "wyślij"
Wielkość i rodzaj czcionki przycisku "wyślij"
Zaokrąglone rogi przycisku "wyślij"
Tło przycisku "wyślij" po najechaniu myszką
To już wszystko. Szybko, łatwo i przyjemnie. Mam nadzieję, że komuś się ten kod przyda :)
Przyda się na pewno!;) Pozdrawiam!
OdpowiedzUsuńDziekuje! Jak tylko bede miala dłuższą chwilę to to zrobie!;)
OdpowiedzUsuńSuper, muszę się za to kiedyś zabrać :) !! Albo najlepiej jakby jeszcze ktoś to zrobił za mnie :D
OdpowiedzUsuńNie mamy takie opcji ale na pewno nie jednej osobie spadniesz z nieba ;)
OdpowiedzUsuńŚwietny blog, inspirujesz do zmian :)
OdpowiedzUsuńEkstra :)!
OdpowiedzUsuńSuper! Bardzo się cieszę, że instrukcja się przyda :)
OdpowiedzUsuńHaha, no tak, ale niestety czasem trzeba samemu się pomęczyć :D
OdpowiedzUsuńOby :D
OdpowiedzUsuńNo i spadłaś
OdpowiedzUsuńŚwietne masz te tutoriale. Podpowiesz, jak w tym kodzie zmienić wysokość tylko okna do wiadomości na 200px? Z podanego kodu wydzieliłam do osobnej linijki taki fragment: .contact-form-email-message, .contact-form-email-message:hover, .contact-form-email-message:focus {background: #fff; border-style: solid; border-color: #000; box-shadow: none; width: 100%; height: 200px; font-size:14px; vertical-align:middle; padding:8px;} ale to nie zadziałało.
OdpowiedzUsuńNo i miało prawo nie zadziałać ;) Ponieważ kod na to już jest dodany w kodzie - wystarczy tylko trochę przerobić. Obecnie jak dodałaś drugi raz to samo, to logiczne, że nie zadziała, bo blogger w tym momencie głupieje i bierze pod uwagę ten kod, który był pierwszy. W podanym kodzie fragment odpowiadający za wielkość pól do wpisania jest tutaj:
OdpowiedzUsuń.contact-form-email, .contact-form-name, .contact-form-email-message, .contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover, .contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {background: #fff; border-style: solid; border-color: #ddd; box-shadow: none; width: 100%; height:45px; font-size:14px; vertical-align:middle; padding:8px;}
Jeśli chcemy tylko jedną sekcję zmienić to musimy usunąć z tego fragmentu dany selektor czyli w tym wypadku .contact-form-email-message oraz .contact-form-email-message:hover i przecinki po między, więc nasz fragment kodu powinien wyglądać tak:
.contact-form-email, .contact-form-name, .contact-form-email:hover, .contact-form-name:hover, .contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {background: #fff; border-style: solid; border-color: #ddd; box-shadow: none; width: 100%; height:45px; font-size:14px; vertical-align:middle; padding:8px;}
Pod tak zmodyfikowanym fragmentem kodu wklejamy:
.contact-form-email-message, .contact-form-name:hover {background: #fff; border-style: solid; border-color: #ddd; box-shadow: none; width: 100%; height: 200px; font-size:14px; vertical-align:middle; padding:8px;}