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