We might need to have switchers on a page for easy accessibility: Resources, Course, Glossary, etc. Whatever else we might add in the future.
https://super.so/guides/how-to-add-fancy-view-switcher-buttons-to-your-notion-databases
How to add view switcher buttons to your Notion databases
Now that your site is coming together, adding some a set of view switcher buttons is a great way to add extra interactivity to the content on your site.
Adding view switcher buttons to your Super site
View switcher buttons are a great way add extra interactivity to your website content and makes it easier for users to navigate through databases that have content organised into different categories.
This guide shows you how to add some custom code to your super site to reformat the view switcher into a series of buttons that highlight the current view:
If you would like this to work across your whole site, then add this code to the global code section of your super site. If this is only required on one page then it's probably better to add the code to that page only. This will keep the page weight down and keep your site fast.
Install the snippet
- Go into your Site Dashboard
- Open the ‘Code’ page
- In the ‘Head’ tab, paste the following snippet:
Copy
<link rel="stylesheet" href="https://sites.super.so/snippets/view-picker.css">
- If you want to customize the colors, click into the ‘CSS’ tab, and paste the following snippet:
Copy
: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;
}
- Finally, customize the variables by swapping out the ‘rgb’ colors, you can use hex codes too.
Tip: pick colors here: https://htmlcolorcodes.com/color-picker/
Once you have added the code to the CSS section and to the Head section, remember to save your work and then refresh the page in the browser to see the changes on your live site. Remember that any custom code requires a paid Super subscription.