Edytowanie wyglądu gadżetu "Obserwuj przez e-mail"

środa, 28 stycznia 2015

Wszytko da się zmienić tak aby było dopasowane do naszego szablonu. Lubię jak wszystko ze sobą współgra,strasznie mnie denerwuje jak coś ze sobą się gryzie. Dlatego przy tworzeniu szablonu staram się dbać o najmniejszy szczegół. w dzisiejszym tutorialu pokażę wam jak zmienić wygląd gadżetu "Obserwuj przez e-mail"

Gadżet "Obserwuj przez e-mail" przed zmianami wygląda tak:

Po zmianach może wyglądać różnie - wszystko zależy od nas. Najlepsze w tym jest to, że aby zmienić wygląd naszego gadżetu nie musimy szperać w kodzie HTML,który przeraża sporą część osób. Do zmian wystarczy nam kod CSS,który wstawiamy w projektancie szablonu.
Kod wygląda tak:

.FollowByEmail .follow-by-email-inner .follow-by-email-address {width: 140px; height:34px; font: 10px Verdana; background: #fff; letter-spacing: 1px; border-style: solid; border-width: 1px; border-color: #000; padding: 5px; margin-bottom: 25px; border-radius: 10px 10px 10px 10px;}

.FollowByEmail .follow-by-email-inner .follow-by-email-submit {width:70px; margin: 10px 10px 15px 10px; background:#000; color:#fff; height:34px;z-index:0; font-size: 12px;letter-spacing: 1px;text-transform:none; font-family: Verdana; border-radius: 10px 10px 10px 10px;}

.follow-by-email-inner .follow-by-email-submit:hover {width:70px; margin: 10px 10px 15px 10px; background:#ccc; color:#fff; height:34px;z-index:0; font-size: 12px;letter-spacing: 1px;text-transform:none; font-family: Verdana; border-radius: 10px 10px 10px 10px;}

Przeanalizujmy nasz kod krok po kroku (wszystkie wartości zaznaczone na kolorowo są zmienne):

Pierwsza cześć kodu dotyczy pola do wpisywania adresu e-mail

.FollowByEmail .follow-by-email-inner .follow-by-email-address {width: 140px; height:34px; font: 10px Verdana; background: #fff; letter-spacing: 1px; border-style: solid; border-width: 1px; border-color: #000; padding: 5px; margin-bottom: 25px; border-radius: 10px 10px 10px 10px;}

Długość pola 
Szerokość pola
Wielkość i rodzaj czcionki w polu 
Tło pola
Odstęp między literami 
Rodzaj ramki 
Grubość ramki
Kolor ramki 
Dopełnienie 
Margines dolny 
Zaokrąglenia narożników 

Druga cześć kodu dotyczy przycisku "submit"

.FollowByEmail .follow-by-email-inner .follow-by-email-submit {width:70px; margin: 10px 10px 15px 10px; background:#000; color:#fff; height:34px;z-index:0; font-size: 12px;letter-spacing: 1px;text-transform:none; font-family: Verdana; border-radius: 10px 10px 10px 10px;}

Długość
margines górny
margines lewy
margines dolny
margines prawy
Tło
Kolor tekstu 
Szerokość 
Rozmiar czcionki
Odstęp między literami
Rodzaj tekstu 
Rodzaj czcionki 
Zaokrąglenia narożników 


Trzecia część kodu przycisku submit po najechaniu na niego myszą (jeśli ktoś nie chce aktywnego przycisku to tą część może pominąć)

.follow-by-email-inner .follow-by-email-submit:hover {width:70px; margin: 10px 10px 15px 10px; background:#000; color:#fff; height:34px;z-index:0; font-size: 12px;letter-spacing: 1px;text-transform:none; font-family: Verdana; border-radius: 10px 10px 10px 10px;}

Długość
margines górny
margines lewy
margines dolny
margines prawy
Tło
Kolor tekstu 
Szerokość 
Rozmiar czcionki
Odstęp między literami
Rodzaj tekstu 
Rodzaj czcionki 
Zaokrąglenia narożników 

Jeśli spodobał Ci się wpis, przekaż go dalej :)