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

28.01.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:#000color:#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:#000color:#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 

8 komentarzy:

  1. Bardzo lubię takie pomocne posty. Pozdrawiam i zapraszam do siebie

    OdpowiedzUsuń
  2. Takie posty pomagają początkującym blogerkom.Bardzo przydatne !

    http://przyszlosczapisanawterazniejszosci.blogspot.com/

    OdpowiedzUsuń
  3. Bardzo przydatny post! Mam nadzieje, że komuś on pomoże. :)

    http://moooneykills.blogspot.com/2015/01/queen-of-winter.html

    OdpowiedzUsuń
  4. Ciekawy i przydatny post! Na pewno skorzystam kiedyś z tego tutorialu :)

    NOWY POST NA FABRYCE MIĘTY KLIK! :))

    OdpowiedzUsuń
  5. Znów pouczający post, skąd Ty to wszystko wiesz?:)

    OdpowiedzUsuń
    Odpowiedzi
    1. Kursy z GK i moje kombinacje z kodami ;)

      Usuń
  6. Chciałam zmienić ale jakoś mi nie działa:/ może już nie aktualne jest?

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona

Copyright © Szablon wykonany przez Blonparia