Olimometer for WordPressMarch 4th, 2011 by Oliver
Olimometer is my very first WordPress plugin. It’s a fully customisable fundraising thermometer with PayPal integration and custom skin support. You can download the plugin from the WordPress plugin repository, or by visiting the official page on the WordPress web site.
Multiple thermometers can be configured and displayed separately on different pages or posts. Each thermometer supports individual customisation, targets, currencies and progress tracking.
Thermometers can be placed in sidebar widgets with custom headers, footers and CSS classes.
Choose from a number of pre-installed thermometer skins, or create your own and share it.
This plugin requires that the GD libraries are available within PHP.
If you wish the thermometer to have a transparent background then I suggest you still choose a background colour close to the actual background on which the thermometer will appear. This will ensure that the image blends in perfectly.
If you have *any* problems installing or using this plugin, or if it doesn’t quite meet your needs then please let me know. Visit http://www.olivershingler.co.uk/oliblog/olimometer and leave a comment, or via Twitter @OliverShingler
== Installation ==
Either install using the automatic WordPress plugin installation method, or do it manually:
1. Upload all files to to the
/wp-content/plugins/olimometer directory (create it if it doesn’t exist) within your WordPress Installation
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Configure the settings to your personal requirements
<?php echo show_olimometer(olimometer_id,olimometer_css);?> in your templates or [olimometer id=olimometer_id css_class=olimometer_css] in a post, where olimometer_id = the Olimometer’s id found on the settings page and olimometer_css = an optional string containing the name of the CSS class to apply to the image.
== Frequently Asked Questions ==
= The thermometer image won’t show (or shows up as a red cross) =
You may not have the GD libraries installed as part of PHP, you’ll need to speak to your web server administrator
= Can I apply my own CSS to the Olimometer image? =
Yes! When you call the Olimometer, simply pass in the name of the CSS class you wish to use as a parameter.
For example, to use a class called align_right, use the following code:
<?php echo show_olimometer(1,'align_right');?> in your templates or [olimometer id=1 css_class="align_right"] in a post replacing 1 with the actual id of your Olimometer.
= I’ve found a bug / have a suggestion =
You can contact me via Twitter @OliverShingler or you can leave a comment on the plugin’s official page http://www.olivershingler.co.uk/oliblog/olimometer. I can’t make any promises but I will do my best.
= How do I change the thermometer image? =
See: How do I create my own skin?
= How do I create my own skin? =
To create your own skins, follow these steps. Please note these steps have changed recently:
* Create a folder within your WordPress structure /wp-content/uploads/olimometer
* Create a folder within your WordPress structure /wp-content/uploads/olimometer/skins
* Copy this file to /wp-content/uploads/olimometer/skins.xml
* Edit the new skins.xml file and remove all but one of the ‘skin’ objects
* Change the skin object’s skin_slug to something unique for your new custom skin
* Create a folder at /wp-content/uploads/olimometer/skins/YOUR_NEW_SKIN_SLUG replacing YOUR_NEW_SKIN_SLUG with the actual skin_slug value in new skins.xml
* Create yourself three new PNG image files, naming them according to that specified in the XML file. One image should contain the bottom of the thermometer (the bulb), the second should be the thermometer’s bar which should be drawn empty of mercury and the third is the top of the thermometer.
* Save the three image files in the skin_slug folder you just created
Skins.xml file contains the skin definitions for all available Olimometer skins. The easiest way to create your own skin is to copy and paste an existing one changing the values as appropriate. You need to create an entire ‘skin’ object within the XML structure. Each sub-object within the skin object is explained below:
* skin_name: The name of the skin as displayed in the drop-down list on the settings page
* skin_slug: The name of a subfolder within the plugin’s skin folder in which you will store the thermometer images associated with this skin. Do not use spaces in the name.
* bulb_file: The name of the PNG image file of the thermometer ‘bulb’ (bottom image)
* bar_file: The name of the PNG image file of the thermometer ‘bar’. This should be empty of mercury.
* top_file: The name of the PNG image file of the top of the thermometer.
* bar_colour: A six character RGB hex value (e.g. white = ffffff) colour of the mercury bar
* bar_pos: The number of pixels from the left (or top if horizontal) of the image at which the mercury bar will be drawn.
* bar_width: The width of the mercury bar in pixels.
* bar_end: The number of pixels from the top (or right if horizontal) of the image where the mercury bar will stop at 100%
* text_pos: The number of pixels from the left of the image at which the text values are placed. Not used for horizontal skins but required so set to 0.
* orientation: Can be either vertical (standard) or horizontal
For best results follow these tips:
* Each image file should be of equal width (or height for horizontal skins).
* The background of each image should be an identical solid colour to enable seamless placement and transparency.
* Use a droplet tool or other suitable colour identifier to identify a suitable bar_colour value using the mercury colour in your bulb_file image.
* Make sure the top_file image includes a copy of the bar_file underneath it, but cleaned of any marks or bars – see the built in skins for an example. This is to avoid a gap being left between the top image and the bar image at certain image heights.
* All built-in skins have a slug-name starting with “oli-” so avoid using this prefix to prevent name conflicts.
* Share your skins with me – contact me using the WordPress forums, tweet me @OliverShingler, or leave a comment on the Olimometer page: http://www.olivershingler.co.uk/oliblog/olimometer