Cel bloga

Instrukcje dotyczące języka HTML czy kodów CSS, artykuły na temat ciekawych funkcji czy poradniki pomagające początkujących - to wszystko i jeszcze więcej tylko u nas!

Zadaj pytanie!

Wskazówka

Chcąc znaleźć pożądaną instrukcję skieruj się do zakładki spis instrukcji, gdzie znajdziesz wszystkie dotychczasowo opublikowane posty z podziałem na trzy kategorie.

Archiwum

Statystyka

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.

3 komentarze

  1. A jeśli wrzucam obrazek w bloga i nie chce, aby miał tytuł, to jak mam go usunąć? Niestety nie mogę opublikować obrazka bez tytułu. Mam na myśli jako dodatkowy gadżet.

    OdpowiedzUsuń
    Odpowiedzi
    1. Sposobem na brak tytułu. ;)
      Tylko musisz się dowiedzieć, czy Twój obrazek ma selektor #Image1 czy #Image2 itd. Żeby to zrobić kliknij "edytuj" przy tym gadżecie i sprawdź, co jest napisane na końcu adresu tego okienka, które Ci wyskoczy.
      A potem już z górki, bo znając cyferkę wklejasz do arkusza css #Image1 h2 {display:none;}. A jeżeli to jedyny taki obrazek na Twoim blogu, to możesz nawet pominąć to całe wyszukiwanie cyferek, bo prawdopodobnie gadżet i tak ma nr 1. ;)

      Usuń
    2. Zaraz będę sprawdzać i bardzo dziękuję :3

      Usuń