Adding view switcher buttons to your Super site
View switcher buttons are a great way to add extra interactivity to your website content and makes it easier for users to navigate through databases that have content organized 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:
<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:
: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.