Dem Wordpress-PlugIn "Social" zu ordentlich umgebrochenen Kommentarzeilen verhelfen

Dem Wordpress-PlugIn "Social" zu ordentlich umgebrochenen Kommentarzeilen verhelfen

Das Wordpress PlugIn Social ist ein gutes Werkzeug, um Wordpress Blogs mit twitter und facebook zu verbinden. Benutzer können sich mithilfe des PlugIns mit ihren facebook- oder twitter-Accounts anmelden (würde ich allerdings meinen Kunden eher nicht empfehlen), außerdem regelt es die Kommunikation zwischen dem Blog und den Social Media-Diensten. Einmal angebunden, werden Blogposts dorthin weitergegeben und Retweets (im Falle von twitter) und Kommentare (im Falle von facebook) auf Wunsch zu den Kommentaren des Beitrags auf der Blog-Seite gepackt. 

Gerade die Kommentare sehen aber bei schmalen Inhahltsspalten nicht besonders gut aus. Sie brechen nicht korrekt um und ragen rechts aus dem Inhaltsbereich heraus.

Ändern kann man das durch eine kleine Überarbeitung der comments.css (zu finden unter wp-content/plugins/social/assets/comments.css).

In Zeile 511 findet man folgenden Eintrag:

#social .social-comment-body {  
font-size: 14px;
line-height: 18px;
overflow: hidden;  
    /**   * @workaround Prevent ugly
    overflow issues in IE6
   * @valid yes
   * @affected IE6
   */          
width: 100%;
}
 

Nett gedacht: IE6 hat ein Problem mit dem Kommmentarfeld, also wird extra für ihn das Attribut "width" auf 100 % gesetzt. Nur leider kommen neuere Browser damit gar nicht gut klar. Deswegen ändern wir das cSS so ab, dass das width-Attribut einzig für den IE6 sichtbar ist, und zwar mit dem Voranstellen von * html. Dieser Trick ist ein sogenannter Browser-Hack und wird auch als "HTML-Star-Hack" bezeichnet. Kein anderer Browser interpretiert CSS-Attribute, die hinter diesem Hack stehen, nur der IE6. 

Unser neues CSS sieht wie folgt aus:

#social .social-comment-body {  
font-size: 14px;  
line-height: 18px;  
overflow: hidden; 
}
* html #social .social-comment-body {
    /**
    * @workaround Prevent ugly
    overflow issues in IE6 
    * @valid yes 
    * @affected IE6
    */ 
width: 100%;
}
 

Jetzt brechen die Kommentare auch in modernen Browsern korrekt um.

Es muss nur noch beachtet werden, diese Modifikation entweder in der style.css des Themes zu verewigen oder nach jedem Update von "Social" wieder in die comments.css zu schreiben.