WP 2.7 Kommentare via CSS gestalten – neues CSS für Themes nötig

letztes Update:04.04.09 von

WP 2.7 macht einige neue CSS class nötig. Wer vor allem seine Themes in offizielle Theme Browser geben mag, muß dies sicher berücksichtigen und threaded comments bedürfen anderer classes.

Threaded Comments 
So sehen threaded comments aus

Ich bin bekennend ein CSS Freak. Doch manchmal gibt es Dinge, die mich leicht nachdenklich machen. ;)

Nun WP 2.7 bietet threaded comments an. Also Kommentare bei denen man so wie früher bei den alten Foren direkt untereinander diskutieren kann. Wie tief – dies kann der Blog Besitzer einstellen.

Etliches an CSS class wird angeboten, um diese threaded Kommentare und normale Kommentare zu gestalten.

Ich liste mal alles auf was so an CSS classes möglich ist. Dann gibt es unten zuerst den Quellcode von 3 Kommentaren. Und dann den Quellcode von 3 Kommentaren mit einem *threaded* Kommentar.

Wer *sein* html für die Kommentare nutzen mag, findet bei Jeriko die Anleitung dazu. html Struktur der Kommentare bei WP 2.7 ändern. . Wobei ich zu bedenken gäb, dass dies bei threaded Kommentare gut überlegt sein sollte ;)

CSS class um Kommentare in WP 2.7 zu gestalten.

Nachstehendes ist direkt in die style.css kopierbar. Ich habe sehr viele CSS Kommentare dazugeschrieben, um zu erklären was was macht.

/* fuer die Kommentarliste an sich*/
ol.commentlist{}
 
/*folgende class stehen zur Gestaltung des li bereit */
 
.comment {}
.byuser {}
.comment-author-admin {}
.bypostauthor {}
 
/* class um die li der 1 Ebene zu gestalten*/
.depth-1{}
 
/*hat man Kind Kommentare gibt es dann noch soviel wie man eben braucht */
.depth-2{}
.depth-3{}
 
/* folgende gestalten das li abwechselnd, wenn man mag*/
/* erstes li*/
.even {}
.thread-even{}
/* zweites li*/
.odd {}
.alt {}
.thread-odd {}
.thread-alt{}
 
 
 
/*---ende der class fuer die li---*/
 
/* fuer die Darstellung des Kommentarautors die class des divs*/
.comment-author {}
.vcard{}
 
.comment-author cite{}
.vcard cite{}
 
.comment-author cite a{}
.vcard cite a{}
 
/* fuer den Avatar*/
img.avatar{}
/*---ende der class fuer den Autor---*/
 
/*fuer die  Zeit wann der Kommentar geschrieben wurde und den Bearbeitungslink die class des divs*/
.comment-meta {}
.commentmetadata{}
 
.comment-meta a{}
.commentmetadata  a{}
 
/*---ende der Meta Daten---*/
 
/*Kommentartext  */
 
ol.commentlist p{}
 
/*---ende des Kommentartextes ---*/
 
/*Reply Link ist auch in einem div*/
.reply{}
.reply a{}
 
/*---ende Reply Link---*/
 
 
/*Kindkommentare sind in einer ul Liste*/
 
ol.commentlist ul.children{} /*ul.children gibt es auch in der sidebar-aufpassen*/
 
/*------alle oben genannten class wiederholen sich auch unter ul children------*/

Dies bedeutet man hat sehr viele Möglichkeiten, kann jedoch niemals alle nutzen. Weniger class gestalten als angeboten ist nötig, weil sonst gar nichts mehr geht.

Nur ul.children generell festzulegen kann sich mit der Anzeige in der Sidebar gewaltigst beißen, daher sollte man hier die Hierarchie genau festlegen.

Außerdem bitte darauf achten, dass 5 Tiefen bei den Kommentaren eventuell gar nicht mehr wirklich lesbar wird, wenn man ein Design hat, dass wenig Platz bietet – und es ja Menschen gibt, die via PDA Dein Blog lesen wollen :zwinker: .

Bei Fragen einfach Fragen und hier noch das HTML zum Ansehen.

3Kommentare bei threaded comments in WP 2.7 ohne *Kind Kommentar*

 
<ol class="commentlist">			   
  <li class="comment byuser comment-author-admin bypostauthor even thread-even depth-1" id="comment-36">				     
    <div id="div-comment-36">				       
      <div class="comment-author vcard">		         
        <img alt='' src=  http://www.texto.de/'avatar avatar-32' height='32' width='32' />		         
        <cite>admin  </cite> Says:		       
      </div>		       
      <div class="comment-meta commentmetadata">        
        <a href= >November 9th, 2008 bei 00:08</a>&nbsp;&nbsp;         
        <a href=  title="Kommentar bearbeiten">edit</a>      
      </div>		       
      <p>dritter kommentar  auch noch keine dazwischen kommentare weil ichs brauche       
      </p>		       
      <div class="reply">		         
        <a rel='nofollow' href=   onclick='return addComment.moveForm("div-comment-36", "36", "respond")'>Reply</a>		       
      </div>				     
    </div>		
    </li>		   
  <li class="comment byuser comment-author-admin bypostauthor odd alt thread-odd thread-alt depth-1" id="comment-35">				     
    <div id="div-comment-35">				       
      <div class="comment-author vcard">		         
        <img alt='' src= http://www.texto.de/' class='avatar avatar-32' height='32' width='32' />		         
        <cite>admin </cite> Says:		       
      </div>		       
      <div class="comment-meta commentmetadata">        
        <a href= >November 9th, 2008 bei 00:07</a>&nbsp;&nbsp;         
        <a href=  title="Kommentar bearbeiten">edit</a>      
      </div>		       
      <p>zweiter kommentar  nix threaded  hier solang es geht       
      </p>		       
      <div class="reply">		         
        <a rel='nofollow' href=  onclick='return addComment.moveForm("div-comment-35", "35", "respond")'>Reply</a>		       
      </div>				     
    </div>		
    </li>		   
  <li class="comment byuser comment-author-admin bypostauthor even thread-even depth-1" id="comment-34">				     
    <div id="div-comment-34">				       
      <div class="comment-author vcard">		         
        <img alt='' src=   http://www.texto.de/'avatar avatar-32' height='32' width='32' />		         
        <cite>admin  </cite> Says:		       
      </div>		       
      <div class="comment-meta commentmetadata">        
        <a href= >November 9th, 2008 bei 00:07</a>&nbsp;&nbsp;         
        <a href=  title="Kommentar bearbeiten">edit</a>      
      </div>		       
      <p>erster  kommentar keine threaded       
      </p>		       
      <div class="reply">		         
        <a rel='nofollow' href=  onclick='return addComment.moveForm("div-comment-34", "34", "respond")'>Reply</a>		       
      </div>				     
    </div>		
    </li>	
</ol>

3Kommentare bei threaded comments in WP 2.7 mit *Kind Kommentar*

 
 
<ol class="commentlist">			      
  <li class="comment byuser comment-author-admin bypostauthor even thread-even depth-1" id="comment-36">				          
    <div id="div-comment-36">				              
      <div class="comment-author vcard">		                  
        <img alt='' src=  http://www.texto.de/'avatar avatar-32' height='32' width='32' />		                  
        <cite>admin   </cite> Says:		              
      </div>		              
      <div class="comment-meta commentmetadata">                 
        <a href= >November 9th, 2008 bei 00:08</a>&nbsp;&nbsp;                  
        <a href=  title="Kommentar bearbeiten">edit</a>             
      </div>		              
      <p>dritter kommentar  auch noch keine dazwischen kommentare weil ichs brauche              
      </p>		              
      <div class="reply">		                  
        <a rel='nofollow' href=   onclick='return addComment.moveForm("div-comment-36", "36", "respond")'>Reply</a>		              
      </div>				          
    </div>	   <!--end of div-comment-36-->      		
    <ul class='children'>		
      <li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="comment-37">				
        <div id="div-comment-37">				
          <div class="comment-author vcard">		
            <img alt='' src= http://www.texto.de/'  class='avatar avatar-32' height='32' width='32' />		
            <cite>admin </cite> Says:		
          </div>		
          <div class="comment-meta commentmetadata">
            <a href=">November 9th, 2008 bei 00:29</a>&nbsp;&nbsp;     
            <a href="http://www.texto.de/wp-27-kommentare-via-css-gestalten-neues-css-fuer-themes-noetig-670/"Kommentar bearbeiten">edit</a>
          </div>		
          <p>Ich bin ein Kind Kommentar
          </p>		
          <div class="reply">		
            <a rel='nofollow' href= onclick='return addComment.moveForm("div-comment-37", "37", "respond")'>Reply</a>		
          </div>				
        </div>	<!--end of div-comment-37-->	
        </li>
    </ul>	  <!--end of ul children-->   
    </li>		      
  <li class="comment byuser comment-author-admin bypostauthor odd alt thread-odd thread-alt depth-1" id="comment-35">				          
    <div id="div-comment-35">				              
      <div class="comment-author vcard">		                  
        <img alt='' src= http://www.texto.de/'   avatar avatar-32' height='32' width='32' />		                  
        <cite>admin  </cite> Says:		              
      </div>		              
      <div class="comment-meta commentmetadata">                 
        <a href= >November 9th, 2008 bei 00:07</a>&nbsp;&nbsp;                  
        <a href=  title="Kommentar bearbeiten">edit</a>             
      </div>		              
      <p>zweiter kommentar  nix threaded  hier solang es geht              
      </p>		              
      <div class="reply">		                  
        <a rel='nofollow' href=  onclick='return addComment.moveForm("div-comment-35", "35", "respond")'>Reply</a>		              
      </div>				          
    </div>		     
    </li>		      
  <li class="comment byuser comment-author-admin bypostauthor even thread-even depth-1" id="comment-34">				          
    <div id="div-comment-34">				              
      <div class="comment-author vcard">		                  
        <img alt='' src=   http://www.texto.de/'  avatar avatar-32' height='32' width='32' />		                  
        <cite>admin  </cite> Says:		              
      </div>		              
      <div class="comment-meta commentmetadata">                 
        <a href= >November 9th, 2008 bei 00:07</a>&nbsp;&nbsp;                  
        <a href=  title="Kommentar bearbeiten">edit</a>             
      </div>		              
      <p>erster  kommentar keine threaded              
      </p>		              
      <div class="reply">		                  
        <a rel='nofollow' href=  onclick='return addComment.moveForm("div-comment-34", "34", "respond")'>Reply</a>		              
      </div>				          
    </div>		     
    </li>	
</ol>
das ist eine CSS Orgie – ob hilfreich bin ich mir nicht so ganz sicher Kaffeetrinkender Smilie

18 Kommentare zu "WP 2.7 Kommentare via CSS gestalten – neues CSS für Themes nötig"

  1. Michael

    09.11.08 um 01:02

    nene, threaded brauch ich nicht, schon gar nicht wenn es jetzt jahrelang ohne auch gut lief. Das verwirrt die besucher nur. imho kann man es ja nutzen, muss aber nicht, oder?

  2. texto

    09.11.08 um 01:07

    Michael Du mußt es nicht nutzen,
    ich werde dies auch nicht tun,

    ich habe diese Art von Unterhaltung schon in den Anfangszeiten der hochmodernsten Foren – so um 1996 herum nicht gemocht ;)

    lg

  5. David Hellmann

    09.11.08 um 05:53

    oje, ob das wirklich taugt mag ich zu bezweifeln. Finde die Art der Kommentare eh völlig unschön und wie du schon gesagt hast mit ein paar Schachteln zu viel auch nicht mehr lesbar das ganze. Naja ich werde dann lieber die normale Methode weiter nutzen :)

  6. Jared

    09.11.08 um 12:52

    Ich kann mir auch nicht vorstellen das sich “threaded” in den normalen Blogs durchsetzen wird. Vielleicht bei Themenblogs in denen Diskussionen mehr wert sind als die Artikel :-) soll es ja bekanntlicherweise geben.

    PS: Ich finde deine Codeübersicht schrecklich. Willst du nicht mal ein anderes Plugin ausprobieren? z.B. WP-Syntax?
    Dann kann man deinen Code wenigstens lesen ohne sofort augenkrebs zu bekommen ;-) oder?

  7. texto

    09.11.08 um 14:20

    Hi Jared ich testete gestern grade, ob sich dieses wp-syntax mit Exec PHP verträgt, weil dies bis dato kaum ein Syntaxhighlighter tat,

    da dies gut ausging, wirds hier kurz mal krachen, wenn ich einige 100dert Posts änder per Search and Replace und dann gehts bunter zu im Code ;)

    Ich vermute, dass die threaded comments kurz eine *ach wie neu* Hype haben werden und dann wieder verschwinden,

    aber für Theme Autoren, die ihre Themes auf wordpress org haben wollen, wirds arg, die werden all dies nutzen müssen, sonst werden die Themes dort nicht angenommen –

    lg

  8. maya

    10.11.08 um 00:26

    Wenn man alles beim alten belassen will muss man da ja auch nix anpassen, oder?
    Vor solchen Änderungen hab ich immer tierische Angst^^

  9. texto

    10.11.08 um 09:32

    hi maya wie es derzeit aussieht, muss man dann nichts ändern.

    doch das kann sich noch ändern, wenn es sich ändert -findest Du hier sicher INFO und auch Hilfe

    lg

  10. Gabi

    13.12.08 um 22:25

    Hallo Monika,

    als Theme-Bastlerin kann ich mich vor den neuen Funktionen von WP 2.7 natürlich nicht drücken :-D – darum vielen herzlichen Dank für die ausführliche Beschreibung und Anleitung zu den neuen Kommentar-Funktionen! :-)

  11. texto

    13.12.08 um 23:00

    Ja Gabi mir geht es ähnlich ;)

    ich vermut dieser Artikel tat gut, damit ich selber durchblicke ;)

    jetzt muss ich meine Smilies noch in Griff bekommen, dann bin ich wieder ganz glücklich oder so …

  12. Ricarda

    25.02.09 um 04:04

    Hmmmm jetzt müsste ich nur noch wissen wie ich die (Gr)avatar-Größe ändere. Suche mich irgendwie dumm und dusselig.

  14. Nadja

    09.07.09 um 21:20

    Hey :)

    Ich würde auch gerne etwas in meinen Kommentaren ändern und ich verstehe auch wie ich die Reihenfolge der Anzeige von Autor, Datum, Zeit etc. ändern kann. Allerdings weiß ich nicht wo ich die HTML Datei finde, in der ich festlegen kann dass z.B. “.bypostauthor {}
    ” bedeutet, dass später dort steht: geschrieben vom Autor. Denn aktuell wir bei mir anzeigt: Postedt by username – Den Text würde ich gerne ändern, ich weiß nur leider nicht wo. :(

    Und dasselbe Problem habe ich bei den eigentlichen Posts auch, ich möchte diese kleinen Texte abändern und irgendwo müssen sie ja festgelegt sein. Ich finde die Datei bloß leider nicht. :(

    Wäre super wenn mir jemand helfen könnte!!

  15. Todis

    14.07.09 um 18:41

    Ehrlich gesagt muss man in WP ganz schön viel Zeit investieren, um ein Theme an die neuen Versionen anzupassen. Dazu habe ich leider keine Zeit und mir ist das ehrlich gesagt auch zu viel Arbeit, da nutze ich lieber Standard Themes.

  17. Nik

    26.06.10 um 18:55

    Wo zum Geier findet man die .css Datei in der man den Befehl “comment-meta commentmetadata” anpassen kann? :O

  18. texto

    26.06.10 um 19:35

    wenn er nicht drin steht, dazu schreiben ;)

    steht es als class im Quelltext, dann einen Punkt davor, stehts als id drin ( was ich nicht glaube) dann eine Raute davor..

    lg

6 Pings zu "WP 2.7 Kommentare via CSS gestalten – neues CSS für Themes nötig"
  1. Ξ Anleitung: Kommentare unter WordPress 2.7 gestalten Ξ UPLOAD - Magazin für digitales Publizieren Ξ
    [...] wird, was sich worauf bezieht, muss man es entsprechend gestalten. Auf Texto.de gibt es ein sehr hilfreiches Tutorial zu ...
  2. metafakten // metalinks am 14. November 2008
    [...] WP 2.7 Kommentare via CSS gestalten - neues CSS für Themes nötig [...]
  3. daburnas Logbuch » Blog Archi » Intern: Update auf Wordpress 2.7
    [...] 18:20 Uhr: Nun werden auch Trackbacks/Pingbacks und Kommentare getrennt aufgeslistet. Noch ist das aber nicht perfekt. Realisiert habe ich ...
  4. Wordpress 2.7: Kommentare formatieren - eckig
    [...] Fertige “Schablone” zum Eintragen der CSS-Definitionen [...]
  5. Qick Tipp:Avatargröße in WP 2.7 ändern
    [...] Ricarda, aka Blogblume wollte in einen Kommentar wissen, wie man denn die Größe der Avatare in WordPress 2.7 ändert. ...
  6. Immer Freitag: Die Wordpress Kolumne mit Birgit Olzem – Ausgabe #3
    [...] gute Tutorials gibt es im Netz zu finden unter anderem bei Plerzelwupp , Texto.de und [...]