Changing Styles in your Plugin

Overriding the CSS

With CSS, you can change the style of the module that sits on your page, and, if you want, the frame of the popup. However, because most of the popup is within an iframe, you cannot currently override the styles inside that iframe.

Modifying the CSS for the module is a little tricky, but it can be done! You can inspect the DOM using a tool like Firebug, and then override individual styles, or your can use this module stylesheet (below) and modify it to achieve your desired results. To use the stylesheet, copy the styles into your stylesheet, or upload the file to your server and include it from within your code.

Download Default Module Stylesheet

Here's an example:

Let's say you want to change the color of the questions in the module to red. If you look in Firebug, you'll see that the style for those questions is set with:

#dgr3-m #dgr3-m-body #m-inner .questions .li a

Then, to override the style, you'd add a line like this to your stylesheet:

#d3-widget #dgr3-m #dgr3-m-body #m-inner .questions .li a { color:red; }

Note the "#d3-widget" ID at the front of the line - that is what forces this style to override the default one. You can do this with any line in the module styles, and the downloadable stylesheet above already has it included, so you can focus on just changing the styles. Of course, you only need to include the styles that you actually change, so feel free to discard the rest.

Disclaimer: We may from time to time need to change the styles in our plugin, so it may break changes you've made to your CSS. We'll let you know through our newsletter when these changes are going to occur!

Now that wasn't so hard, was it?