Adding currency and percentage symbols before amounts using CSS


This was going to be a question but I managed to work it out myself :slight_smile:, so I thought I’d share it with the community.

We use the ‘CSV’ widgets to pull data into Geckoboard using ‘’ (loads of good data there, mostly free to use and available in csv, xml or json format)

I’m pulling the gold price into a two widgets, one for £, one for $.

The problem is, the widget only displays the ‘numeric’ data (see below). It doesn’t tell you if it’s GBP / dollar etc. If you are familiar with the data, this is fine, but for visitors into the office, they often asked what each of the values was.

Using CSS, I was able to add a “:before” value before the number, targeting that widget in particular.

`#widget-16459675 .number-widget .widget-canvas .main-stat:before {
    content: "\00A3";
#widget-16514565 .number-widget .widget-canvas .main-stat:before {
    content: "\0024";

This places whatever the ‘content’ is ‘before’ the value. I had originally tried ‘content: “£”’ but this didn’t work (something to do with character encoding) so I had to use ‘html glyph’ values from here -

You can also place the content :after the item, by changing before to after. This is useful for percentages.

Any questions, I’d be happy to try and help out!

Many thanks


As I’m only allowed to add one image per post (!) this is the result of the CSS -


Thanks for sharing that @Nathan!!!

On a related note, you might be happy to know that we have recently introduced a way to over-write currencies in our visualisations. We call it unit control and is part of the new fine-tune settings available for the Spreadsheets and Salesforce integrations

We’ll shortly be rolling out the fine-tune controls to our other integrations so stay tuned :slight_smile:


Hey Nathan, as Luis said, thanks for sharing this!

Does your team usually plug the Quandl CSV export URL directly into the widget in Geckoboard?

I do see some data sources offered on Quandl can be exported as JSON, which you could consume for use with our new custom data API (or of course, the ‘old’ custom widgets) and then the currency prefix would be available there as configuration option. Just thought to share another option, but of course if your current flow is working, no need to disrupt it :slight_smile: