Listed in topics: Appearance, Customization
Customize Your CSS »Change text/background/link colors
IntenseDebate is set up to automatically inherit all colors from your website, so if the default text color on your website is black, all text in the comment system should be black as well. Sadly this doesn’t work sometimes¹. Luckily though, it’s very easy to fix.
How to change the text color
- Sign-in to your IntenseDebate account.
- Select your site/blog and go to Settings>Custom CSS (shortcut link: the Custom CSS page).
- Add the following code to the textbox:
#idc-container-parent #idc-container,
#idc-container-parent #idc-container div {
color: black;
}In this example, we’ve chosen “black” as the color of the text. You can change this to match your site, either by using plain words like
white,red,blue, etc. or by using hexadecimal colors such as#000000for black or#FFFFFFfor white. - Click Save Settings, and then view your site/blog to see your changes.
How to change the background color↑ Table of Contents ↑
- Sign-in to your IntenseDebate account.
- Select your site/blog and go to Settings>Custom CSS (shortcut link: the Custom CSS page).
- Add the following code to the textbox:
#idc-container-parent #idc-container {
background: white;
}In this example, we’ve chosen “white” as the color of the background. You can change this to match your site, either by using plain words like
white,black, etc. or by using hexadecimal colors² such as#FFFFFFfor white or#000000for black. - Click Save Settings, and then view your site/blog to see your changes.
How to change link appearance↑ Table of Contents ↑
- Sign-in to your IntenseDebate account.
- Select your site/blog and go to Settings>Custom CSS (shortcut link: the Custom CSS page).
-
Change the color of the links in normal and hover state
Please add the following CSS to your Custom CSS page:
#idc-container-parent #idc-container a {
color: #0000FF;
}
#idc-container-parent #idc-container a:hover {
color: #CCCCFF;
}In this example, we’ve set the default link color to
#0000FFin the default state, and#CCCCFFin the hover state. These colors can of course be changed to any hexadecimal color² value (here’s a Color Picker) or be changed to just use words likeblueandred.Add or remove underlining of your links in normal state
Please instead add the following CSS to your Custom CSS page:
#idc-container-parent #idc-container a {
text-decoration: underline;
}
Note: If you want to remove the underlining instead, just change the
underlinevalue tononeinstead. - Click Save Settings, and then view your site/blog to see your changes.
¹ If the web page IntenseDebate is loaded on has a color attribute assigned to the <body> element, this is what all text in the comment system will inherit. Sometimes, however, the colors in the document are assigned to specific child elements rather than to the whole page, which will make IntenseDebate not inherit these settings.
² From Wikipedia: “Authors of web pages have a variety of options available for specifying colors for elements of web documents. Colors may be specified as an RGB triplet in hexadecimal format (a hex triplet); they may also be specified according to their common English names in some cases. Often a color tool or other graphics software is used to generate color values.” Read more…
Tags: background, color, css, customization, issue, links, problem, text color — Can't find your answer here? Let us know.
Last modified: July 15, 2010 by Isaac Keyet
Help us improve:
We're always looking to improve our documentation. If this page didn't answer your question or left you wanting more, let us know! We love hearing your feedback. For support, please use the forums or contact support form. Thanks!
You must be logged in to post a comment.
Experiment
IntenseDebate Support 