The Styling Options panel give you the ability to make changes to how your meters look. Let’s go through the most important ones.

Select the Meter Color/Meter Outer Color #

This is pretty self-explanatory! Change the look of the main elements of each meter to match your website color palette, or your organisation’s primary color. Not all meters can use all color choices.

Select the Progress/Goal Amount Color #

Choose the font color of the amount labels.

Select the Milestones Color #

Choose the color of the milestone font and lines (if available).

Add Custom CSS Here #

This box allows you to use CSS styles to further enhance the look of your meter. You may have some experience with CSS and know exactly what to input. Alternatively, you may have approached us for support, and we have asked you to cut and paste some CSS from an email or support ticket. Simply paste any code we send into this box and click update.

If you are experienced in CSS, you will be pleased to know that each meter has it’s own CSS ID so you can target it more efficiently (and hopefully removing the need for !important statements). To find the ID, locate the main Ultimeter container (which will have the ‘ultimeter’ class). This container will have an ID in the format of ‘post-{your Ultimeter ID}’.

Label for Radial Meter #

The radial meter shows the progress inside it’s circle, rather than the raised and goal amount outside it. You can enter a custom label here to explain to your visitors what the progress amount means. For example, if you are a charity bringing water to developing countries, you may be using ‘Wells’ as a custom unit. You could then enter ‘dug’ or ‘excavated’ here, to provide more context to your visitors.