The Database View Picker snippet allows you to transform Notion’s default database view selector into a set of visually appealing tabs, making it easier for your users to navigate between different views of your database.
Installing the snippet
Go into your Site Dashboard
Open the ‘Code’ page
In the ‘Head’ tab, paste the following snippet:
<link rel="stylesheet" href="https://sites.super.so/snippets/view-picker.css">
Customizing colors:
If you want to match the view picker to your site’s branding, you can customize the colors. In the CSS tab, paste this snippet:
: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;
}
You can customize these variables by swapping out the rgb values with your preferred colors or using hex codes. This allows full control over the appearance, including the active tab color, default tab colors, border radius, and hover effects.
Once installed and customized, your database view picker will display as a set of clean, clickable tabs, improving usability and visual appeal for your site visitors.
⚡
Tip: pick colors here: https://htmlcolorcodes.com/color-picker/