Logo
    Logo

    Search

    Getting started

    Customization

    Features & options

    Snippets

    Templates

    References

    Help

    Super App

    Super Status

    Request features

    Go to super.so

    Custom code

    Custom code

    For people who have some basic web development skills or need to add third-party scripts, Super offers advanced and powerful customization through custom code snippets…….-.

    Applying custom code to your entire site

    Custom code can be added to your entire site or on specific pages. To add code for the entire site head into your site editor (cog icon) and click into the Code page.

    image

    Head, Body and CSS

    From here you have the option to add code in three tabs, 'Head', 'Body', and 'CSS'.

    • The Head tab is used for adding scripts and other embed code for things like analytics, pop-ups, cookie consents, or chat bubbles.
    • The Body tab is used for adding HTML to the body area of the page. Code will be added to the top of the page.
    • The CSS tab is used for adding CSS code for styling. When placed here in the global code, the CSS will apply to every page.
    image

    Applying custom code to specific page

    Applying code to an individual page can be done by clicking the code icon on a specific page in your site "Pages".

    image
    💡
    Super's custom code section utilizes the code editor used in Visual Studio Code to provide syntax highlighting and a familiar environment to hack away at your site.

    Customising your site appearance and adding styles

    Any default styles on your page can be overridden with custom CSS in the "Code" page. The class names for elements on your site were intentionally designed to be easy to understand and override. You can view and learn more about all the CSS classes Super sites use here.

    The colors of your site are also customizable through a set of CSS variables. You can find a list of default colors we use with their corresponding CSS variables here.

    To learn more about customising your site's appearance check out our documentation on creating a template here.

    💡
    Find a list of all the Code Editor keyboard shortcuts here

    Custom code snippets

    We've carefully crafted a selection of custom code snippets that can add further enhancements to your site:

    Full-width sectionFull-width section
    Full-width section
    Gallery CarouselGallery Carousel
    Gallery Carousel
    Database view pickerDatabase view picker
    Database view picker
    Image LightboxImage Lightbox
    Image Lightbox
    Center align textCenter align text
    Center align text
    Center align blocksCenter align blocks
    Center align blocks
    Page-specific navbar buttonPage-specific navbar button
    Page-specific navbar button
    Toggle boxesToggle boxes
    Toggle boxes
    icon

    In this doc:

    • Applying custom code to your entire site
    • Head, Body and CSS
    • Applying custom code to specific page
    • Customising your site appearance and adding styles
    • Custom code snippets
    Logo

    Templates

    Guides

    Showcase

    Pricing

    Privacy

    Terms

    © Super Publishing Co.

    XInstagramDiscordYouTube