Changes to our legacy Custom CSS feature

We're making some changes to our markup that could potentially break any styling you've applied through our legacy Custom CSS feature, beginning 26th May 2020.

If one or more of your dashboards rely on Custom CSS – particularly to modify elements of your dashboard such as widgets or visualizations – we suggest you make some changes to your code.

Why are we doing this?

This work is necessary to unify the old and new platforms that serve the Geckoboard service, as well as opening the way for improvements and new features for the app as a whole and for our entire customer base.

How to respond or prepare

We’re temporarily keeping the widget-xxxx id on instruments, that we'll eventually replace with a new data-instrument-id data attribute on widget.

To prepare, we recommend you use the , in your CSS to target both widget id + instrument attribute as both will be in use during the transition. To target a data attribute, the CSS selector is [data-instrument-id="inst_yyyy"].

Example

Where before you had the widget-xxxx id targeting a specific widget:

#widget-xxxx .opened-count {
	font-size:3.5em;
	text-align:center;
	color:#0bd454;
}

Add a comma , to target the instument attribute too.

#widget-xxxx .opened-count,
[data-instrument-id="inst_yyyy"] .opened-count {
  font-size:3.5em;
  text-align:center;
  color:#0bd454;
}

In addition to this, we’re dropping support for the following classes which are used rarely, if not completely unused:

  • polypmorphic
  • widget-header
  • has-title
  • gecko-js-bridge
  • visualisation-container
  • tv-mode
  • ragcolumn
  • widget-height-slim
Was this article helpful?

Awesome! 👍 Thanks so much for your feedback!

Sorry about that! Start a conversation now.

We're ready to help, 24 hours a day, 5 days a week

Get support
  • Fernanda Customer Success Avatar

    Megan

    USA
  • Hariharan Customer Success Avatar

    Hariharan

    India
  • Fernanda Customer Success Avatar

    Yasmin

    Spain
  • Luis Customer Success Avatar

    Luis

    UK
  • Richard Customer Success Avatar

    Richard

    UK
  • Fernanda Customer Success Avatar

    Fernanda

    Brazil
  • Heather Customer Success Avatar

    Heather

    USA