Jak edytować wygląd komentarzy - Blogger
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 {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
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;}
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:
Nadszedł czas na zmienienie wyglądu przycisków odpowiedz i usuń. Kody rozpisałam tak:
Efekt:
Przyszedł czas na avatary. Kod rozpisałam tak:.comment p {Efekt:
color: #e06666;
font-size: 15px;
font-family: Arial;
}
.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:
.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 :)
