Custom CSS
Indify offers a completely no-code solution for creating widgets for dashboards. However, for users who wish to take their customization further, we provide the ability to add your own CSS to go beyond our default offering.
Injecting custom CSS is a hidden Indify feature. *Subject to change*
Enable the hidden feature
Enable the feature by clicking on the šĀ emoji next to your name.
Access Advanced Styles
Go to the Configure page of your selected widget.
Scroll to the bottom, click Advanced Styles, and edit to your heart's content.
To learn how to add custom fonts, check out thisĀ quick tutorial.
Custom CSS requires coding skills and falls outside the scope of our support.
This means weāre unable to help further with setup or troubleshooting.
CSS selectors
We provide an Advanced Styles template for each widget, exposing some basic selectors for customizable elements.
This is not a comprehensive template, and should be treated as experimental. We canāt guarantee full functionality or compatibility with any selectors, but we are fairly confident that the provided selectors will work as expected for most use cases.
Custom fonts
You can import and use custom fonts from Google Fonts. Check out our tutorial: How to use Google Fonts in your widget's custom CSS
Gradient backgrounds
You can add gradient backgrounds to your widgets with custom CSS. Take a look at
Donāt see the selectors you need in the provided CSS template?
Weād love to help! Please send in a feature request via the Feedback form at the bottom right of the configure page.
Custom CSS not working?
There may be situations where the CSS code you added isnāt displaying as expected.
- Ensure you donāt have a typo in your CSS
- Try adding
!importanton every line before; - If you are trying to add a custom background color, ensure your Set background color setting is disabled.
On this page
- Custom CSS
- Enable the hidden feature
- Access Advanced Styles
- CSS selectors
- Custom fonts
- Gradient backgrounds
- Custom CSS not working?