Zmiana wyglądu tytułów gadżetów za pomocą kodu CSS

środa, 29 kwietnia 2015

CSS jest wspaniały. Serio. Czasem może irytować, ale to zazwyczaj przez jakiś nasz błąd, którego nie dostrzegamy, ale bluzgać zaczniemy - jakże by inaczej. Dziś przedstawię wam prosty tutorial, mianowicie jak w prosty sposób za pomocą kodów CSS można zmienić wygląd tytułów gadżetów.
Kiedyś pojawił się post o tym jak dodać własne, graficzne tytuły gadżetów. Jednak potem zrobiłam się leniwa, a może określenie "bardziej wygodnicka" będzie tu trafne.
Oczywiście aby nasze tytuły gadżetów się zmieniły to potrzebujemy kodu, składającego się z selektoru i stylów. Tak naprawdę aby taki kod sobie stworzyć to za wiele nie potrzeba.

Musimy wiedzieć jak oznaczyć nasze kolumny boczne, albo chociaż jedną z nich. Do tego posłuży nam selektor .sidebar, pewnie każdy się zastanawia czym on się różni od selektora .column-right-inner lub .column-left-inner już wyjaśniam poniżej.

.sidebar - odpowiada za wszystkie kolumny, zarówno za lewą jak i prawą
.column-right-inner - jak sama nazwa wskazuje odpowiada  tylko za prawą kolumnę.
.column-left-inner - odpowiada tylko za lewą kolumnę

Nie ma dużej filozofii prawda? Kolejną rzeczą jaką musimy wiedzieć to to jaki selektor mają gadżety. Większość z was posiada smartphony, więc będzie wam łatwo skojarzyć jaki selektor mają gadżety czyli .widget, ale to jeszcze nie koniec. Niestety nie wystarczy nam znajomość .sidebar i .widget, musimy jeszcze wiedzieć jak oznaczyć nagłówki gadżetów. Wiecie, że każdy nagłówek ma jakieś h z cyferką jak np. h3 .post-title, nagłówki gadżetów mają h2 np. h2 .date-header. Nasze kody dotyczące nagłówków w kolumnach bocznych będą wyglądać następująco:

.sidebar .widget h2 - odpowiada za wszystkie nagłówki gadżetów, we wszystkich kolumnach bocznych.
.column-right-inner .widget h2 - odpowiada za wszystkie nagłówki gadżetów, tylko w kolumnie bocznej prawej.
.column-left-inner .widget h2 - odpowiada za wszystkie nagłówki gadżetów, tylko w kolumnie bocznej lewej.

Tak na marginesie to selektor .sidebar .widget h2 widnieje w spisie selektorów CSS na moim blogu.

Skoro mamy już selektor dla naszych tytułów gadżetów, to wypadałoby teraz dopisać kawałek jakiegoś stylu, żeby wyglądało to jakoś przyzwoicie. Tutaj mamy duże pole do popisu, a wiecie dlaczego? Bo możemy dopisać sobie wszystko co chcemy. Poniżej trzy przykłady jak to może wyglądać:

.sidebar .widget h2 {
padding: 10px; - marginesy wewnętrzne, tego warto użyć
background-image: url (LINK DO TŁA);
color: #000; - kolor tekstu
font-family: Lobster; - rodzaj czcionki 
font-size: 20px; - wielkość czcionki
text-align: center; - położenie tytułu gadżetu
}

W moim przypadku to wygląda mniej więcej tak:

.sidebar .widget h2 {
padding: 10px; - marginesy wewnętrzne, tego warto użyć
background: #4eacfa; - kolor tła
color: #000; - kolor tekstu
font-family: Lobster; - rodzaj czcionki 
font-size: 20px; - wielkość czcionki
text-align: center; - położenie tytułu gadżetu
}

W moim przypadku to wygląda mniej więcej tak:

.sidebar .widget h2 {
padding: 10px; - marginesy wewnętrzne, tego warto użyć
border-style: solid; - rodzaj ramki 
border-width: 2px; - grubość ramki
border-color: #4eacfa; - kolor ramki
color: #000; - kolor tekstu
font-family: Lobster; - rodzaj czcionki 
font-size: 20px; - wielkość czcionki
text-align: center; - położenie tytułu gadżetu
}

W moim przypadku to wygląda mniej więcej tak:

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