Site Customization

Customize your Quotion site styles through the dashboard.

Video Tutorial

Access Design Controls

Log in to the dashboard
Select your site in the sidebar
Click the design link

Design Interface

The design interface contains:

Page selector: Switch between all, home, post and og pages
Control panel: Left side contains all customization options
Live preview: Right side shows changes in real-time
Publish button: Top right saves your changes

Always publish changes - Unpublished changes are lost after page refresh

Available Customizations

All Pages

Design all page

Option	Description
Font	Choose serif or sans-serif
Font size	12px to 20px
Branding color	Set primary brand color
Background color	Change site background
Site logo/favicon	Upload or use default
Header/footer links	Customize header and footer links
Custom CSS	Add custom styles (Lite+ plan)
Custom JavaScript	Add custom scripts (Pro+ plan)

Home Page

Design home

Option	Description
Sort by menu	Toggle visibility
Tag tabs	Toggle visibility
Custom CSS	Add custom styles (Lite+ plan)
Custom JavaScript	Add custom scripts (Pro+ plan)

Post Pages

Design post

Option	Description
Reading time	Toggle visibility
Excerpt	Toggle visibility
Publish date	Toggle visibility
Table of contents	Toggle visibility
Share buttons	Toggle visibility
More posts	Toggle visibility
KaTeX	Toggle math support (Lite+ plan)
Custom CSS	Add custom styles (Lite+ plan)
Custom JavaScript	Add custom scripts (Pro+ plan)

Custom CSS and JavaScript examples

Add Scroll Progress Bar

.progress-bar {
  background: rgb(var(--brand-500));
  height: 5px;
  width: 0%;
  position: fixed;
  top: 0;
  z-index: 11;
}

var elm = document.getElementById('progressBar');
if (!elm) {
  elm = document.createElement('div');
  elm.id = 'progressBar';
  elm.classList.add('progress-bar');
  document.body.appendChild(elm);
}
window.addEventListener('scroll', handleScroll);
function handleScroll() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById('progressBar').style.width = scrolled + '%';
}

custom progress bar

Use more fonts

Use a different font for headings:

@import url("https://fonts.googleapis.com/css2?family=DM+Sans&display=swap");

h1, h2, h3, h4, h5, h6 {
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont,  "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

Replace DM Sans and DM+Sans with any google font you want to use.
Change the CSS selector to p, li, pre, blockquote to apply the font to body texts.

Hide UI Elements

Hide featured card:

#featuredPost {
  display: none;
}

Hide post author:

#writtenBy {
  display: none;
}

Custom Background Images

Quotion uses a default image list when posts have no image.

Replace with Your Image

div[style*=".quotion/"] {
  /* You can copy and paste your Quotion site post image URL here */
  background:url(https://static.quotion.net/site/blog/image/0fbbffb2ad26.png) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

Use Emoji Background

div[style*="/.quotion/"] {
  background: rgb(var(--gray-500)/0.3) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
div[style*="/.quotion/"]::before {
  content: "NO IMAGE";
  position: absolute;
  font-size: 5rem;
  color: white;
}

div[style*="/.quotion/"]::after {
  content: "😩";
  position: absolute;
  font-size: 16rem;
  opacity: 0.222;
}

Emoji background

Gradient Backgrounds

Sunset gradient:

div[style*=".quotion/"] {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fad0c4) !important;
}

Ocean blue:

div[style*=".quotion/"] {
  background: linear-gradient(135deg, #0061ff, #60efff) !important;
}

Emerald radial:

div[style*=".quotion/"] {
  background: radial-gradient(circle, #43cea2, #185a9d) !important;
}

Purple haze:

div[style*=".quotion/"] {
  background: linear-gradient(to right, #c471ed, #f64f59) !important;
}

Pastel rainbow:

div[style*=".quotion/"] {
  background: linear-gradient(90deg, #ffafbd, #ffc3a0, #c2e9fb, #a1c4fd) !important;
}

Gradient Tools

FAQs

Build your blog with Apple Notes in less than 5 minutes! Try Quotion for free!

Personalization