Customize

FAQ

How can I use it?
Can I customize my styling?
Can I use custom 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