Jak zrobić etykiety nad tytułem wpisu

24.04.2018



Od jakiegoś czasu dostawałam od Was maile z pytaniami jak zrobić etykiety nad tytułem wpisu. Długo zastanawiałam się nad tym, którą wersję Wam przedstawić i zdecydowałam się na najprostszą. Pokażę Wam jak za pomocą kodu CSS, przenieść nasze etykiety ze stopki wpisu nad tytuł.

1. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS wklejamy kod:



Elementy do zmiany: 

.post-labels {
font-family: Open Sans; - rodzaj fontu 
padding: 10px 10px!important; - marginesy wewnętrzne 
top: -45px; - położenie etykiet (góra/dół)
left: 50px; - ustawienie do lewej
text-align: center; - wyśrodkowanie (opcjonalnie left/right) 
width: 700px!important; - wielkość 
}
.post-labels a {
background: transparent; - kolor tła 
padding: 2px 6px; - wewnętrzne marginesy 
color: #999; - kolor tekstu 
font-size: 20px; - wielkość tekstu 
text-decoration: none;
letter-spacing: 1px ; - odstęp między literami 
}
.post-labels a:hover {
text-decoration: none;
color:  #2C76AD; - kolor po najechaniu myszą 
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
}

Gotowe :)

Brak komentarzy:

Prześlij komentarz

- 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Ń
- Weryfikacja obrazkowa wyłączona

Copyright © Szablon wykonany przez Blonparia