making bbPress (and WordPress) work better!

WP-Polls using CSS instead of images

Among Lester Chan‘s great WordPress plugins is “WP-Polls“. His newest version uses ajax which I don’t care for but he has a slightly older version without it.

(here’s an alternate download location for WP-Polls while Lester’s site is down)

Both versions however require three small images for the little result graphs. The problem with this is that no matter how small the images are, the visitors’ browsers will have to do three more calls to the server to load them and even on broadband, that slows things down. However because he wisely uses templates to control how the poll results are seen, it’s easy to change the images to CSS.

Here’s how to do it:

1. go to Polls -> Poll Options
2. go down to “Result Body”
3. change the poll template to use something like this rather than the default:
<li>%POLL_ANSWER% <small>(%POLL_ANSWER_PERCENTAGE%%)</small><div class=pollbar style="width:%POLL_ANSWER_IMAGEWIDTH%%" title="%POLL_ANSWER% -> %POLL_ANSWER_PERCENTAGE%% (%POLL_ANSWER_VOTES% Votes)"> </div></li>

4. repeat for the other “result body” field

5. You have to add a little to your template’s stylesheet ie. style.css

.wp-polls li {width:90%;}
.wp-polls .pollbar {margin:1px; font-size:6px; line-height:8px; height:8px; background: #AAAA8A; border:1px solid #444;}

Note you can now change how the poll result bar looks as much as you want. My stylesheet example above uses an off-yellow color. You can change the color, the border, the thickness, etc. The only required part is limiting the LI width because if the result has 100% your pollbars will be too wide.

You can also get clever now and insert the result percentage or vote count right into the result template. Basically you would add “text-align:center” to the stylesheet and then in the template before the /div you would insert %POLL_ANSWER_PERCENTAGE% or %POLL_ANSWER_VOTES%

added: Lester emailed me this morning to tell me that 2.12 will implement the div/CSS mod in the template 🙂

One response

  1. Massive help! thanks!

    November 17, 2009 at 11:23 pm

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s