Jak zrobić etykiety nad tytułem wpisu

CSS Tutorial wpis

Jak zrobić etykiety nad tytułem wpisu

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:

.post-labels { font-family: Open Sans; position: absolute; padding: 10px 10px!important; top: -45px; left: 50px; text-align: center; width: 700px!important; } .post-labels { color: transparent; } .post-labels a { background: transparent; padding: 2px 6px; color: #999; font-size: 20px; text-decoration: none; letter-spacing: 1px ; } .post-labels a:hover { text-decoration: none; color: #2C76AD; transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s; -o-transition:all 0.5s; }

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 :)

Czytaj dalej