Stylised checkboxes and radio buttons in your survey

There's absolutely nothing wrong with a standard HTML checkbox. It's simple and functional and everyone knows how it works, but sometimes you want just a little bit more.

Here's a method for updating the look of checkboxes on your pages. It uses a jQuery plugin called prettyCheckboxes which is available in its original form here:

To do this you'll need to be able to access and modify your LimeSurvey installation directory - in particular you need to be able to upload files into your template directory. This modification needs to load a javascript file (*.js) which cannot be uploaded using the standard template tool. So if you don't have ftp access to your limesurvey server, this solution is not for you.

Firstly, visit the page above and download the Uncompressed version of this jquery plugin. Then extract all the files in to a directory somewhere.

You'll need - as a minimum - four of the files in this package.

The most important one is the prettyCheckboxes.js file, which contains the java functionality to replace standard checkboxes and radios with the image of your choice. This lives in the in the "js" directory of the files you just extracted. Copy this file to your template directory.

The next requirement is the prettyCheckboxes.css file which, as you can guess, lives in the css directory of the files you just extracted. Edit this file toremove the directory references to the two image files "checkbox.gif".

  1. Look for the line
    background: url(../images/prettyCheckboxes/checkbox.gif) 0 -1px no-repeat;
    and change it to:
    background: url(checkbox.gif) 0 -1px no-repeat;
  2. Look for the line:
    background: url(../images/prettyCheckboxes/radio.gif) 0 -1px no-repeat;
    and change it to:
    background: url(radio.gif) 0 -1px no-repeat;

Then copy the modified version of prettyCheckboxes.css to your template directory.

Finally you need to copy the images used to replace standard radio and checkbox buttons. These can be found in the /images/prettyCheckboxes directory of the files you extracted. Copy checkbox.gif and radio.gif to your template directory.

After all this, you should have the following four files in your template directory:

  • prettyCheckboxes.js
  • prettyCheckboxes.css
  • radio.gif
  • checkbox.gif

Using LimeSurvey, open your template editor and select the template you're working on.

You need to modify the startpage.pstpl file of your template so that it loads the javascript plugin, and applies the effects to all the checkboxes and radio buttons in your survey.

To do this, in the LimeSurvey template editor, select the startpage.pstpl file.

Scroll down until you find the line:

<script type="text/javascript" src="{TEMPLATEURL}template.js"></script>

Immediately underneath this line, add the following:

<script src="{TEMPLATEURL}prettyCheckboxes.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="{TEMPLATEURL}prettyCheckboxes.css" />

You'll note that in the javascript there are two lines, one which applies the prettyCheckboxes plugin to all the "radio" buttons and another which applies it to all the "checkbox" buttons. If you only want to apply it to one type, then simply remove the line you don't want to use.

And you're done. Test a survey now and you'll find that the default radio buttons will be replaced with the new stylised ones in the radio.gif file, and likewise checkboxes will be the stylised ones from the checkbox.gif file.

If you want to use your own images to replace the default radio and checkbox styles, you can create your own checkbox.gif and radio.gif images, containing the three images, unselected, hovered and selected. Use the existing images as your templates.