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

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
22

22 Beiträge zu “WP 2.7 Kommentare via CSS gestalten – neues CSS für Themes nötig

  1. Kommentar Autor
    Michael
    Kommentar

    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. Kommentar Autor
    Monika
    Kommentar

    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

  3. Kommentar Autor
    David Hellmann
    Kommentar

    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 :)

  4. Kommentar Autor
    Jared
    Kommentar

    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?

  5. Kommentar Autor
    Monika
    Kommentar

    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

  6. Kommentar Autor
    maya
    Kommentar

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

  7. Kommentar Autor
    Monika
    Kommentar

    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

  8. Ping metafakten // metalinks am 14. November 2008

  9. Ping daburnas Logbuch » Blog Archi » Intern: Update auf Wordpress 2.7

  10. Kommentar Autor
    Gabi
    Kommentar

    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. Kommentar Autor
    Monika
    Kommentar

    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. Kommentar Autor
    Ricarda
    Kommentar

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

  13. Ping Qick Tipp:Avatargröße in WP 2.7 ändern

  14. Kommentar Autor
    Nadja
    Kommentar

    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. Kommentar Autor
    Todis
    Kommentar

    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.

  16. Ping Immer Freitag: Die Wordpress Kolumne mit Birgit Olzem – Ausgabe #3

  17. Kommentar Autor
    Hans Peters
    Kommentar

    Ein wirklich sehr interessater Artikel!

    Ich bitte um mehr Infos zu diesem Thema …

    Vielen Dank!

  18. Kommentar Autor
    Nik
    Kommentar

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

  19. Kommentar Autor
    Monika
    Kommentar

    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