{"id":4679,"date":"2009-08-22T08:00:21","date_gmt":"2009-08-22T13:00:21","guid":{"rendered":"http:\/\/www.casadeblundell.com\/jonathan\/?p=4679"},"modified":"2013-06-11T07:30:31","modified_gmt":"2013-06-11T13:30:31","slug":"custom-styling-for-disqus-css","status":"publish","type":"post","link":"http:\/\/casadeblundell.com\/jonathan\/custom-styling-for-disqus-css\/","title":{"rendered":"Customize Disqus WordPress plugin with CSS"},"content":{"rendered":"<p>I&#8217;ve recently added the <a href=\"http:\/\/disqus.com\">Disqus<\/a> plugin to two of my WordPress blogs\/sites &#8211; <span class=\"removed_link\" title=\"http:\/\/www.encounterthis.com\/blog\">encounterthis.com\/blog<\/span> and <a href=\"http:\/\/somethingbeautifulpodcast.com\">somethingbeautifulpodcast.com<\/a>.<\/p>\n<p>Unfortunately I found out Friday morning that the default CSS styling makes reading the comments almost impossible if you&#8217;re using a dark\/black background. I did a lot of searching and saw suggestions to add a Javascript command to the header file, create an entirely separate CSS file and more. None of them seemed to work for me. I just wanted an easy\/non-Java option.<br \/>\n<!--more--><br \/>\n<iframe src=\"http:\/\/rcm.amazon.com\/e\/cm?lt1=_blank&#038;bc1=000000&#038;IS2=1&#038;bg1=FFFFFF&#038;fc1=000000&#038;lc1=0000FF&#038;t=malesurvival&#038;o=1&#038;p=8&#038;l=as1&#038;m=amazon&#038;f=ifr&#038;md=10FE9736YVPPT7A0FBG2&#038;asins=0470568135\" style=\"width:120px;height:240px;\" scrolling=\"no\" marginwidth=\"0\" marginheight=\"0\" frameborder=\"0\" align=\"right\"><\/iframe>So with some help from my <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/60\">Firefox Web Developer plugin<\/a> I was finally able to figure out the CSS styling and changed it to my liking.<\/p>\n<p>I just added the following code to my main CSS page for the site:<\/p>\n<p><code><br \/>\n\/* --- disqus css -- *\/<\/p>\n<p>#disqus_thread {<br \/>\ncolor: #ffffff;<br \/>\nborder-style: 0px solid;<br \/>\nborder-color: #cccccc;<br \/>\npadding: 5px;<br \/>\n}<\/p>\n<p>#dsq-content #dsq-comments .dsq-comment-body {<br \/>\ncolor: #fff;<br \/>\nbackground-color: #000000;<br \/>\n} <\/p>\n<p>.dsq-reaction-body {<br \/>\ncolor: #fff;<br \/>\n}<\/p>\n<p>.dsq-reaction-header cite, .dsq-reaction-header span {<br \/>\ncolor: #ccc;<br \/>\n}<\/p>\n<p>.dsq-reaction-retweets {<br \/>\ncolor: #ccc;<br \/>\n}<\/p>\n<p>\/*--- end disqus css --*\/<br \/>\n<\/code><\/p>\n<p>There may be some duplication here, but for whatever reason, this is what got the styling to work how I wanted it to.<\/p>\n<p>To use this, simply copy and paste it into your sites main CSS file and then make any further customizations.<\/p>\n<p>The key is the CSS class selectors. Once you get those figured out, you can do pretty much whatever styling you want.<\/p>\n<p>See the final result:<\/p>\n<div class=\"tiled-gallery type-rectangular tiled-gallery-unresized\" data-original-width=\"660\" data-carousel-extra='null' itemscope itemtype=\"http:\/\/schema.org\/ImageGallery\" > <div class=\"gallery-row\" style=\"width: 660px; height: 420px;\" data-original-width=\"660\" data-original-height=\"420\" > <div class=\"gallery-group images-1\" style=\"width: 509px; height: 420px;\" data-original-width=\"509\" data-original-height=\"420\" > <div class=\"tiled-gallery-item tiled-gallery-item-large\" itemprop=\"associatedMedia\" itemscope itemtype=\"http:\/\/schema.org\/ImageObject\"> <a href=\"http:\/\/casadeblundell.com\/jonathan\/custom-styling-for-disqus-css\/disqus2\/\" border=\"0\" itemprop=\"url\"> <meta itemprop=\"width\" content=\"505\"> <meta itemprop=\"height\" content=\"416\"> <img decoding=\"async\" class=\"\" data-attachment-id=\"4680\" data-orig-file=\"http:\/\/casadeblundell.com\/jonathan\/wp-content\/uploads\/disqus2.gif\" data-orig-size=\"1263,1041\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"Disqus closeup\" data-image-description=\"\" data-medium-file=\"http:\/\/casadeblundell.com\/jonathan\/wp-content\/uploads\/disqus2-300x247.gif\" data-large-file=\"http:\/\/casadeblundell.com\/jonathan\/wp-content\/uploads\/disqus2-1024x844.gif\" src=\"https:\/\/i0.wp.com\/casadeblundell.com\/jonathan\/wp-content\/uploads\/disqus2.gif?w=505&#038;h=416\" srcset=\"http:\/\/casadeblundell.com\/jonathan\/wp-content\/uploads\/disqus2.gif 1263w, http:\/\/casadeblundell.com\/jonathan\/wp-content\/uploads\/disqus2-300x247.gif 300w, http:\/\/casadeblundell.com\/jonathan\/wp-content\/uploads\/disqus2-1024x844.gif 1024w\" width=\"505\" height=\"416\" loading=\"lazy\" data-original-width=\"505\" data-original-height=\"416\" itemprop=\"http:\/\/schema.org\/image\" title=\"Disqus closeup\" alt=\"Disqus closeup\" style=\"width: 505px; height: 416px;\" \/> <\/a> <\/div> <\/div> <!-- close group --> <div class=\"gallery-group images-1\" style=\"width: 151px; height: 420px;\" data-original-width=\"151\" data-original-height=\"420\" > <div class=\"tiled-gallery-item tiled-gallery-item-small\" itemprop=\"associatedMedia\" itemscope itemtype=\"http:\/\/schema.org\/ImageObject\"> <a href=\"http:\/\/casadeblundell.com\/jonathan\/custom-styling-for-disqus-css\/disqus1\/\" border=\"0\" itemprop=\"url\"> <meta itemprop=\"width\" content=\"147\"> <meta itemprop=\"height\" content=\"416\"> <img decoding=\"async\" class=\"\" data-attachment-id=\"4681\" data-orig-file=\"http:\/\/casadeblundell.com\/jonathan\/wp-content\/uploads\/disqus1.gif\" data-orig-size=\"1263,3567\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"Disqus full page view\" data-image-description=\"\" data-medium-file=\"http:\/\/casadeblundell.com\/jonathan\/wp-content\/uploads\/disqus1-106x300.gif\" data-large-file=\"http:\/\/casadeblundell.com\/jonathan\/wp-content\/uploads\/disqus1-362x1024.gif\" src=\"https:\/\/i0.wp.com\/casadeblundell.com\/jonathan\/wp-content\/uploads\/disqus1.gif?w=147&#038;h=416\" srcset=\"http:\/\/casadeblundell.com\/jonathan\/wp-content\/uploads\/disqus1.gif 1263w, http:\/\/casadeblundell.com\/jonathan\/wp-content\/uploads\/disqus1-106x300.gif 106w, http:\/\/casadeblundell.com\/jonathan\/wp-content\/uploads\/disqus1-362x1024.gif 362w\" width=\"147\" height=\"416\" loading=\"lazy\" data-original-width=\"147\" data-original-height=\"416\" itemprop=\"http:\/\/schema.org\/image\" title=\"Disqus full page view\" alt=\"Disqus full page view\" style=\"width: 147px; height: 416px;\" \/> <\/a> <\/div> <\/div> <!-- close group --> <\/div> <!-- close row --> <\/div>\n<p>As a side note, I&#8217;m considering adding Disqus or <a href=\"http:\/\/www.intensedebate.com\/\">Intense Debate<\/a> to this site, but I haven&#8217;t come to a conclusion on either one yet. <\/p>\n<p>Anyone have any pros or cons to adding either of the commenting systems? I&#8217;d love to know.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve recently added the Disqus plugin to two of my WordPress blogs\/sites &#8211; encounterthis.com\/blog and somethingbeautifulpodcast.com. Unfortunately I found out Friday morning that the default CSS styling makes reading the comments almost impossible if you&#8217;re using a dark\/black background. I did a lot of searching and saw suggestions to add a Javascript command to the &hellip; <a href=\"http:\/\/casadeblundell.com\/jonathan\/custom-styling-for-disqus-css\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Customize Disqus WordPress plugin with CSS<\/span><\/a><\/p>\n","protected":false},"author":84,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[12],"tags":[2398,2244,2397,2401,2402,2399,2400,2403,1184],"class_list":["post-4679","post","type-post","status-publish","format-standard","hentry","category-techno","tag-coding","tag-css","tag-disqus","tag-intense-debate","tag-plugin","tag-selectors","tag-styling","tag-web-developer","tag-wordpress"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pEnSo-1dt","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/posts\/4679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/users\/84"}],"replies":[{"embeddable":true,"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/comments?post=4679"}],"version-history":[{"count":1,"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/posts\/4679\/revisions"}],"predecessor-version":[{"id":10736,"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/posts\/4679\/revisions\/10736"}],"wp:attachment":[{"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/media?parent=4679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/categories?post=4679"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/tags?post=4679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}