Intermediate
How to customize theme colors and fonts on Ghost
Quick Answer
Ghost theme customization can be done through the admin panel's design settings for basic changes, or by editing CSS files for advanced modifications. Most themes support color and font customization through built-in options or custom CSS injection.
Prerequisites
- Admin access to Ghost site
- Basic understanding of CSS
- Ghost theme with customization options
- Access to theme files or code injection
1
Access Ghost Admin Design Settings
Navigate to your Ghost admin panel and click on Settings in the left sidebar. Select Design from the settings menu to access theme customization options. Look for your active theme's customization panel.
Tip
Some themes have built-in customization options that appear directly in the Design section.
2
Use Built-in Theme Customization
If your theme supports it, look for Customize or Theme Options buttons in the Design section. Click on these to access color palettes, font selections, and layout options. Many modern Ghost themes include visual customization tools.
Tip
Popular themes like Casper, Source, and Dawn often include color and typography customization options.
3
Access Code Injection Settings
For custom CSS modifications, go to Settings > Code injection in your Ghost admin panel. This allows you to add custom CSS that overrides theme defaults. You'll see sections for Site Header and Site Footer.
Tip
Use the Site Header section for CSS modifications to ensure they load before the page content.
4
Add Custom CSS for Colors
In the Site Header code injection area, add
<style> tags and include CSS rules for color changes. For example: :root { --color-primary: #ff6b35; --color-secondary: #2c3e50; } to modify CSS custom properties, or target specific elements like body { background-color: #ffffff; }.Tip
Use browser developer tools to inspect elements and identify the correct CSS selectors to target.
5
Customize Typography with CSS
Add font customizations by including Google Fonts or custom font declarations. Use
<link> tags to import fonts, then apply them with CSS like body { font-family: 'Inter', sans-serif; }. You can also modify font sizes, weights, and line heights for different elements.Tip
Target specific elements like h1, h2, p, or .post-content for granular typography control.
6
Edit Theme Files Directly
For advanced customization, download your theme files and edit the CSS directly. Access Settings > Design and click Change theme, then Advanced > Upload theme after making modifications. Edit files like
assets/css/screen.css or similar stylesheets.Tip
Always backup your theme files before making direct modifications.
7
Preview and Test Changes
Use Ghost's preview functionality to test your customizations before publishing. Click Preview in the design settings or view your site in a private/incognito browser window. Test on different devices and screen sizes to ensure responsive design.
Tip
Check both light and dark mode appearances if your theme supports theme switching.
8
Save and Publish Customizations
Click Save in the code injection settings or design panel to apply your changes. For theme file modifications, upload the modified theme through the Design > Change theme > Upload theme option. Your changes will be live immediately.
Tip
Clear your browser cache and check your site to confirm all changes are displaying correctly.
Troubleshooting
Custom CSS not appearing on the site
Clear your browser cache and check if CSS is properly wrapped in
<style></style> tags. Ensure CSS selectors are specific enough to override theme defaults by using !important or more specific selectors.Fonts not loading or displaying incorrectly
Verify that Google Fonts or custom font URLs are correct and accessible. Check that font names in CSS match exactly with the imported font family names, including proper quotes around multi-word font names.
Changes only visible to admin users
Ensure you're testing in an incognito browser window or logged out state. Some caching plugins or CDN services may cache the old styles - try clearing site cache or waiting for cache expiration.
Theme customizations lost after theme updates
Use code injection instead of direct theme file editing to preserve customizations. If you must edit theme files, maintain a backup of your customized version and document all changes for easy reapplication after updates.
Ready to get started with Ghost?
Put this tutorial into practice. Visit Ghost and follow the steps above.
Visit Ghost →