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

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:





38 komentarzy:

  1. A ja mam inne pytanie, jak usunąć napis "undefined" przy nagłówku posta? ;)
    Męczę się z tym już długo i nie potrafię go usunąć ;x

    MÓJ BLOG, zapraszam gorąco! ♡
    MÓJ BLOG, zapraszam gorąco! ♡

    OdpowiedzUsuń
    Odpowiedzi
    1. Masz szablon pobrany z internetu, więc jest to zapisane w szablonie. Wejdź w szablon - edytuj kod HTML, kliknij w dowolnym miejscu w kodzie kursorem i wywołaj konsole wyszukiwania za pomocą ctrl + f wpisz undefined kliknij enter i usuń to słowo. Powinno pomóc ;)

      Usuń
  2. Patrzyłam, niestety nie pomaga, potrzeba jest ustawić inny format daty, w kodzie html, a tego nie umiem ;)

    OdpowiedzUsuń
    Odpowiedzi
    1. Aby zmienić format daty to wystarczy wejść w ustawienia - język i formatowanie

      Usuń
    2. Właśnie szablon wyłącza tą funkcję, trzeba pracować na łodzie html ;)

      Usuń
    3. To trzeba grzebać w tym kodzie, a ja tak jak już wspomniałam powyżej we wpisie nie mam na to czasu

      Usuń
    4. Dobrze, spokojnie tylko pytałam ;)

      Usuń
  3. Bardzo przydatny post. CSS jest ogólnie przyjemnym językiem programowania. Niedawno też zmieniałam wygląd u siebie :)

    pozdrawiam
    http://edzia-photoamator.blogspot.com/

    OdpowiedzUsuń
  4. Jesteśmy naprawdę zielone w tym temacie :P

    OdpowiedzUsuń
  5. Przyznam szczerze, że bardzo przydatny poradnik :)
    Obserwuję :)

    Blog z artystycznymi i profesjonalnymi sesjami zdjęciowymi. Nowy post! :)
    http://moooneykills.blogspot.com/

    OdpowiedzUsuń
  6. Ciekawy poradnik! Na pewno kiedyś skorzystam :)

    NOWY POST NA FABRYCE MIĘTY, POKLIKASZ? :))

    OdpowiedzUsuń
  7. Poratuj mnie trochę. Nie mogę znaleźć nigdzie sekcji odnośnie usunięcia całego obramowania z "gadżetu".
    0lja.blogspot.com

    OdpowiedzUsuń
  8. W Twoim szablonie jest to ten kod: .sidebar .widget{border:1px solid #1a1a1a;padding:25px}

    OdpowiedzUsuń
  9. Uratowałaś mi życie, pozdrawiam serdecznie! :)))

    OdpowiedzUsuń
  10. Aleksandra Burdyn27 marca 2017 12:48

    Witam :) Wczoraj natrafiłam na Twojego bloga, bo chciałam w końcu zmienić coś na swoim, a konkretnie wygląd komentarzy, i dzięki Twoim poradom udało mi się to :) Świetnie, że istnieją takie poradniki jak Twój, tak że dzięki :) Ale mam pewien problem - próbuję zmienić czcionkę i jej kolor etykiet na blogu, a konkretnie nazw kategorii ( prowadzę blog o pieczeniu ) i za nic nie mogę tego zrobić, a kombinowałam już na wszystkie sposoby, jednak nic się nie zmienia. Czy mogę liczyć na Twoją pomoc w tej sprawie? Potrzebuje prostego wyjaśnienia jak mam to zrobić :) Jestem zielona jeśli chodzi o takie informatyczne sprawy. Z góry dziękuję i pozdrawia, Ola. A tu link do mojego bloga http://opowiescizpiekarnika.blogspot.com/

    OdpowiedzUsuń
  11. Masz pełny dostęp do edytora szablonu? ;)

    OdpowiedzUsuń
  12. Aleksandra Burdyn27 marca 2017 14:51

    Nie wiem dobrze rozumiem pytanie ( jak mówiłam - jestem zielona ;) ), chodzi o edycje kodu HTML?

    OdpowiedzUsuń
  13. Nie, chodzi o to czy po wejściu w "dostosuj" jest możliwość edycji czy jest wszystko zablokowane :)

    OdpowiedzUsuń
  14. Aleksandra Burdyn29 marca 2017 18:57

    Niestety jest zablokowane.

    OdpowiedzUsuń
  15. Szablon był darmowy czy płatny?

    OdpowiedzUsuń
  16. Aleksandra Burdyn29 marca 2017 21:24

    Darmowy. Sporo udało mi się zmienić, ale jeśli chodzi o etykiety, to tylko z tymi pod postem udało mi się coś zrobić, z najbardziej mi zależy na zmianie czcionki kategorii, żeby były lepiej widoczne.

    OdpowiedzUsuń
  17. Szablon ma skrócony kod. Większych modyfikacji nie da się zrobić, ani tych najbardziej podstawowych ze względu na blokadę edytora, ale jeśli masz możliwość dodania arkusza CSS to zawsze możesz spróbować dodać kod CSS, tylko sprawdź czy masz możliwość w sekcji dostosuj dodania CSSa :)

    OdpowiedzUsuń
  18. Aleksandra Burdyn29 marca 2017 21:58

    Mogę dodawać arkusz CSS, tak robiłam gdy zmieniałam wygląd komentarzy, z Twojego poradnika zresztą. Tylko skąd mam wiedzieć jaki to kod? W ogóle to dzięki wielkie za odzew i cierpliwość ;)

    OdpowiedzUsuń
  19. Przepraszam, że tak późno odpowiadam, ale nie zauważyłam, że komentarz został dodany - wejdź we wpis u mnie na blogu o selektorach, znajdź selektor odpowiadający za daną sekcję dodaj do niego a:link {color: #444;} - #444 można zmienić na własny kolor :)

    OdpowiedzUsuń
  20. Aleksandra Burdyn2 kwietnia 2017 20:12

    Dzięki za odpowiedź :) No cóż, robię tak jak mi radzisz, ale nic się nie zmienia, może źle wpisuję kod :/

    OdpowiedzUsuń
  21. Dziękuję twój wpis mi bardzo pomógł :)

    OdpowiedzUsuń
  22. U mnie już działa. Mam problem z cieniem wokół obszaru postów, czy masz na to jakiś sposób? Dziękuję za tutorial.

    OdpowiedzUsuń
  23. http://blonparia.blogspot.com/2014/12/selektory-css.html - selektor na daną sekcje i dopisać cienie

    OdpowiedzUsuń
  24. Nie, to jest wszystko do zrobienia w sekcji CSS. Motyw - dostosuj - zaawansowane - dodaj arkusz CSS. Z wpisu z selektorami (link w komentarzu) należy znaleźć odpowiedni selektor na daną sekcję i dopisać do niego cienie

    OdpowiedzUsuń
  25. A chciałabym jeszcze podpytać się, jak można zwiększyć długość tej rameczki? Z góry dziękuję.

    OdpowiedzUsuń
  26. Graficzny tytuł gadżetu jest prostokątem, chciałabym aby był trochę dłuższy niż Twoja propozycja.

    OdpowiedzUsuń
  27. Grafika będzie taka jaką się wgra - może być duża, może być mała, wystarczy manipulować marginesami wewnętrznymi czyli paddinegiem

    OdpowiedzUsuń
  28. Dziękuję pięknie, pomogło Przepraszam, że zamęczam:):) Ale chcę mieć takiego ładnego bloga jak Twój:)

    OdpowiedzUsuń
  29. Nie zamęczasz - spokojnie ;)

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona