Jak zmienić wygląd poszczególnych widgetów?

Dzisiaj o możliwości zmian w wyglądach poszczególnych widgetów. Jak wprowadzić zmiany by były inne niż  w posiadanym przez nas szablonie.

KROK 1.

Na samym początku musimy znaleźć Widged ID - czyli nazwę w kodzie widgetu który chcemy zmodyfikować.
Jak znaleźć WidgetID?
Zobacz na przykładzie:
Przykładowo ja chce zmodyfikować widget o nazwie "Etykiety" - widoczny w układzie bloga

Następnie , wchodzę w edycję kodu HTML szablonu, zaznaczam "Rozszerz szablony widgetów", wciskam CTRL+F i wyszukuje po nazwie widgetu - czyli tak jak w przykładzie "Etykiety" Pokazuje mi się taki obraz jak poniżej:

Jest tu napisane widget id='Label1' wobec tego nasze ID to Label1 - zapisz sobie gdzieś nazwę ID Twojego widgetu. Nie zamykamy edycji szablonu.

KROK 2

Wybieramy interesujące nas zmiany z poniższych możliwości:

W miejsce #WidgetID - wpisujesz wyszukany przez Ciebie ID przykładowo #Label1 - pamiętaj o krzyżyku!

Wypełnienie kolorem widgetu 

Kod:

#WidgetID {
padding: 5px;
background: #ffff99;
}

padding: 5px - oznacza odległość tekstu od "marginesu" możesz ją zmienić - wpisując inną liczbę zamiast 5

background: #ffff99 - oznacza tło wraz z kolorem przykładowo #ffff99 żółtym, inne kolory znajdziesz TUTAJ

Ramka wokół widgetu 

Kod:

#WidgetID {
padding: 5px;
border: 1px solid #ff0000;
}

border: - odnosi się do ramki, możesz zmienić jej parametry
1px - grubość ramki - możesz ją dowolnie zmienić im wyższa wartość tym grubsza ramka (na rys po - mamy 3px)
solid - oznacza linię prostą, zamiast możesz także użyć dotted - ramka z linią kropkowaną lub dashed - linia ramki przerywana  (wybierasz jedną z możliwości)
#ff0000 - to kolor czerwony, inne kolory znajdziesz TUTAJ

Ramka z zaokrąglonymi rogami wokół widgetu 

Kod:

#WidgetID {
padding: 5px;
border: 3px solid #ff0000; -moz-border-radius:30px; -webkit-border-radius:30px;
}

-moz-border-radius:30px; -webkit-border-radius:30p  - oznacza zaokrąglenie, 30px - to stopień zaokrągenia możesz zmienić tą wielkość


Ramka z cieniem wokół widgetu 

Kod:

#WidgetID {
padding: 5px;
border: 1px solid #ff0000;
box-shadow: 3px 3px 6px #ff0000;
}

 box-shadow - oznacza cień, w tej linijce możemy zmienić jego kolor na rys. jest czerwony, inne kolory znajdziesz TUTAJ. 3px 3px 6px - to grubość cienia - możesz je zmienić


Widget z inną czcionką i ułożeniem tekstu

Kod:

#WidgetID { padding: 5px; font-family:Helvetica, Arial, sans-serif; font-size:12px; text-align:right;font-weight:bold; text-decoration:underline; }

font-family:Helvetica, Arial, sans-serif; - przykładowa rodzina czcionek, niestety możesz użyć tylko tych czcionek które są zainstalowane standardowo czyli na przykład Arial, Times New Roman, Verdana, Courier, Georgia (możesz sprawdzić jakie klikając w poście na wybór czcionek) 

font-size: 12px - wielkość czcionki przykładowo 12px - możesz zmienić tą wartość
text-align:right; - wyrównanie tekstu right do prawej left - do lewej, center - do środka, justify - wyjustowana (dociągnięta od lewej do prawej)

font-weight:bold; - czcionka może być dodatkowo bold - pogrubiona

text-decoration:underline; oraz underline - podkreślona


Powyższe kody można mieszać!!!

Przykładowo:

#WidgetID {padding: 5px;background: #d8bfd8;border: 3px solid #FF1cae; -moz-border-radius:30px; -webkit-border-radius:30px;font-family:Helvetica, Arial, sans-serif;font-size:15px;text-align:center;font-weight:bold; text-decoration:underline;}

Powyższy kod należy do kodu CSS dlatego też zaczyna się od #NAZWA , każdą część oddzielają ; a całość zawarta jest między nawiasami { } Więcej o CSS wkrótce.

KROK 3

Robimy kopię zapasową naszego szablonu - Ściąga tutaj

Wyszukujemy (CTRL+F) :

]]></b:skin>

i przed tym wklejamy wybrany kod i gotowe.