Change the colours of the Polls Widget

For some reason, the polls widget does not have settings for its colours in the configuration dialog. It seems to pick up its colors from template variables instead.

Find or Add the variables

The variable that the polls widget uses for its text color is sidebar.text.color - if this variable already exists in your skin, you will find it in the group that it belongs to.

If it doesn't already exist, add it by copying this into the <b:skin> section of your blog's template (Template => Edit HTML).

  <Group description="Poll Widget" selector="widget.Poll">
     <Variable name="sidebar.text.color" description="Text Color" type="color" default="#2288bb"  value="#2288bb"/>
     <Variable name="" description="Link Color" type="color" default="#2288bb"  value="#2288bb"/>
Add new variables if they are not already present

Configure the variables

Once the variables have been added to the template, you can configure them visually using the template designer (Template => Customize => Advanced).

Configure the new variables under the Advanced section.


The widget's appearance with the changes

Note: The font for the widget is picked up from a body.font variable. Find or add that as a type='font' variable to customize the font.

Happy Polling!


  1. Hi! Anyway to add a: border & background to the poll gadget

    Thank you Luke for this post - much appreciated

    1. Not within the iframe that it produces, but if you head to -> (your blog) -> Theme -> Customize -> Advanced -> Add CSS
      You can throw in something like:
      .widget.Poll { border: 1px solid; padding: 20px; }
      Hope that helps.

    2. Hi! Sorry for the late reply.

      Thank you so much for your advice

      Very much appreciated!

      Take Care,


Post a comment

Popular posts from this blog

Add syntax highlighting to my Blog

Change my post timestamps to a custom format

Add snippets to the Emporio theme