A custom code snippet that transforms Notion’s database view picker into a set of tabs
Installing the snippet
To use this snippet you will need to have an upgraded Super site.
- Go into your Site Dashboard
- Open the ‘Code’ page
- In the ‘Head’ tab, paste the following snippet:
- If you want to customize the colors, in the ‘CSS’ tab, paste the following snippet:
- Customize the variables by swapping out the ‘rgb’ colors, you can use hex codes too.
<link rel="stylesheet" href="https://sites.super.so/snippets/view-picker.css">
:root {
/* Border radius */
--picker-border-radius: 8px!important;
/* Active colors */
--picker-active-bg-color: rgb(233, 233, 233)!important;
--picker-active-text-color: rgb(70, 70, 70)!important;
/* Default colors */
--picker-border-color: rgb(233, 233, 233)!important;
--picker-text-color: rgb(70, 70, 70)!important;
/* Hover colors */
--picker-hover-bg-color: rgb(233, 233, 233)!important;
--picker-hover-text-color: rgb(70, 70, 70)!important;
--picker-hover-border-color: rgb(233, 233, 233)!important;
}
Tip: pick colors here: https://htmlcolorcodes.com/color-picker/