Intensedebate Kommentarsystem per CSS anpassen

Wer sich etwas mit WordPress und Co. beschäftigt, dem wird bereits aufgefallen sein, dass in vielen Blogs alternative Kommentarsysteme installiert sind. Derzeit gibt es in meinen Augen genau zwei brauchbare: Disqus und Intensedebate.

Ich setzte schon eine ganze Weile auf Intensedebate, da es von den WordPress-Wächtern Automattic gekauft wurde und weil es alle meine Kommentare auch bei mir im Blog lässt. Nach der Installation per Plugin werden die Kommentare mit dem Intensedebate-Server abgeglichen. Sollte der Dienst aber einmal nicht funktionieren, oder sollte ich mich dazu entscheiden, ihn nicht mehr zu nutzen, habe ich dennoch alle Kommentare in meinem Blog. Das war mir sehr wichtig. Zudem kommen natürlich die üblichen Komfortfunktionen wie Login via Intensedebate, WordPress.com, Twitter, Facebook und OpenID, sowie Kommentare in Baumansicht, Sortierungsoptionen, Benachrichtigungen und Kommentarbewertung.

Ich habe Intensedebate schon eine ganze Weile auf mobiFlip.de installiert und durfte miterleben, wie der Dienst in diverse Sprachen übersetzt wurde, so auch in Deutsch. Leider haben die Jungs einen Bug im Übersetzungssystem, welcher es nicht erlaubt hat, die oberste Überschrift (h3) des Kommentarbereichs mit zu übersetzen. Aus diesem Grund stand dort eine ganze Weile Comments (X). Ich stehe mit den Entwicklern in Kontakt und sie arbeitet eigentlich stetig an Intensedebate, leider besteht der Fehler nun schon eine ganze Weile. Für mich ein Grund mir die Anpassungsmöglichkeiten etwas genauer anzuschauen und auch gleich anzuwenden.

h3-Überschrift übersetzen

Das bereits erwähnte Problem mit der h3-Überschrift lässt sich leichter beheben als gedacht, leider bin ich etwas spät auf die Idee gekommen, da mir die Jungs von Intensedebate gesagt hatten, das wäre nicht möglich. Nativ ist es auch nicht möglich, da das Plugin via Javascript geladen wird und Ihr den Quellcode nicht direkt bearbeiten könnt, mit einem kleinen Trick lässt sich aber über die CSS-Anpassungen das Problem beheben.

Per CSS verstecken

Der Lösungsansatz ist einfach und effektiv. Da ich kein CSS-Profi bin, nehme ich gerne Optimierungstipps in den Kommetaren entgegen. Wer in die CSS-Dokumentation von Intensedebate schaut, wird nützliche Hinweise zur Anpassung des gesamten Kommentarbereichs finden. Uns reicht in diesem Fall eine kleine Änderung, welche wir einfach in die CSS-Datei unseres Blog-Themes kopieren.

#idc-container-parent #idc-container .idc-head h3 {display:none;}

Diese Anweisung bewirkt, dass die englische h3-Überschift von Intensedebate ausgeblendet wird, also komplett nicht mehr sichtbar ist.

Per PHP neu erzeugen

Die nächste Änderung nehmen wir in der single.php unseres Blog-Themes vor. Dort suchen wir die Stelle genau über dem:

<?php comments_template(); ?>

Und fügen über diesem folgendes ein:

<h3>Kommentare (<?php comments_number('0', '1', '%'); ?>)</h3>

Dies bewirkt, dass in der Artikelansicht „Kommentare (X) steht. Die Anzahl kann natürlich auch vorangestellt werden.

Das war es im Grunde genommen schon. In einzelnen Fällen kann es allerdings nötig sein, die h3-Überschrift zu formatieren. Da der Kommentarbereich meist in einem Div namens „comments“ liegt, fügen wir also in unsere CSS-Datei folgendes hinzu:

#comments h3 {font-size:24px; font-weight:normal; margin-bottom: -20px;}

Dies ist die Anweisung für meinen Blog mobiFlip.de, dort habe ich die Schrift und den Abstand nach unten definiert. Mit diesen Werten könnt Ihr etwas experimentieren. Das kommt immer auf das bereits vorhandene CSS eures Blogs an.

Wenn Ihr genannte Änderungen durchgeführt habt, müsste jetzt über dem Intensedebate Kommentarbereich die deutsche Überschrift stehen, wie auch hier im Blog zu sehen.

Optimierung für Fallback

Als letzten Schritt müssen wir noch die h3-Überschrift in der Datei comments.php entfernen. Denn wenn Intensedebate mal nicht verfügbar ist, bzw. aus irgend einem Grund der Fallback zum normalen Kommentarsystem zu Stande kommt, hätten wir sonst zwei Überschriften über dem Kommentarbereich.

In der Regel müsst Ihr den Teil direkt nach folgendem Code entfernen:

<?php if ($comments) : ?> <div id="comments">

Dort müsste so oder so ähnlich folgendes stehen, was komplett gelöscht werden muss.

<h3>Kommentare (<?php comments_number('0', '1', '%'); ?>)</h3>

Fazit

Das war schon der ganze Zauber. Leichter als gedacht und für Perfektionisten wie mich ein Negativpunkt weniger. Ich probiere in nächster Zeit natürlich weiterhin das CSS von Intensedebate zu verändern. Sollte ich auf nützliche Dinge stoßen, dann schreibe ich wieder darüber. Für weitere Tipps, Kritik und Verbesserungen wäre ich dankbar.

Teilen

Du bist hier: / / ...