JAK ZROBIĆ KOLOROWE TŁO W GADŻETACH I KARTACH?

  Prawie każdy ma to na swoim blogu, a o dziwo trudno znaleźć tego gotowe kody. Może i łatwo, ale przyznam się, że mi było trudno. Szczerze mówiąc, to mało kto ma taki poradnik, raczej tylko jakieś małe kody CSS jak "wyśrodkowanie nagłówka", "wyjustowanie tekstu" itp. Dlatego też postanowiłam, że ja zrobię taki oto poradnik, by więcej było ich w internecie! Mam nadzieję, że uda mi się jak najprościej Wam to wytłumaczyć.

  Tło w gadżetach jest bardzo przydatne i bardzo popularne. Dlatego dobrze by było znać na to kod. Jednak po co dodatkowo piszę jak zrobić kolor w kartach, gdy jest ogólno dostępne w projektancie szablonów? Ano dlatego, że nie ma tam opcji zaokrąglania rógów, którą osobiście bardzo lubię! Mam nadzieję, że Wam też ten element dekoracyjny przypada do gustu. 

  Przejdźmy do konkretów. Jeżeli chcemy mieć zaokrąglone rogi tła w kartach jak ja na moim blogu, musimy dodać kod CSS. Osobiście wolę tą formę, nie przepadam za grzebaniem w HTML, bo mam wrażenie za każdym razem, iż coś zepsuję. Podaję następujące karty w które musimy wejść:

Szablon → Dostosuj → Zaawansowane → Tło kart

  Następnie wybieramy dany kolor jaki chcemy ustawić na kartach (U mnie jest kolor szary, #eeeeee) i kolor jaki ma być, po najechaniu myszką na daną kartę. Po wyborze koloru zjeżdżamy na sam dół zaawansowanych i klikamy dodaj arkusz CSS. Otworzy nam się okno, w którym wklejamy poniższy kod:

.tabs-inner .widget li a {border-radius: 90px 90px 90px 90px;}

.tabs-outer .widget li a {margin: 2px;}

.tabs-inner .widget li a {padding: 12px;}

  W miejscach zaznaczonych na czerwono jak najbardziej można zmieniać wartości. border-radius odpowiadają za zaokrąglenie Naszych rogów, margin oznacza odstępy między kartami, a padding za wielkości Naszego tła. Każdy ma inną wizję swojego bloga, dlatego możecie się pobawić! Jeżeli macie już ustawione tło, wystarczy teraz tylko kliknąć zastosuj do bloga i gotowe!

  Przejdźmy teraz do teł gadżetów. (Śmiesznie to brzmi, prawda? :D) Aby zastosować ów kod stosujemy podobny schemat co wcześniej, tylko na końcu klikamy w gadżety:

Szablon → Dostosuj → Zawansowane → Gadżety

  Następnie wybieramy dany kolor jaki chcemy ustawić w gadżetach. (U mnie jest kolor granatowy, #eeeeee) Po wyborze koloru ponownie zjeżdżamy na sam dół zaawansowanych i klikamy dodaj arkusz CSS. W białej karcie pod poprzednim kodem wklejamy poniższy:

.column-right-inner h2 {text-align: center;
background: #ccc;
padding: 2px;
border-radius: 0px 20px 20px 0px;
text-transform: uppercase;}

  Jeżeli Wasza kolumna znajduje się po lewej stronie bloga, zmieniamy right na left. Chcąc zmienić położenie gadżetów zmieniamy center na left lub right. Zamiast #ccc można dodać inny kolor z palety barw, no chyba, że chcecie taki zostawić. W padding zmieniamy grubość tła, a w border-radius zaogrąglenie rogów. Ostatnie linijki text-transform: uppercase; można spokojnie usunąć, ponieważ dzięki nim tekst ten jest wtedy w formie CAPS LOCKA. Nie wiem jak Wam, ale dla mnie to dziwnie wygląda.

  
  Jak widać możliwości z zaokrągleniem rogów jest dużo, można się trochę pobawić, tak samo jak i z tłem kart!. Jeżeli macie już ustawione tło do kart lub gadżetów, wystarczy teraz tylko kliknąć zastosuj do bloga i gotowe! Czyż to nie jest proste? Łatwiej jest dodać kod CSS niż grzebać w HTML-u? Jeżeli coś źle wyjaśniłam lub macie jeszcze dodatkowe pytania na ten temat, zapraszam do zadawania pytań w komentarzach lub na moją pocztę e-mail :)