Personalization

Customize your site styles in realtime using the Quotion dashboard (opens in a new tab).

Demo video

Follow these simple steps to personalize the styles.

Go to the design page in the dashboard

1. Log in to the dashboard (opens in a new tab).
2. Access your site dashboard by clicking on the site in the sidebar.
3. Click the design link in the site sidebar.

Design your site

There are three types of pages you can style: all, home, and post. Style different pages by clicking the tabs at the top center area.

• all applies customizations to all pages, including home and post pages (e.g., font, colors).
• home and post allow customizations specific to the designated pages.

All design tabs share the same layout: control panel on the left, live preview on the right, tabs, and publish button at the top.

Design for all pages

Control options include:

• Font (serif and sans-serif)
• Branding color (18 colors)
• Background color (7 fixed colors and arbitrary color via color picker)
• Custom CSS
• Custom JavaScript

Design for the home page

Control options include:

• sort by menu (default on)
• Tag tabs toggle (default on)
• Custom CSS
• Custom JavaScript

Design for the post pages

Control options include:

• Reading time toggle (default on)
• Excerpt toggle (default on)
• Publish date toggle (default on)
• Table of contents toggle (default on)
• Share buttons toggle (default on)
• More posts toggle (default on)
• Custom CSS
• Custom JavaScript

Custom CSS and JavaScript examples

Custom CSS and JavaScript are powerful tools for styling your site. Here's an example to display a progress bar at the top of your pages:

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

The result looks like this:

Want to share your awesome CSS or JavaScript code here? Show your code in our Discord channel (opens in a new tab).

Want more style options?

Feel free to submit a feature request in our friendly Discord channel (opens in a new tab).

Why I can't style the post in Apple Notes?

Personalizing your post's styles in Apple Notes might sounds good at first, but you can't preview the changes in realtime, it's easy to make mistakes for advanced scenarios like JavaScript & CSS. And mixing your note content with style configurations isn't ideal to manage.