Jak zmienić wygląd formularza kontaktowego
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 :)
