Tytuły gadżetów [h2]

Pomyślałam, że kolejnym tematem, któremu się bliżej przyjrzymy będzie edycja tytułów gadżetów. Tak jak awatary komentujących jest niepozorny i wydaje się być takim szczególikiem. Jednak jego obróbka jest wygodniejsza, gdyż w porównaniu z poprzednim efekt widzimy na bieżąco. 

Selektorem odpowiedzialnym za tytuły gadżetów jest proste h2.

Wybór kolumny 

Nie trzeba edytować wszystkich tytułów naraz. Co prawda inny styl w prawej i lewej kolumnie może wyglądać dziwnie, ale jeśli nasza rozbieżność dotyczy np. kolumny bocznej i gadżetów pod postem, to różnice mogą się przydać. 

.column-left-inner h2 - dla gadżetów kolumny lewej,

.column-center-inner h2 - środkowej

.column-right-inner h2 - i prawej.

Wyrównanie tekstu (left, center, right)

Niektóre szablony lepiej będą się prezentować z wyrównaniem po jednej stronie lub na środku, może to zrobić wielką różnicę w jego ogólnej prezencji. 

h2 {text-align: left;}

Tło (Kolor? A może gradient?) 

Czasem wystarczy nadać tekstowi wyraźnego koloru, jednak można też zostawić najprościej białą czcionkę i zaszaleć z tłem. 

h2 {background-color: blue;} 

Równie ciekawym pomysłem jest tło obrazkowe (na końcu można się jeszcze pobawić jego pozycją):

h2 {background: url('adres obrazka') center top;}

Gradient jest propozycją dla osób, które wiedzą gdzie jest granica i "potrafią nie przedobrzyć". Zamiast poniższego "blue" można spokojnie wpisać "transparent". 

h2 {background: linear-gradient(to bottom, blue, red);}

Position 

Można pozwolić sobie na przesunięcie tytułu o przykładowo kilkadziesiąt pikseli w prawo lub lewo (zależnie od układu szablonu wpisujemy liczby ujemne lub dodatnie). 

h2 {position: relative;
left: -10px;}

Szerokość paska

Dzięki temu i powyższemu position można sobie ładnie ustawić tytuł trochę dłuższy lub krótszy od szerokości całego gadżetu. 

h2 {width: 350px;}

Brak tytułu

Na koniec krótki apel: nie bójcie się ustawiać display: none dla gadżetów takich jak menu czy statystyka. Nie zawsze jest tam potrzebny tytuł, a nawet nierzadko zbędny...

#Stats1 h2 {display: none;}

Co Wy na to? Nie trzeba zostawiać tej części "gołej", może nabrać wyrazu i uzupełnić efekt.