Database view picker

A custom code snippet that transforms Notion’s database view picker into a set of tabs

image

Installing the snippet

To use this snippet you will need to have an upgraded Super site.

  1. Go into your Site Dashboard
  2. Open the ‘Code’ page
  3. In the ‘Head’ tab, paste the following snippet:
  4. <link rel="stylesheet" href="https://sites.super.so/snippets/view-picker.css">
  5. If you want to customize the colors, in the ‘CSS’ tab, paste the following snippet:
  6. :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;
      }
  7. Customize the variables by swapping out the ‘rgb’ colors, you can use hex codes too.