How to Change DISQUS’s Threaded Comments to RTL

I discovered DISQUS a few days ago and tried to work with it on my local Orchard playground. The process of adding DISQUS to the featured blog was as easy as some clicks. There’s a module, you install it and disable the internal commenting system and it’s done. Based on the fact that I’m working on a site with Persian language as the primary content language, adding DISQUS needed a little tweak.

The threaded comments view are originally left to right. Ok, it’s the default for everything; almost every language is left to right except Persian, Hebrew, Arabic and Urdu from what I recall. So what if I want to have the threaded comments in my Persian website to look really right to left? In general terms you can find the best guidelines and tops and tricks on rtl-this.com. But what DISQUS does generating threaded comments needs attention.

Here are the possible actions one can take:

  1. DISQUS supports custom CSS. You can find the appropriate stylesheet classes and override them in “Appearance” menu in DISQUS admin panel. Make sure to put a !important at the end of each attribute.
  2. Alternatively you can add jQuery scripts on your site template to work this solution out on the client side. A partial approach looked like what you see in the following
// Find all li's which are children of the main comments part
// and reverse the left and right margines.
$("#dsq-comments > li").each(
function(){
var l = $(this).css("margin-left");
$(this).css("margin-right", l);
$(this).css("margin-left", "0px");
} );
// This list could continue...
$(".dsq-comment-message").css("text-align", "right");
$(".dsq-comment-message").css("direction", "rtl");
$(".dsq-comment-footer").css("direction", "rtl");
$(".dsq-comment-header").css("direction", "rtl");

I check the above script in FireBug and it worked so I just added this to my local site. I will be blogging more about this. Meanwhile I ask the DISQUS team to find a workaround for this RTL issue for such languages. Sometimes margin-left’s should change to margin-right’s.

Advertisements

Happy New Year

2011! Just like a flash 2010 passed in front of my eyes. It’s getting unbelievable the way I’m getting involved with the things happen arround me. Still I love the way my life is going on and technology is in the center of it.

I expect we are going to face a lot of new challenges and progresses. All the fellas from computer and science world, I hope you all a Happy New Year.

Hello, World!

I started a new life again! What am I doing? here’s the very short answer:

let greeting = “Hello, World!”
printfn “%s” greeting

I’ll get into more detail in my future posts.

%d bloggers like this: