Customization

By Amr

Customize the Zer0-Mistakes Jekyll theme - layouts, styles, navigation, and more.

Estimated reading time: 1 minutes

• Share on Reddit
• Share on LinkedIn
• Share on Twitter

• ---

• Page Improvements

• Improve Page Polish content, structure, and presentation of this page
• Expand Page Add depth, examples, and missing sections to this page
• Update Page Refresh outdated content, versions, links, and screenshots
• Fix Page Issue Report a typo, broken link, layout glitch, or content bug
• SEO Optimize Improve discoverability, metadata, and structured data
• Accessibility Audit Audit this page for WCAG 2.1 AA compliance

• ---

• Site Improvements

• UI/UX Improvement Propose a design or UX refinement for the theme
• New Feature Propose a new site-wide feature or capability
• Component Enhancement Improve a Jekyll layout, include, or shared component
• Performance Optimization Improve load time, Core Web Vitals, and asset delivery

Edit on GitHub

Table of Contents

Customization

Customize the Zer0-Mistakes theme to match your brand and requirements.

Customization Areas

Area	Location	Description
Layouts	_layouts/	Page templates and structure
Styles	_sass/	CSS/SCSS customization
Navigation	_data/navigation/	Menu and sidebar configuration
Components	_includes/	Reusable HTML components

Quick Customizations

Site Identity

Update _config.yml:

title: "Your Site Title"
subtitle: "Your tagline"
description: "Site description for SEO"
author:
  name: "Your Name"
  email: "you@example.com"
  bio: "About the author"
logo: /assets/images/logo.png

Colors and Branding

Create or edit _sass/custom.scss:

// Override Bootstrap variables
$primary: #your-color;
$secondary: #your-color;

// Custom styles
body {
  font-family: 'Your Font', sans-serif;
}

Navigation

Edit files in _data/navigation/:

# _data/navigation/main.yml
- title: "Home"
  url: /
- title: "Blog"
  url: /blog/
- title: "Docs"
  url: /docs/

Guides in This Section

• Layouts — Create and customize page templates
• Styles — CSS customization and theming
• Navigation — Configure menus and sidebars

Layout Hierarchy

root.html          ← Base HTML structure
└── default.html   ← Main wrapper with navigation
    ├── home.html      ← Homepage layout
    ├── journals.html  ← Blog posts
    ├── collection.html ← Collection pages
    └── landing.html   ← Full-width landing pages

Override Theme Files

To override any theme file:

1. Create the same file path in your site
2. Jekyll uses your version instead of the theme’s

Example: Override the footer by creating _includes/core/footer.html.

Next Steps

• Layouts Guide — Page templates
• Styles Guide — CSS customization
• Navigation Guide — Menu configuration

See also

• [[Bootstrap Integration]]
• [[Features]]
• [[Liquid]]
• [[Jekyll]]