CZON Custom Style Guide
Customization
👤 Front-end developers or website administrators using CZON to build websites, who wish to customize site styles to match brand or personal preferences.
This article details methods for customizing styles in CZON projects by creating a style.css file in the .czony directory and writing CSS code to override default styles or add personalized appearances. The document explains that CZON detects and copies this file to the output directory during build, adding a style link to each HTML page to ensure custom styles load after built-in styles for effective overrides. It provides a list of available CSS variables, such as background colors, text colors, and link colors, and showcases multiple practical examples, like customizing brand colors, adjusting content area width, customizing code block styles, and hiding specific elements. Finally, it emphasizes precautions, such as the filename must be style.css, rebuilding is required after modifications, using CSS variable overrides is recommended, and !important may be needed when CZON uses Tailwind CSS.
- ✨ CZON supports customizing site styles via the .czony/style.css file
- ✨ Custom styles can override default styles or add personalized appearances
- ✨ During build, CZON detects and copies style.css to the output directory
- ✨ A style link is added to each HTML page, with custom styles loading after built-in styles
- ✨ Provides a list of available CSS variables, including light and dark modes
197 words · ~1 min read