Jak w prosty sposób zmienić wygląd etykiet

10.12.2014



Etykiety - gadżet dzięki,któremu łatwiej jest nam coś znaleźć na blogu. Miło jest gdy nawet taki gadżet jak etykiety wygląda tak jak chcemy dlatego w dzisiejszym tutorialu pokarzę wam jak w prosty sposób odmienić nasze etykiety.


Do zmiany wyglądu etykiet będzie nam potrzebny następujący kod:

.label-size a{
 float: left; 
 height: 30px;
 line-height: 30px; 
 position: relative;
 font-size: 14px;
 margin-bottom: 10px;
 margin-left: 10px;
 padding:0 20px 0 20px;
 background:#000;
 color:#fff;
 text-decoration:none;
 -moz-border-radius-bottomright:0px;
 -webkit-border-bottom-right-radius:0px;
 border-bottom-right-radius:0px;
 -moz-border-radius-topright:0px;
 -webkit-border-top-right-radius:0px;
 border-top-right-radius:0px;
 }

.label-size a:hover{background: #ccc;}

Teraz przeanalizujmy nasz kod krok po kroku
.label-size a{
 float: left; - położenie etykiet 
 height: 30px;  - wysokość     
 line-height: 30px; - wysokość  (ważne jest żeby w tych dwóch miejscach były takie same wartości) 
position: relative;
 font-size: 14px; - wielkość czcionki 
 margin-bottom: 10px; - margines dolny 
 margin-left: 10px; - margines lewy 
 padding: 0px 20px 0px 20px;  - wielkość naszych etykiet pierwsza wartość odpowiada za górną krawędź naszych etykiet, druga wartość odpowiada za długość prawego boku,trzecia wartość odpowiada za dolną krawędź etykiety,czwarta wartość odpowiada za długość lewego boku. 
 background:#000; - kolor naszych etykiet
 color:#fff; - kolor tekstu 
 text-decoration:none;
 -moz-border-radius-bottomright:0px;
 -webkit-border-bottom-right-radius:0px; - zaokrąglenie prawego dolnego rogu 
 border-bottom-right-radius:0px;
 -moz-border-radius-topright:0px;
 -webkit-border-top-right-radius:0px; - zaokrąglenie prawego górnego rogu 
 border-top-right-radius:0px;
 }

.label-size a:hover{background: #ccc;} - kolor etykiety po najechaniu na nią myszką 


Ps. Bardzo ważne jest aby przy tym nasze etykiety były wyświetlane w formacie chmury
Ps2. Zapraszam wszystkich fanów DIY do polubienia jedynej takiej strony na Facebooku. Stronę tworzą rękodzielnicy podsyłając do administratorów swoje pomysły wraz ze zdjęciami i dokładnymi instrukcjami STRONA - KLIK  strona dopiero się rozkręca,więc będzie naprawdę miło jak przybędzie trochę lajków :)
Ps3. Dajcie znać w komentarzu co myślicie o nowej szacie graficznej bloga,postawiłam jednak na kafelki - według mnie dzięki nim blog jest bardziej przejrzysty.

12 komentarzy:

  1. Nowa szata graficzna jak najbardziej na tak, rzeczywiście bardzo jest tu teraz przejrzyście, masz talent:)

    OdpowiedzUsuń
  2. Bardzo ładny, przejrzysty szablon. Podobają mi się te porady, bo ja jestem w tych sferach totalną nogą i nie znam się na kodach. :)

    OdpowiedzUsuń
  3. a jak zmienic wygląd etykiet wyświetlanych przy poszczególnych postach?

    OdpowiedzUsuń
    Odpowiedzi
    1. Selektor to .post-labels a{...} - selektor odpowiada za wygląd etykiet (w miejsce kropek wpisujesz kolor tła, kolor tekstu etc.)

      Usuń
  4. Dzięki Twoim wskazówkom poradziłam sobie z etykietami. Na razie ciągle modyfikuję bloga bo dopiero zaczynam. Dziękuję :)

    OdpowiedzUsuń
  5. Mi zadziałało dopiero jak .label-size podmieniłem na .post-footer-line-2 a{

    OdpowiedzUsuń
  6. .post-footer to są etykiety w stopce posta, a nie etykiety - gadżet, więc nie wiem jak selektor .post-footer-line-2 a, mógł zadziałać Ci na gadżet etykiety

    OdpowiedzUsuń
  7. Dzięki, świetna instrukcja :)

    OdpowiedzUsuń
  8. a czy można wyśrodkować te etykiety? zamiast float left wpisuję float center, ale nic się nie dzieje....

    OdpowiedzUsuń
  9. Przemysław Starzyński1 listopada 2017 18:07

    Jak usunąć bądź zmienić czcionkę położenie już wybranej etykiety.
    Mam na myśli sytuację kiedy klikniemy w etykietę zmienia się wygląd naszego zmienionego pola na ogromną czcionkę i wjeżdża na inne etykiety albo pojawia się wyżej. Dodaję zdjęcia poglądowe pomocy :) Jak zmienić wygląd tej właśnie aktywnej etykiety jej położenie czcionkę, albo ją w ogóle wyłączyć. https://uploads.disquscdn.com/images/aec3b2103778bfe6d9d62d1000176874daf21a861da65d382c307aba51f1d9cc.png https://uploads.disquscdn.com/images/8150cb501ad7b18a3c2fd9b00c8a1af365c17d88b07ca5c3174a2c8931f16c8d.png

    OdpowiedzUsuń
  10. Trochę czasu minęło, ale dopiero teraz zobaczyłam ten komentarz :) Ten kod jest tak zbudowany i nie ma elementu w nim za to odpowiedzialnego, jest to stary kod i stary wpis - czekają w kolejce na aktualizacje ;)

    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

Copyright © Szablon wykonany przez Blonparia