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 

Czytaj więcej >
Udostępnij ten wpis:

Zmiana koloru poszczególnych elementów w GIMPie

07.01.2015


W dzisiejszym wpisie przedstawię wam jak w trzech prostych krokach zmienić kolor danego elementu (np. kolor tęczówki, paznokci etc.) w GIMPie. Osobiście takiej opcji użyłam tylko parę razy do uwydatnienia koloru tęczówek, jednak można fajnie się pobawić tą opcją w przypadku kiedy chcemy aby poszczególne elementy na naszym zdjęciu były np. neonowe.

1. Otwieramy zdjęcie w GIMPie i wybieramy jedno z trzech zaznaczeń, które są zaznaczone na poniższym zdjęciu



Zaznaczenie eliptyczne bardzo nam się przyda przy zmianie koloru tęczówek, natomiast przy innych nieregularnych kształtach wybieramy zaznaczenie odręczne.

2. Zaznaczamy element, który będzie miał zmieniany kolor.



3. Jak już zaznaczyliśmy element, który ma zmienić kolor to klikamy na niego prawym przyciskiem myszki i wybieramy opcje kolor - barwienie.


4. Pojawi nam się ramka, w której mamy trzy suwaczki, dzięki nim możemy ustawić kolor naszego zaznaczonego elementu.



Efekt:


Czytaj więcej >
Udostępnij ten wpis:

Copyright © Szablon wykonany przez My pastel life