Newsletter is now available!
Quotion

Personalization

Site Customization

Customize your Quotion site styles through the dashboard.

Video Tutorial

Access Design Controls

  1. Log in to the dashboard
  2. Select your site in the sidebar
  3. Click the design link

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

OptionDescription
FontChoose serif or sans-serif
Font size12px to 20px
Branding colorSet primary brand color
Background colorChange site background
Site logo/faviconUpload or use default
Header/footer linksCustomize header and footer links
Custom CSSAdd custom styles (Lite+ plan)
Custom JavaScriptAdd custom scripts (Pro+ plan)

Home Page

Design home

OptionDescription
Sort by menuToggle visibility
Tag tabsToggle visibility
Custom CSSAdd custom styles (Lite+ plan)
Custom JavaScriptAdd custom scripts (Pro+ plan)

Post Pages

Design post

OptionDescription
Reading timeToggle visibility
ExcerptToggle visibility
Publish dateToggle visibility
Table of contentsToggle visibility
Share buttonsToggle visibility
More postsToggle visibility
KaTeXToggle math support (Lite+ plan)
Custom CSSAdd custom styles (Lite+ plan)
Custom JavaScriptAdd 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

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!

How is this guide?