Jak edytować wygląd komentarzy - Blogger

czwartek, 18 lutego 2016

Ostatnio zdałam sobie sprawę, że prawie każdy (główny) element bloga został przerobiony, niektóre nawet po kilka razy. Niestety, zabrakło jednego - komentarzy. Tak, komentarze również da się zmienić. Owszem, co raz więcej jest blogów, które mają wprowadzony system komentowania Disqus, ale jak wiadomo są zwolennicy tego systemu oraz przeciwnicy, którzy nadal są wierni systemowi komentowania Blogger i ten wpis jest skierowany do nich.

Tak jakby ktoś zapomniał o tym, jak wyglądają komentarze Bloggera przed modyfikacją:

Skoro już sobie przypomnieliśmy, to w takim razie nadszedł czas na to, aby powiedzieć sobie jakie selektory będą nam potrzebne. Oto one:

.comment-header - nagłówek komentarzy z nazwą komentującego, datą i godziną
.comments h4 - nagłówek komentarzy, nad wszystkimi komentarzami pod wpisem
.comment p - wszystkie komentarze
.comments .comment .comment-actions a, .comments .thread-toggle a - przyciski odpowiedz i usuń pod komentarzem
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover - przyciski odpowiedz i usuń pod komentarzami, po najechaniu na nie myszką
.avatar-image-container - avatar komentarzy (możemy ustalić obramowanie)
.comments .avatar-image-container,  .comments .avatar-image-container img - zdjęcie w avatarze

Wszystkie te selektory znajdziecie również TUTAJ

Skoro poznaliśmy selektory, jakie będą nam potrzebne do zmienienia wyglądu naszych komentarzy, to teraz możemy przejść do szablon - dostosuj - zaawansowane - dodaj arkusz CSS. Już wiemy jak dopisywać dany styl do selektora, więc zaczynamy naszą zabawę.

Zaczniemy od zmiany nagłówka z nazwą komentującego, datą i godziną, ja rozpisałam to sobie tak:

.comment-header {
font-family: Arial;
letter-spacing: 2px;
font-weight: 700;
font-size: 16px;
text-transform: uppercase;}
.comment-header a:link {color: #c27ba0;}
.comment-header a:visited {color: #c27ba0;}

Jak widzicie dodatkowo dodałam kolor dla linków i dla linków odwiedzonych. Musimy pamiętać, że jeśli chcemy zmienić kolor nazwy użytkownika, daty i godziny to musimy dopisać .comment-header a:link i .comment-header a:visited

Efekt:

Kolejna rzecz to nagłówek komentarzy, nad wszystkimi komentarzami, czyli w moim przypadku "2 komentarze".  Kod rozpisałam sobie tak:

.comments h4 {background: #c27ba0;
text-align: center;
padding: 10px;
color: #fff;
text-transform: uppercase
font-size: 20px;
letter-sapcing: 2px;
font-family: Arial;
font-weight: 700;}

Efekt:

Teraz zajmiemy się selektorem .comment p, który odpowiada za wszystkie komentarze, ja rozpisałam go sobie tak:

.comment p {
color: #e06666;
font-size: 15px;
font-family: Arial;
}

Efekt:

Nadszedł czas na zmienienie wyglądu przycisków odpowiedz i usuń. Kody rozpisałam tak:

.comments .comment .comment-actions a, .comments .thread-toggle a {
background: #c27ba0;
font-size: 8px;
padding: 5px;
margin: 5px 5px;
font-family: arial;
color: #fff;
text-transform: uppercase;}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover {
background: #e06666;
font-size: 8px;
padding: 5px;
margin: 5px 5px;
font-family: arial;
color: #fff;
text-transform: uppercase;
border-radius: 10px;}

Efekt:

Przyszedł czas na avatary. Kod rozpisałam tak:

.avatar-image-container {margin-top: 20px;
margin-left: -20px;
border: 3px solid #e06666 !important;
shadow: 5px 5px 2px #FFFFFF;
}
.comments .avatar-image-container{
width: 55px;
max-height: 55px;
}
.comments .avatar-image-container img{
max-width: 55px;
height: 55px;
}

Jak widzicie, nie potrzeba nie wiadomo jak dużej znajomości CSSa, żeby uzyskać swój własny wygląd dla komentarzy. Mam nadzieję, że komuś ten wpis pomoże przy tworzeniu własnego szablonu :)

Jeśli spodobał Ci się wpis, przekaż go dalej :)