Modyfikacje #3 - Autor, komentarze i data

(c)Dakota

Nie owijajmy w bawełnę, sygnaturka jest super, a ja przybywam z instrukcją na to jak sprawić iż autor, komentarze i data przelecą się do góry i będą z boku posta. Mniejsza o większe, wygląda to tak >>klik<<.
edit [30.07.2018]: Postaram się niedługo dodać nowszą, 'ulepszoną' wersję tej instrukcji. Zalinkuję ją wam w tym poście jeśli się pojawi ;)

Autor, comments & datum

h2.date-header span {
position: absolute;
top: -19px;
right: -58px;
background: #b05498;
text-transform: uppercase;
letter-spacing: 1px;
padding: 12px 5px !important;
width: 90px;
text-align: center;
 transition:all .30s;
 -moz-transition:all .30s;
 -webkit-transition:all .30s;
 -o-transition:all .30s;
}

h2.date-header span:hover {
background: #53b066 !important;
 transition:all .30s;
 -moz-transition:all .30s;
 -webkit-transition:all .30s;
 -o-transition:all .30s;
}

.post-author {
position: absolute;
top: -12px;
right: -73px;
font-size: 10px;
color: #fff !important;
background: #b05498;
display:block;
text-transform: uppercase;
padding: 10px 5px !important;
width: 90px;
text-align: center;
 transition:all .30s;
 -moz-transition:all .30s;
 -webkit-transition:all .30s;
 -o-transition:all .30s;
}

.post-author:hover {
background: #53b066 !important;
 transition:all .30s;
 -moz-transition:all .30s;
 -webkit-transition:all .30s;
 -o-transition:all .30s;
}

.comment-link {
position: absolute;
top: 25px;
right: -73px;
font-size: 10px;
color: #fff !important;
background: #b05498;
display:block;
text-transform: uppercase;
padding: 10px 5px !important;
width: 90px;
text-align: center;
 transition:all .30s;
 -moz-transition:all .30s;
 -webkit-transition:all .30s;
 -o-transition:all .30s;
}

.comment-link:hover {
background: #53b066 !important;
 transition:all .30s;
 -moz-transition:all .30s;
 -webkit-transition:all .30s;
 -o-transition:all .30s;
}

Wszystko już tłumaczę, spokojnie nie stresuj się:

> h2.date-header span - (dłuższa wersja tego --> .date-header, czyli data)

> .post-author - autor postu;

> .comment-link - jest to link do wszystkich komenatrzy;

> position:absolute !important - oznacza to, że możemy ustawić gadżet etc. w każdym wybranym przez nas miejscu;

> width - jest to długość naszego ""linku"";

>  transition:all .30s; - czas ogólnego przejścia;
 -moz-transition:all .30s; - czas przejścia w Firefox Mozilla i Safari;
 -webkit-transition:all .30s; - czas przejścia w Chrome;
 -o-transition:all .30s; - czas przejścia w Opra.

Wartości można zmieniać do woli. To  by było na tyle w tej instrukcji. Życzę miłego korzystania, pochwalcie się swoimi ""wynikami"".