Custom code

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.

X

Templates

Guides

Showcase

Pricing

Privacy

Terms

© Super Publishing Co.