Logo
    Logo

    Search

    Getting started

    Customization

    Features & options

    Snippets

    Templates

    References

    Help

    Super App

    Super Status

    Request features

    Go to super.so

    Database view picker

    Database view picker

    This snippet transforms the default visual styles for switching between different database views. By default database views uses a dropdown, this snippet transforms that into a series of horizontal tabs as seen below (the picker will revert to a dropdown on mobile).

    All

    4 views

    All

    NASA

    Japanese prints

    Rijksmuseum

    Wave
    Flowers
    Earth
    Takeoff
    Maid
    Volcano

    Installation instructions

    1. Open your site in the Super 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/v2/view-picker.css">
    4. If you want to customize the colors, in the ‘CSS’ tab, paste the following snippet:
    5. You can then replace the CSS variables var(--color-ui-hover-bg) with RGB or HEX color codes
    Logo

    Templates

    Guides

    Showcase

    Pricing

    Privacy

    Terms

    © Super Publishing Co.

    XInstagramDiscordYouTube
    :root {
  --picker-active-bg-color: var(--color-ui-hover-bg) !important;
  --picker-active-text-color: var(--color-text-default) !important;
  --picker-active-border-color: var(--color-ui-hover-bg) !important;
  --picker-border-color: var(--color-border-default) !important;
  --picker-text-color: var(--color-text-gray) !important;
  --picker-border-radius: var(--border-radii-layout) !important;
  --picker-hover-bg-color: var(--color-ui-hover-bg) !important;
  --picker-hover-text-color: var(--color-text-default) !important;
  --picker-hover-border-color: var(--color-border-default) !important;
}