Modyfikacje i anatomia komentarzy

Dzisiaj przede wszystkim modyfikacje, bo skupimy się na komentarzach w wersji CSS, które nam na te modyfikacje pozwolą. Anatomia wersji HTML jest krótka i w dużej części bezużyteczna, dlatego też więcej będzie o praktyce, czyli kodach CSS, a teorie zostawimy na sam koniec.

Kody z Was zapewne kojarzy. Typu comments p czy #comment-holder, ale dla upewnienia i rozwinięcia tej wiedzy wypiszę wszystkie selektory jakie kiedykolwiek obiły mi się o oczy i uszy + ich ewentualne ustawienia potrzebne, aby wyglądały dobrze. 

• .comments p - obejmują cały komentarz, bez daty, bez autora, to po prostu treść komentarza. Jak we wszystkich polach tekstowych konieczne jest użycie padding:5px ( około/wartość przypadkowa );
• .comments-content lub #comment-holder- wszystkie komentarze razem wzięte. Jeśli chcemy dać tło lub ramkę dla właśnie obszaru komentarzy pod postem należałoby użyć tego selektora. Raczej wymagane jest znowu użycie komendy padding. 
• .comment-header - nagłówek komentarza - data i autor;
• .comment-block - .comment-header i .comments p razem wzięte;
• .comments .comments-content .user - efekt "dla" autora komentarza;
• .comments .comments-content .datetime  - efekt "dla" daty komentarza;
• .comments .comment .comment-actions a - "odpowiedz" i "usuń" - modyfikacje tych dwóch linków to robota dla tego selektora. Jednak chcąc użyć komendy background, konieczne jest późniejsze dodanie paddingu: górnego i dolnego ( padding-top & padding-bottom ) o wartości ok. 2px i lewego i prawego ( padding-right & padding-left ) równego około 4/5px.
• .comments .thread-toggle a - kojarzycie napis "odpowiedzi" lub "replies"? Jeśli tak, to właśnie za to odpowiada ten selektor. Podobnie jak powyżej konieczne będzie użycie paddingu dla "wszystkich kierunków". Możecie robić to po kolei, ale równie dobrze możecie dodać wartość dla "całego" paddingu 2px & 5px. W takiej formie 2px odpowiadają za padding-bottom i padding-top, a 5px odpowiada jednocześnie za padding-right i padding-left. 
• .comments .avatar-image-container - avatar przy komentarzach. Na darmo jednak zmieniać jego wymiary, raczej można dodać border-radius czy sam border. 
• .comment-replies - odpowiedzi do danego komentarza;
• .continue a - kolejny napis "odpowiedz" lub "reply", jednak tym razem to napis tuż pod ostatnią odpowiedzią na komentarz. Bardzo ciekawe i inne użycie to dodanie do selektora float:right; 

No to kodzinki mamy za sobą. W tej chwili własnie zastanawiam się czy przypadkiem nie zrezygnować z dalszej części postu przez jej istną bezużyteczność. Oczywiście mogłabym napisać jak wyróżnić komentarze autora czy podrzucić jakiś pomysł na dostosowanie komentarzy i obszernie je opisać, ale powiem Wam do rana by mi się zeszło. A rano to ja muszę zmykać zarabiać pieniądze na mój nowy sprzęcik ( który już zdobył miejsce w moim sercu, chociaż nie mam zielonego pojęcia co to właściwie będzie ). A jak już sprzęcik nowy będzie to będzie rok szkolny, ale Tyler będzie działać na pełnych obrotach, bo dorwie wreszcie się do dobrze działającego komputera! Więc umawiamy się, że post o dostosowywaniu komentarzy autora ( tak, wiem, masa tego w internecie ) będzie za jakiś czas. A teraz, żeby nie było smutno to kody CSS na komentarze ze zdjęcia. :) Taki skromny bonus. :)

Łapcie nieśmiałą kodzinkę i bawcie się komentarzami! 

.comments .comments-content .user{text-transform:uppercase; font-size:7pt;color:#2472c1;}
.comments .comments-content .datetime { font-size:6pt;text-transform:uppercase; }
.comment-header { border-bottom:1px dotted #ddd;}
.comments .comment .comment-actions a,.comments .thread-toggle a { background:#f1f1f1; padding:2px 5px;font-size:6pt;margin-right:3px;text-transform:uppercase; }
.comments .comment .comment-actions a:hover,.comments .thread-toggle a:hover {color:#fff; background:#2472c1;}
.comments .avatar-image-container {border-radius:3px;}
.comment-replies { background:#fbfbfb;border-radius:3px;}

Do zobaczenia wkrótce!