Customize Disqus CSS
During the Xmas period, a Word Press blog I was working on required the use of Disqus widgets.
Altho the out of the box layout has everything you need, the design I had to tackle with was not so easy. Various elements had to be placed in a certain way and had to support alternative colour rows.
Using the CSS override option did not do that much of a great job as pin pointing various html elements was a pain in the arse, which then I thought, can I not use PHP to do some magic with it?
The answer took a while to find but the below code, altho I still think is a very bad short cut worked a treat.
The idea was, read in the output from the Disqus js file using fopen and then using a HTML Dom module, find the html elements you wanted to use. I had to do some dodgy substr and str_replace action but the output was ideal for any CSS developer to customize.
The code below is for commenters but its the same idea for recent comments and popular threads.
<?php
require('simple_html_dom.php'); //get it from here http://simplehtmldom.sourceforge.net/manual.htm
$file = "http://disqus.com/forums/USERNAME/top_commenters_widget.js?num_items=5&hide_mods=0&hide_avatars=0&avatar_size=24";
$str = null;
$handle = fopen($file, "r");
while (!feof($handle)) {
$str .= fread($handle, 8192);
}
fclose($handle);
$str = stripslashes($str);
$strpos = strpos($str, "<ul class=");
$str = substr($str, $strpos);
$str = str_replace("');", "", $str);
$str = str_replace(" · ", "-", $str);
//echo $str;
// get DOM from URL or file
$html = str_get_html($str);
//print_r($html);
$i = 0;
foreach($html->find('li') as $e)
{
$avatar = $e->children(0);
$user = $e->children(1);
$meta = $e->children(2)->plaintext;
list($clout, $posts) = explode("-", $meta);
$alternative = (fmod($i, 2) == 0) ? "even" : "odd";
echo "<div class="top-commenters ".$alternative."">";
echo $avatar . " ";
echo $user . "<span>";
echo $posts . "</span><span>";
echo $clout . "</span>";
echo "<div style="clear: both;"></div>";
echo "</div>";
$i++;
}
?>