Personalization

Customize site styles using the Quotion dashboard.

How it works

Customize your site

Access the design page

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

Use the design interface

• Choose page type: all, home, or post
• Left: control panel
• Right: live preview
• Top: tabs and publish button

All pages design

Options:

• Font (serif and sans-serif)
• Branding color
• Background color
• Custom CSS (Lite+ plan)
• Custom JavaScript (Pro+ plan)

Home page design

Options:

• sort by menu toggle
• Tag tabs toggle
• Custom CSS (Lite+ plan)
• Custom JavaScript (Pro+ plan)

Post pages design

Options:

• Reading time toggle
• Excerpt toggle
• Publish date toggle
• Table of contents toggle
• Share buttons toggle
• More posts toggle
• KaTeX toggle (Lite+ plan)
• Custom CSS (Lite+ plan)
• Custom JavaScript (Pro+ plan)

Custom CSS and JavaScript examples

Add a scroll progress bar

CSS:

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

JavaScript:

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 + '%';
}

Result:

Hide featured card

CSS:

#featuredPost {
  display: none;
}

FAQ

Q: Why can’t I style posts in Apple Notes?

A: Styling in Apple Notes has limitations:

• No real-time preview
• Prone to errors in advanced scenarios
• Mixes content with style configurations

Q: How to request more style options?

A: Submit feature requests in our Discord channel.

Q: Where can I share my custom CSS or JavaScript?

A: Post your code in our Discord channel.