How do I customize my blog theme in VeloCMS?
Adjust fonts, brand colors, and layout density without touching code; VeloCMS exposes the most impactful design variables through the Theme settings panel.
VeloCMS lets you adjust your blog's brand colors, primary font, and layout density from Admin → Appearance → Global Design, without writing a single line of CSS. Changes are stored as theme preset overrides and applied as CSS custom properties at runtime — meaning they're instant, reversible, and never break the base theme.
Read the full transcript
You found a theme you love, but the colors aren't your brand and the font isn't quite you. On most platforms, fixing that means CSS, a child theme, or a developer. Not here. I'll rebrand a VeloCMS theme completely — colors, fonts, the details — without touching a single line of code.
It all lives in one place: the Global Design panel under Appearance. No stylesheet, no JSON file, no scary 'additional CSS' box. Just a clean editor with a live preview, so every change I make shows up instantly instead of after a guess-and-refresh.
Start with color. There's a card for each brand token — background, text, your accent — and I just pick new values. The preview swatches update as I go, so I can dial in my exact palette. Six core colors, plus room for custom ones, no hex-code archaeology required.
Now type. Three font slots — heading, body, and accent — so I can set a characterful display face up top and something clean and readable for the writing. Change the slot, the whole site follows. This is where a generic theme starts feeling like it was made for me.
Then the small stuff that sells it. I can round the button corners and set my heading sizes and weights — the finishing touches that make a design feel intentional. Little tokens, big difference. It's the gap between 'a nice template' and 'my brand.'
One Save, and here's the best part — it's a brand layer that sits on top of the theme, so if I switch themes next month, my colors and fonts come with me. I'm not redoing this every time. My brand is set once, and it sticks.
Your colors, your fonts, zero code. Make a theme yours at velocms dot org.
Which design properties can I change without code?
The Global Design panel exposes three categories of settings. Brand colors let you set your primary accent color, background, and text color — all stored as OKLCH values so they adapt cleanly to dark mode. Typography lets you pick from the curated font pairing list (each pair is a heading font + body font selected for readability and performance). Layout gives you a free-text Content width field — type an exact pixel value (for example 720px) for your reading column, or leave it blank to use the theme preset's default width. These three levers cover the most visible parts of your blog's personality without requiring any developer involvement.
How do I set my own brand color?
Open Admin → Appearance → Global Design and click the primary color swatch. A color picker opens with a hex input field — paste your brand color's hex code (for example #E63946) and the preview on the right updates live. VeloCMS converts your hex to OKLCH internally so the color looks consistent across different monitor calibrations and in dark mode. Hit Save Changes and the new color takes effect immediately for all visitors. If you want to reset to the theme's default color, just clear the custom color field and save.
What fonts are available and how do I switch them?
VeloCMS ships with seven carefully chosen font pairs, each covering both heading and body type. The pairs are pre-optimized for web performance — fonts are loaded from Google Fonts with display=swap so they never block your page render. To switch, open the Typography section in the Global Design panel, click any pair to preview it in the live demo on the right, and save. Font swaps propagate to all your existing posts immediately — there's no per-post font setting because inconsistent typography is one of the fastest ways to make a blog look unprofessional.
Can I inject custom CSS for advanced tweaks?
Not today — there's no custom CSS or custom JavaScript injection field in VeloCMS. The Global Design panel covers brand colors, typography, layout density, and corner radius without code, and that's the full extent of the no-code styling surface right now. If a design change isn't one of those levers, it isn't self-serve yet.
If the Global Design panel's colors, typography, and layout controls don't cover what you're after, there's no admin field to work around that today — it isn't a self-serve capability.