Komentarze - kolorowanie wpisów komentatorów

Tuningu komentarzy ciąg dalszy - dziś kwestia widocznych już co prawda wczoraj indywidualnych teł dla komentujących.
Tak więc oprócz grzebania w kodzie samego szablonu będzie sporo o stylach CSS. Temat rzeka więc podam tylko podstawowe informacje - resztę doszukacie sami na różnorakich kursach w sieci.

Na początek edytujemy nasz szablonik rozszerzamy szablony widżetów i szukamy: <b:loop values='data:post.comments' var='comment'> ta część odpowiada za pętle komentarzy więc tuż pod nią doklejamy nasz nowy kawałek kodu:

<div expr:class='&quot;comment-div comment-&quot; + data:comment.author +  &quot; comment-&quot; + data:comment.authorClass'>

teraz powoli scroolując linie (około 25) kodu szukamy końca pętli czyli </b:loop> i tuż przed nią wklejamy </div>

Umnie to wygląda mniej więcej tak: (w środku wklejone poprzednio fragmenty kodu licznika komentarzy oraz blokera)

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
  <b:loop values='data:post.comments' var='comment'>
   <div expr:class='&quot;comment-div comment-&quot; + data:comment.author +  &quot; comment-&quot; + data:comment.authorClass'>
     <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
     <b:if cond='data:comment.favicon'>
      <img expr:src='data:comment.favicon'/>
     </b:if>
     <a expr:name='data:comment.anchorName'/>
     <b:if cond='data:blog.enabledCommentProfileImages'>
      <data:comment.authorAvatarImage/>
     </b:if>
     <b:if cond='data:comment.authorUrl'>
      <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
     <b:else/>
      <data:comment.author/>
     </b:if>
     <data:commentPostedByMsg/>
     <!-- comments numerator -->
     <span class='comment-number'><script type='text/javascript'>
     CommentsCounter=CommentsCounter+1;
     document.write(CommentsCounter)
     </script></span>
    </dt>
    <dd expr:class='&quot;comment-body &quot; + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
     <b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/></span>
     <b:else/>
      <p>
     <!-- comments kicker -->
      <b:if cond='data:comment.authorUrl == &quot;http://www.blogger.com/profile/00963620857269804985&quot;'>
       <p class='banned-comment' onClick='window.location.replace(&quot;http://tinyurl.com/comentkicker&quot;)'/>
      <b:else/>
       <data:comment.body/>
      </b:if>
     <span class='interaction-iframe-guide'/>
     </p>
    </b:if>
   </dd>
   <dd class='comment-footer'>
     <span class='comment-timestamp'>
     <a expr:href='data:comment.url' title='comment permalink'>
     <data:comment.timestamp/>
     </a>
     <b:include data='comment' name='commentDeleteIcon'/>
     </span>
    </dd>
   </div>
  </b:loop>
 </dl>

z dzisiejszej edycji szablonu to by było na tyle :) więc zapisujemy zmiany w szablonie i przechodzimy do projektanta w celu dodania stosownych wpisów arkuszy CSS

Jeśli w naszym blogu mamy włączone awatary u komentujących możemy je obsługiwać z arkusza .avatar-stock jako że mamy do czynienia z grafiką ustawimy jej odpowiednie tło w przypadku gdy nasz komentator nie posiada awatara.
Aby tło się wyświetliło musimy zadeklarować wielkość i szerokość :) bo jeśli nasz komentator nie ma awatara to jego grafika ma nic/zero/null wielkości . Wszystko jasne? Poniżej stosowny kod arkusza CSS

.avatar-stock img {
width:37px;
height:37px;
background: transparent url(http://i.imgur.com/F6e4S.png) no-repeat center center;
}

Szablon narzuca nam kanciaste ikonki mi akurat one nie odpowiadają więc wprowadzam stosowne poprawki:

#comments-block .avatar-image-container, .avatar-stock img, .vcard img {
border: 0px solid #BFB186;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}

Pole w którym pojawia się nasz komentator wzbogaciło się o kilka dodatkowych klas. Mamy teraz grupy użytkowników typu autorzy bloga, autorzy posta oraz zalogowani komentujący i anonimowi. To nie wszystko Każdy komentator ma teraz swoją własną klasę, tak więc możemy każdemu przypisać unikatowy styl do jego komentarza. A co jak modyfikować to z rozmachem ;) choć akurat to ostatnie wykorzystamy do banowania sporej grupy niechcianych komentujących :)

Na początek ogólne ustawienia wyglądu tego pola. W moim blogu pojawiają się zaokrąglone rameczki kodu więc i pole komentarzy zostało wzbogacone o stosowny border jego kod to pierwsze 4 linie następnie mamy marginesy i spad tekstu wyświetlanego w ww obramowaniu. Dla początkujących generator On-line.  Kod arkusza CSS poniżej:

.comment-div {
border: 1px solid #BFB186;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin:12px 10px;
padding:8px;
}

Tło mogło być ustawione w poprzednim arkuszu. Możliwości wykorzystania arkusza .comment-div jest tak wiele że nawet nie rozpisuję się na ten temat. W skrócie: poniższy kod ma na celu ustawić jednakowe tła dla wszystkich, oraz takie same tła na zdarzenie (najechanie myszką :HOVER),    Kod arkusza CSS jak zwykle poniżej ;)

.comment-div, .comment-div:hover {
background: #FFFFFF url(https://projects.centos.org/svn/artwork/trunk/Extras/Moin/TreeFlower/img/moin-toc-background.png) no-repeat right -50px;
}

Ciąg dalszy personalizacji kodu czyli nasz grupy autorów i ich arkusz .comment-blog-author następnie nasi komentujący z imienia .comment-st-A-ch czyli np ja ;) i kilka przykładów kolorystyki tła dla każdego z osobna oraz grupowania arkuszy. .comment-Lulu, .comment-Iva itd...

.comment-blog-author, .comment-st-A-ch {
background-color: #F0FAF0;
}
.comment-Sonnekern {
background-color: #F0FAFA;
}
.comment-Lulu, .comment-Iva {
background-color: #FFFAFA;
}
.comment-Anonimowy {
background-color: #FAFAFA;
}

nie używane prze zemnie arkusze stylu to:

• niezalogowani - .comment-
• administartorzy - .comment-blog-admin
• anonimowi w innych językach tutaj np eng. - .comment-Anonymouse

Z elementów na moim blogu to by było tyle, a na koniec bonus - banowanie komentatora. Poniżej kod na banowanie anonimowych oraz jak zwykle niezastąpionego Sonnekern'a którego pozdrawiam..

.comment-Anonimowy .comment-body, .comment-Sonnekern .comment-body {
background: transparent url(http://i.imgur.com/QMyEB.png) repeat-y left top;
width:100%;
height:25px;
}
.comment-Anonimowy p, .comment-Sonnekern p {
display: none;
}

(przy większej ilości banowanych nadkładamy sporo kodu, tak więc napiszę kiedyś stosowny akcelerator by to zautomatyzować - więc obserwować...)

W planach na przyszłość gadżet top-komentator który wyróżni nam automatycznie zwycięzce.  Piszcie komentarze i motywujcie mnie do pracy dołączając do obserwujących.
 
Efekty chyba widać poniżej, a więcej modyfikacji z ww sekcji jest opisane tutaj: Tuning komentarzy
PS. Tak przy okazji kolorowania ;) od dziś w FireFoxie zaznaczony kod też otrzymał stosowne kolorowanie. 



10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110