Mój Blog - Mój Kod: Stopka postu oraz komentarze

Stopka postu jest ostatnim elementem, z którym styka się czytelnik. Znajdują się w niej najczęściej informacje o autorze, odnośniki do innych portali społecznościowych, etykiety, odnośnik do komentarzy. A jeśli chodzi o komentarze, to informacje odnośnie nich również zamieszczę w tym poście.

Stopka postu - ogólnie

Jak już wiemy z poprzedniego wpisu, w stopce znajdują się 3 "linie", w których możemy umieszczać elementy. Jakie to są elementy oraz jak z poziomu kodu można zmieniać ich położenie - pisałam w Post od strony HTMLa i CSSa. Natomiast w tej chwili zajmiemy się ich wyglądem.

.post-footer {
font-family: Verdana;
font-size:14px;
border-top: 1px solid #d0d0d0;
padding:5px 10px;
text-align:center;
}

Ogólnym selektorem dla całej stopki jest .post-footer. To tutaj możemy nadać rodzaj fontu, rozmiar tekstu. Border-top jest odpowiedzią na linie oddzielającą tytuł od wpisu. Tam jest ona umieszczona na dole, tutaj umieszczamy ją nad stopką. Padding to marginesy wewnętrzne, które bardzo szczegółowo opisywałam tutaj. Text-align to wyrównanie całego tekstu, a center oznacza wyśrodkowanie.

Linie w stopce postu

Oprócz selektora ogólnego, możemy również użyć selektorów konkretnych linii.

.post-footer-line-1 {
font-size:18px;
}

.post-footer-line-2 {
font-size:16px;
}

.post-footer-line-3 {
font-size:14px;
}

Dla przykładu, zmieniłam rozmiar tekstu w poszczególnych liniach, ale można także dodać kolor tła za pomocą deklaracji background.
Natomiast wchodząc jeszcze głębiej, możemy ustalić wygląd dla konkretnego elementu w stopce. W moim przypadku będzie to odnośnik "czytaj więcej", etykiety oraz odnośnik do komentarzy.

Czytaj więcej

.jump-link {
text-transform:uppercase;
}

.jump-link a {
color:#ffffff;
background:#d0d0d0;
display:block;
padding:3px 10px;
}

.jump-link a:hover {
color:#000000;
background:none;
display:block;
padding:3px 10px;
}

Za link typu "czytaj więcej" odpowiada selektor .jump-link. Z jego pomocą można ustalić zupełnie inny rodzaj fontu, rozmiar tekstu, jego kolor. Text-transform:uppercase zmienił wszystkie litery na duże. Można je również zmienić tylko na małe za pomocą polecenia lowercase.
Nie zapominajmy także, że jump-link jest linkiem i możemy ustawić jak ma wyglądać jako link oraz link, na który najedziemy myszką. Zwykły link będzie determinowany za pomocą selektora .jump-link a. Nadaję ku kolor tekstu oraz tło. Polecenie display:block tworzy mi z niego blok tekstu, który rezerwuje sobie przestrzeń zarówno po lewej jak i prawej. Dzięki temu tło rozciąga się od lewej krawędzi do prawej . O tej opcji będę jeszcze nie raz wspominać.
Drugi selektor z a:hover będzie oznaczał link po najechaniu na niego. O linkach rozpisywał się tutaj. Możemy zmienić jego kolor tekstu, tło, które u mnie jest wyłączone.

Etykiety w stopce postu

<!-- ETYKIETY POSTU-->
<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>

Zacznijmy od samej budowy etykiet. Znajdziemy ją po rozwinięciu części kodu o id="post".

Każdy element w stopce postu zaczyna się od znacznika <span> i kończy </span>. Jest to bardzo istotne w momencie, kiedy zachcemy zmienić położenie danego elementu. Wracając do samych etykiet, możemy przykładowo usunąć nazwę elementu poprzez skasowanie <data:postLabelsLabel/>. Dodatkowo mamy możliwość zmiany elementu oddzielającego poszczególne nazwy etykiet.

Pomiędzy znacznikami <b:if...> </b:if> znajduje się przecinek. Możemy go zastąpić kropką, kwadratem, literką i czym tylko sobie wymyślimy. Możemy go również skasować.
Teraz zajmijmy się wyglądem z poziomu CSSa.

.post-labels {
text-transform:uppercase;
padding:5px 5px;
font-size:12px;
}

Selektor etykiet w poście to .post-labels. Również i tutaj ustawiłam, aby wyrazy składały tylko z dużych liter. Dodatkowo zmniejszyłam rozmiar tekstu.

Link do komentarzy

.post-footer-line-3 {
margin-top:5px;
text-align:right;
}

.post-comment-link a {
background:#ed1a45;
color:#fff;
padding:5px 10px
}

.post-comment-link a:hover {
background:none;
color:#ed1a45;
padding:5px 10px
}

Element ten znajduje się w trzeciej linii, dlatego użyłam tutaj selektora .post-footer-line-3, aby dodać margines górny i odsunąć 2 oraz 3 linie od siebie. Dodatkowo ustawiłam ten element po prawej stronie. Następnie postąpiłam identycznie jak przypadku .jump-link i nadałam wygląd zwykłemu linkowi oraz takiemu, na który najeżdżamy myszką. Nie użyłam tutaj display:block, dlatego tło jest pod samym napisem oraz rozciąga się jeszcze o marginesy wewnętrzne.

Komentarze

Następną rzeczą, jaką się zajmiemy, będzie blok z komentarzami. Wystarczy kliknąć na link do komentarzy, aby całość wyświetliła się pod postem. W pierwszej kolejności ustalimy wygląd dla napisu informującego nas o ilości komentarzy. Jest on nagłówkiem <h4>.

h4 {
font-size:15px;
color:#fff;
display:block;
background:#ed1a45;
padding:5px 10px;
}

Nadałam mu wielkość tekstu i jego kolor, tło, marginesy wewnętrzne oraz display:block, dzięki temu tło rozciąga mi się od lewej do prawej krawędzi.

Za cały blok z komentarzami odpowiada selektor .comments. Natomiast pojedynczy komentarz będzie determinowany przez selektor .comment. Można mu nadać ramkę bądź tło. Kolejną rzeczą jest awatar komentującego.

.avatar-image-container {
border-radius:50%;
margin-left:5px;
}

Używamy selektora .avatar-image-container. Domyślnie jest to kwadrat. Jednak ja użyłam border-radius:50% dzięki czemu wszystkie rogi zakrzywiły mi się aż do kształtu koła. Lewy margines odsuwa mi awatar od krawędzi.
Obok awatara znajduje się .comment-header, czyli nagłówek komentarza. Mamy w nim .user.blog-author, który oznacza nick osoby piszącej oraz .datetime.secondary-text, który z kolei jest datą. Możecie im śmiało nadawać tło, inny font, czy rozmiar tekstu.

.comment-header {
border-bottom:1px solid #d0d0d0;
}

Ja jedynie nadałam linię oddzielającą nagłówek postu od jego zawartości.
Aby modyfikować treść komentarza, używamy .comment-content. Natomiast za linki "Odpowiedz" i "Usuń" odpowiada .comment-actions.secondary-text.

.comment-actions.secondary-text {
float:right;
padding:5px;
}

Użyłam tutaj float:right dzięki czemu te dwa linki odsunęłam do prawej krawędzi całego komentarza. Dodatkowo nadałam tutaj marginesy wewnętrzne. A poniżej efekt tych operacji.

Post krótki i do tego pojawia się dopiero teraz. Przepraszam ;< Postanowiłam go jednak zredagować i opublikować, bo ileż można czekać. U mnie pracowicie, a przynajmniej 90% czasu przeznaczonego na jakąkolwiek pracę w domu, przeznaczam na projekty uczelniane. Ewentualnie nadrabianie czytania postów. A także nagminną grę w Seasons na BGA. I programowanie. I picie kawy na zmianę z kakao. I nowy serial! Po tym jak wróciłam po świętach na mieszkanie, wciągnęłam się w oglądanie "Wspaniałego stulecia", ponieważ w domu oglądaja to rodzice, dziadkowie, ciotka z wujkiem... No rodzinny serial. Z ciekawości odpaliłam sobie pierwszy odcinek... i skończyłam dopiero po 7, kiedy zegar pokazał mi godzinę 1:00 w nocy. Wciąga ;)
Czy wspominałam, że jestem posiadaczką uroczo krótkiej fryzury? Jak mnie natchnie, pozmieniam wszystkie te zdjęcia w różowo-szarym swetrze na coś bardziej aktualnego. Bo to zdjęcie będzie już miało 5 lat :D Ale i tak je uwielbiam.