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
- Log in to the dashboard (opens in a new tab).
- Access your site dashboard by clicking on the site in the sidebar.
- 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, includinghome
andpost
pages (e.g., font, colors).home
andpost
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.
Don't forget to publish your changes; otherwise, the changes will be lost after refreshing.
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
You need a paid plan to add custom CSS(Lite+) or JavaScript(Pro+). The same as below.
Design for the home page
Control options include:
sort by
menu (defaulton
)- 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:
Scroll progress
/* 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:
Hide featured card
Use this CSS code to hide featured card if you don't like it.
#featuredPost {
display: none;
}
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.
Build your blog with Apple Notes in less than 5 minutes! Try Quotion (opens in a new tab) for free!