Customize

FAQ

How can I use it?
  1. Duplicate this template to your Notion workspace.
  2. Create your site using Super site, using your newly created page as the Notion URL. See this tutorial on how to create your first Super site.
  3. Add Linkotion styling code (CSS) from your purchase to your Super site setting. Don't forget to use <style> tag.
Can I customize my styling?

Yes you can. Here's our Linkotion's documentation regarding customization.

Can I use custom analytic?

Yes you can. Here's a tutorial made by Super on how to integrate Fathom analytic.

Background Image

  • Use custom image
  • html, body {
    		background-image: url('your-img-link.png') !important; /* Background image */
    		/* Image stretched based on screen size */
    		background-repeat: no-repeat !important;
    		background-size: cover !important; 
    }
  • Use custom color
  • body {
    		background-color: #eff4fe !important; /* Change color */
    }

Main Card

  • Use custom color
  • #__next > div {
    		/* Card decoration */
    		background-color: #F7F7F7 !important; /* Main card color */
    		box-shadow: 0rem 0.875rem 1.5rem 0rem rgba(32,46,66,0.1) !important; /* Main card shadow */
    }
  • Change card size
  • #__next > div {
        /* Card width */
    		/* 1vw = 1% of viewport wide */
    		/* 1vh = 1% of viewport height */
    		/* 1vw of 50 cm viewport device wide is 0.5 cm */	
    		/* 1vh of 100 cm viewport device height is 1 cm */				
    		width: calc(225px + 25vw) !important; /* Responsive card width */
    		margin-top: 5vh !important; /* Main card top margin */
    		margin-bottom: 5vh !important; /* Main card bottom margin *?
    }
  • Use squared card
  • #__next > div {
    		border-radius: 0px !important; /* Rounded main card */
    }

Button

  • Change color
  • :root {
    		/* CTA bg color using gray light callout  */
    		--color-bg-gray-light: rgba(10, 36, 64, 1) !important;
    		/* Callout color */
    		--color-bg-brown-light: rgba(233,229,227,0.75) !important;
    		--color-bg-orange-light: rgba(250,235,221,0.75) !important;
    		--color-bg-yellow-light: rgba(251,243,219,0.75) !important;
    		--color-bg-green-light: rgba(221,237,234,0.75) !important;
    		--color-bg-blue-light: rgba(221,235,241,0.75) !important;
    		--color-bg-purple-light: rgba(234,228,242,0.75) !important;
    		--color-bg-pink-light: rgba(244,223,235,0.75) !important;
    		--color-bg-red-light: rgba(251,228,228,0.75) !important;
    		--color-pill-default: rgba(206,205,202,0.75) !important;
    }
  • Use squared button
  • .notion-callout {
           border-radius: 0px !important; /* Rounded callout */
       }

Font

  • Change font
  • @font-face {
    		font-family: 'your-font-name';
    		src: url('your-font-link.otf') format('truetype');
    }
  • Change font color
  • :root {
    		/* Primary text color */
    		--color-text-default: rgba(10, 36, 64, 1) !important;
    }

Have any question?

Don't be shy to ask me even it's a silly question 🤓

⚠️

Twitter