Customization

Learn how to customize colors, fonts, and styles in Ceres Theme.

Ceres Theme is designed to be easily customizable. You can override colors, fonts, and component styles without modifying the theme files directly.

Custom CSS File

Step 1: Create the File

Create assets/css/custom.scss in your project:

---
---

// Your custom styles here

Important

The empty front matter (the two lines of ---) is required for Jekyll to process the SCSS file.

Step 2: Reference in Config

Add to your _config.yml:

custom_css: /assets/css/custom.scss

Changing Colors

Override CSS custom properties in your custom file:

---
---

:root {
    // Primary accent color
    --er-accent: #10b981;
    --er-accent-dark: #059669;
    --er-accent-dim: rgba(16, 185, 129, 0.1);
    
    // Optionally change other colors
    --er-black: #1a1a2e;
    --er-gray-50: #f0f4f8;
}

See the Colors page for all available color variables.

Changing Fonts

Replace Primary Font

---
---

// Import your font
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* {
    font-family: 'Inter', sans-serif;
}

Replace Code Font

code, pre, .mono {
    font-family: 'Fira Code', monospace;
}

Overriding Components

Buttons

// Larger border radius
.btn {
    border-radius: 50px; // Pill shape
}

// Different primary button color
.btn-glow {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    
    &:hover {
        box-shadow: 0 4px 20px rgba(236, 72, 153, 0.35);
    }
}

Hero Section

// Custom hero background
.hero {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    
    h1 {
        color: #ffffff;
    }
    
    p {
        color: #a0aec0;
    }
}

// Larger hero title
.hero h1 {
    font-size: 4.5rem;
}

Cards

// Rounded cards
.bento-card,
.pricing-card,
.use-case-card {
    border-radius: 24px;
}

// Shadow on cards
.bento-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: none;
}

// Always visible navbar background
.navbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
}

// Larger logo
.navbar-brand {
    font-size: 1.5rem;
}

// Dark footer
.site-footer {
    background: var(--er-black);
    border-top: none;
    
    .footer-brand,
    .footer-title {
        color: var(--er-white);
    }
    
    .footer-desc,
    .footer-links a,
    .footer-bottom p {
        color: var(--er-gray-400);
    }
}

Overriding Layouts

Copy any layout file from the theme to your project at the same path to override it.

Example: Custom Default Layout

Create _layouts/default.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Your custom head content -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Customization | Ceres Theme</title>
    
    <!-- Add your own fonts, scripts, etc. -->
    <link rel="stylesheet" href="/ceres-theme/assets/css/style.css">
</head>
<body>
    <header class="navbar">
    <div class="container">
        <a href="/ceres-theme/" class="navbar-brand">
            <span class="dot"></span>
            Ceres Theme
        </a>
        
        
        <nav>
            <ul class="nav-links">
                
                <li>
                    <a href="/ceres-theme/getting-started" class="nav-link">Docs</a>
                </li>
                
                <li>
                    <a href="/ceres-theme/components/" class="nav-link">Components</a>
                </li>
                
                <li>
                    <a href="/ceres-theme/customization" class="nav-link">Customization</a>
                </li>
                
                <li>
                    <a href="https://github.com/devuri/ceres-theme" class="nav-link">GitHub</a>
                </li>
                
                
                <li>
                    <a href="/ceres-theme/getting-started" class="btn btn-glow">Get Started</a>
                </li>
                
            </ul>
        </nav>
        
    </div>
</header>

    
    <div class="docs-wrapper">
    <aside class="docs-sidebar">
        <nav class="docs-nav">
            <div class="docs-nav-section">
                <div class="docs-nav-title">Getting Started</div>
                <ul class="docs-nav-list">
                    <li><a href="/ceres-theme/getting-started" class="">Installation</a></li>
                    <li><a href="/ceres-theme/configuration" class="">Configuration</a></li>
                    <li><a href="/ceres-theme/layouts" class="">Layouts</a></li>
                </ul>
            </div>
            <div class="docs-nav-section">
                <div class="docs-nav-title">Components</div>
                <ul class="docs-nav-list">
                    <li><a href="/ceres-theme/components/" class="">Overview</a></li>
                    <li><a href="/ceres-theme/components/hero" class="">Hero</a></li>
                    <li><a href="/ceres-theme/components/bento-grid" class="">Bento Grid</a></li>
                    <li><a href="/ceres-theme/components/steps" class="">Steps</a></li>
                    <li><a href="/ceres-theme/components/use-cases" class="">Use Cases</a></li>
                    <li><a href="/ceres-theme/components/pricing" class="">Pricing</a></li>
                    <li><a href="/ceres-theme/components/cta" class="active">CTA Section</a></li>
                </ul>
            </div>
            <div class="docs-nav-section">
                <div class="docs-nav-title">Styling</div>
                <ul class="docs-nav-list">
                    <li><a href="/ceres-theme/css-reference" class="">CSS Reference</a></li>
                    <li><a href="/ceres-theme/customization" class="">Customization</a></li>
                    <li><a href="/ceres-theme/colors" class="">Colors</a></li>
                </ul>
            </div>
            <div class="docs-nav-section">
                <div class="docs-nav-title">Resources</div>
                <ul class="docs-nav-list">
                    <li><a href="/ceres-theme/migration" class="">Migration Guide</a></li>
                    <li><a href="/ceres-theme/changelog" class="">Changelog</a></li>
                </ul>
            </div>
        </nav>
    </aside>
    <main class="docs-content">
        <article class="docs-article">
            
            <header class="docs-header">
                <h1>CTA Section</h1>
                
                <p class="docs-lead">Call-to-action sections to drive conversions at the end of your pages.</p>
                
            </header>
            
            <p>The CTA (Call-to-Action) section is typically placed at the end of a page to encourage visitors to take action. It features a centered layout with a headline, description, and action buttons.</p>

<h2 id="basic-usage">Basic Usage</h2>

<h3 id="using-the-include">Using the Include</h3>

<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span>cta.html<span class="err">
</span><span class="w">   </span><span class="na">title</span><span class="o">=</span><span class="s2">"Ready to get started?"</span><span class="err">
</span><span class="w">   </span><span class="na">description</span><span class="o">=</span><span class="s2">"Join thousands of happy customers today."</span><span class="err">
</span><span class="w">   </span><span class="na">cta_primary</span><span class="o">=</span><span class="s2">"Get Started"</span><span class="err">
</span><span class="w">   </span><span class="na">cta_primary_url</span><span class="o">=</span><span class="s2">"/signup"</span><span class="err">
</span><span class="w">   </span><span class="na">cta_secondary</span><span class="o">=</span><span class="s2">"Contact Sales"</span><span class="err">
</span><span class="w">   </span><span class="na">cta_secondary_url</span><span class="o">=</span><span class="s2">"/contact"</span><span class="err">
</span><span class="p">%}</span>
</code></pre></div></div>

<h3 id="using-html">Using HTML</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;section</span> <span class="na">class=</span><span class="s">"cta-section"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Ready to get started?<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;p&gt;</span>Join thousands of happy customers today.<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cta-actions"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/signup"</span> <span class="na">class=</span><span class="s">"btn btn-glow btn-lg"</span><span class="nt">&gt;</span>Get Started<span class="nt">&lt;/a&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/contact"</span> <span class="na">class=</span><span class="s">"btn btn-ghost btn-lg"</span><span class="nt">&gt;</span>Contact Sales<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="include-parameters">Include Parameters</h2>

<table>
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Description</th>
      <th>Required</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">title</code></td>
      <td>Main headline</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">description</code></td>
      <td>Supporting text</td>
      <td>No</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">cta_primary</code></td>
      <td>Primary button text</td>
      <td>No</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">cta_primary_url</code></td>
      <td>Primary button link</td>
      <td>No</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">cta_primary_icon</code></td>
      <td>Icon for primary button</td>
      <td>No</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">cta_secondary</code></td>
      <td>Secondary button text</td>
      <td>No</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">cta_secondary_url</code></td>
      <td>Secondary button link</td>
      <td>No</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">cta_secondary_icon</code></td>
      <td>Icon for secondary button</td>
      <td>No</td>
    </tr>
  </tbody>
</table>

<hr />

<h2 id="examples">Examples</h2>

<h3 id="simple-cta">Simple CTA</h3>

<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span>cta.html<span class="err">
</span><span class="w">   </span><span class="na">title</span><span class="o">=</span><span class="s2">"Start your free trial"</span><span class="err">
</span><span class="w">   </span><span class="na">description</span><span class="o">=</span><span class="s2">"No credit card required."</span><span class="err">
</span><span class="w">   </span><span class="na">cta_primary</span><span class="o">=</span><span class="s2">"Try Free"</span><span class="err">
</span><span class="w">   </span><span class="na">cta_primary_url</span><span class="o">=</span><span class="s2">"/signup"</span><span class="err">
</span><span class="p">%}</span>
</code></pre></div></div>

<h3 id="with-icons">With Icons</h3>

<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span>cta.html<span class="err">
</span><span class="w">   </span><span class="na">title</span><span class="o">=</span><span class="s2">"Ready to dive in?"</span><span class="err">
</span><span class="w">   </span><span class="na">description</span><span class="o">=</span><span class="s2">"Get started with our comprehensive documentation."</span><span class="err">
</span><span class="w">   </span><span class="na">cta_primary</span><span class="o">=</span><span class="s2">"View Docs"</span><span class="err">
</span><span class="w">   </span><span class="na">cta_primary_url</span><span class="o">=</span><span class="s2">"/docs"</span><span class="err">
</span><span class="w">   </span><span class="na">cta_primary_icon</span><span class="o">=</span><span class="s2">"book"</span><span class="err">
</span><span class="w">   </span><span class="na">cta_secondary</span><span class="o">=</span><span class="s2">"Watch Demo"</span><span class="err">
</span><span class="w">   </span><span class="na">cta_secondary_url</span><span class="o">=</span><span class="s2">"/demo"</span><span class="err">
</span><span class="w">   </span><span class="na">cta_secondary_icon</span><span class="o">=</span><span class="s2">"play-circle"</span><span class="err">
</span><span class="p">%}</span>
</code></pre></div></div>

<h3 id="newsletter-signup-style">Newsletter Signup Style</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;section</span> <span class="na">class=</span><span class="s">"cta-section"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Stay in the loop<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;p&gt;</span>Get the latest updates delivered to your inbox.<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cta-actions"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/newsletter"</span> <span class="na">class=</span><span class="s">"btn btn-glow btn-lg"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"bi bi-envelope"</span><span class="nt">&gt;&lt;/i&gt;</span> Subscribe
            <span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="css-classes">CSS Classes</h2>

<table>
  <thead>
    <tr>
      <th>Class</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">.cta-section</code></td>
      <td>Main section container</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">.cta-actions</code></td>
      <td>Button container</td>
    </tr>
  </tbody>
</table>

<hr />

<h2 id="styling-details">Styling Details</h2>

<h3 id="section">Section</h3>

<ul>
  <li>Gray background (<code class="language-plaintext highlighter-rouge">gray-50</code>)</li>
  <li>8rem vertical padding</li>
  <li>Centered text</li>
  <li>Radial gradient accent overlay</li>
</ul>

<h3 id="headline">Headline</h3>

<ul>
  <li>3rem font size</li>
  <li>700 font weight</li>
  <li>Tight letter spacing (-0.03em)</li>
  <li>1.5rem bottom margin</li>
</ul>

<h3 id="description">Description</h3>

<ul>
  <li>1.2rem font size</li>
  <li>Gray-500 color</li>
  <li>Max-width 500px</li>
  <li>Auto horizontal margins (centered)</li>
  <li>2.5rem bottom margin</li>
</ul>

<h3 id="button-container">Button Container</h3>

<ul>
  <li>Flexbox with center alignment</li>
  <li>1rem gap between buttons</li>
</ul>

<hr />

<h2 id="responsive-behavior">Responsive Behavior</h2>

<table>
  <thead>
    <tr>
      <th>Breakpoint</th>
      <th>Changes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Desktop</td>
      <td>Side-by-side buttons</td>
    </tr>
    <tr>
      <td>Mobile (&lt;768px)</td>
      <td>Stacked buttons, 2rem font size for headline</td>
    </tr>
  </tbody>
</table>

<hr />

<h2 id="variations">Variations</h2>

<h3 id="dark-background-cta">Dark Background CTA</h3>

<p>Create a custom dark CTA section:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;section</span> <span class="na">class=</span><span class="s">"cta-section cta-dark"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Join our community<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;p&gt;</span>Connect with thousands of developers.<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cta-actions"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-glow btn-lg"</span><span class="nt">&gt;</span>Join Now<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</code></pre></div></div>

<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.cta-dark</span> <span class="p">{</span>
    <span class="nl">background</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">er-black</span><span class="p">);</span>
    
    <span class="k">&amp;</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">background</span><span class="p">:</span> <span class="nf">radial-gradient</span><span class="p">(</span><span class="nb">circle</span><span class="o">,</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">99</span><span class="o">,</span> <span class="m">102</span><span class="o">,</span> <span class="m">241</span><span class="o">,</span> <span class="m">0</span><span class="mi">.2</span><span class="p">)</span> <span class="m">0%</span><span class="o">,</span> <span class="nb">transparent</span> <span class="m">70%</span><span class="p">);</span>
    <span class="p">}</span>
    
    <span class="nt">h2</span> <span class="p">{</span>
        <span class="nl">color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">er-white</span><span class="p">);</span>
    <span class="p">}</span>
    
    <span class="nt">p</span> <span class="p">{</span>
        <span class="nl">color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">er-gray-400</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>

<h3 id="accent-background-cta">Accent Background CTA</h3>

<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.cta-accent</span> <span class="p">{</span>
    <span class="nl">background</span><span class="p">:</span> <span class="nf">linear-gradient</span><span class="p">(</span><span class="m">135deg</span><span class="o">,</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">er-accent</span><span class="p">)</span> <span class="m">0%</span><span class="o">,</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">er-accent-dark</span><span class="p">)</span> <span class="m">100%</span><span class="p">);</span>
    
    <span class="k">&amp;</span><span class="nd">::before</span> <span class="p">{</span>
        <span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
    <span class="p">}</span>
    
    <span class="nt">h2</span><span class="o">,</span> <span class="nt">p</span> <span class="p">{</span>
        <span class="nl">color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">er-white</span><span class="p">);</span>
    <span class="p">}</span>
    
    <span class="nc">.btn-ghost</span> <span class="p">{</span>
        <span class="nl">color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">er-white</span><span class="p">);</span>
        <span class="nl">border-color</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">0</span><span class="mi">.3</span><span class="p">);</span>
        
        <span class="k">&amp;</span><span class="nd">:hover</span> <span class="p">{</span>
            <span class="nl">background</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">0</span><span class="mi">.1</span><span class="p">);</span>
            <span class="nl">border-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">er-white</span><span class="p">);</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>

<h3 id="with-form">With Form</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;section</span> <span class="na">class=</span><span class="s">"cta-section"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Get early access<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;p&gt;</span>Be the first to know when we launch.<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"cta-form"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">placeholder=</span><span class="s">"Enter your email"</span> <span class="na">class=</span><span class="s">"cta-input"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-glow"</span><span class="nt">&gt;</span>Notify Me<span class="nt">&lt;/button&gt;</span>
        <span class="nt">&lt;/form&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</code></pre></div></div>

<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.cta-form</span> <span class="p">{</span>
    <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
    <span class="na">gap</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span>
    <span class="nl">max-width</span><span class="p">:</span> <span class="m">500px</span><span class="p">;</span>
    <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="nb">auto</span><span class="p">;</span>
<span class="p">}</span>

<span class="nc">.cta-input</span> <span class="p">{</span>
    <span class="nl">flex</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span>
    <span class="nl">padding</span><span class="p">:</span> <span class="m">1rem</span> <span class="m">1</span><span class="mi">.5rem</span><span class="p">;</span>
    <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">er-gray-300</span><span class="p">);</span>
    <span class="nl">border-radius</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span>
    <span class="nl">font-size</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span>
    
    <span class="k">&amp;</span><span class="nd">:focus</span> <span class="p">{</span>
        <span class="nl">outline</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
        <span class="nl">border-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">er-accent</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>

<hr />

<h2 id="placement-tips">Placement Tips</h2>

<ol>
  <li><strong>End of landing pages</strong> — Primary use case, encourage conversion</li>
  <li><strong>After feature sections</strong> — Remind visitors to take action</li>
  <li><strong>In the middle of long pages</strong> — Break up content and provide exit points</li>
  <li><strong>Footer alternative</strong> — Replace or supplement the default footer</li>
</ol>

<hr />

<h2 id="best-practices">Best Practices</h2>

<ol>
  <li><strong>Strong headline</strong> — Use action-oriented language</li>
  <li><strong>Clear value proposition</strong> — Tell visitors what they’ll get</li>
  <li><strong>Prominent button</strong> — Make the primary CTA stand out</li>
  <li><strong>Single focus</strong> — Don’t offer too many options</li>
  <li><strong>Urgency (optional)</strong> — “Limited time” or “Join 10,000+ users”</li>
</ol>

        </article>
    </main>
</div>

    
    <footer class="site-footer">
    <div class="container">
        
        <div class="footer-grid">
            <div>
                <div class="footer-brand">
                    <span class="dot"></span>
                    Ceres Theme
                </div>
                <p class="footer-desc">A modern Jekyll theme for GitHub Pages.</p>
            </div>
            
            
            <div>
                <div class="footer-title">Documentation</div>
                <ul class="footer-links">
                    
                    <li><a href="/ceres-theme/getting-started">Getting Started</a></li>
                    
                    <li><a href="/ceres-theme/configuration">Configuration</a></li>
                    
                    <li><a href="/ceres-theme/layouts">Layouts</a></li>
                    
                    <li><a href="/ceres-theme/customization">Customization</a></li>
                    
                </ul>
            </div>
            
            <div>
                <div class="footer-title">Components</div>
                <ul class="footer-links">
                    
                    <li><a href="/ceres-theme/components/hero">Hero</a></li>
                    
                    <li><a href="/ceres-theme/components/bento-grid">Bento Grid</a></li>
                    
                    <li><a href="/ceres-theme/components/pricing">Pricing Cards</a></li>
                    
                    <li><a href="/ceres-theme/components/">All Components</a></li>
                    
                </ul>
            </div>
            
            <div>
                <div class="footer-title">Resources</div>
                <ul class="footer-links">
                    
                    <li><a href="https://github.com/devuri/ceres-theme">GitHub</a></li>
                    
                    <li><a href="https://github.com/devuri/ceres-theme/issues">Issues</a></li>
                    
                    <li><a href="/ceres-theme/changelog">Changelog</a></li>
                    
                </ul>
            </div>
            
        </div>
        
        
        <div class="footer-bottom">
            <p>2026 Ceres Theme. All rights reserved.</p>
            
            
            <div class="footer-socials">
                
                <a href="https://github.com/devuri/ceres-theme" aria-label="GitHub">
                    <i class="bi bi-github"></i>
                </a>
                
            </div>
            
        </div>
    </div>
</footer>

    
    <!-- Add your own scripts -->
</body>
</html>

Overriding Includes

Similarly, copy any include file to override it.

Example: Custom Header

Create _includes/header.html:

<header class="navbar">
    <div class="container">
        <!-- Your custom logo -->
        <a href="/ceres-theme/" class="navbar-brand">
            <img src="/assets/images/logo.svg" alt="Ceres Theme">
        </a>
        
        <!-- Your custom navigation -->
        <nav>
            <!-- ... -->
        </nav>
    </div>
</header>

Adding Custom JavaScript

Per-Page JavaScript

Add to page front matter:

---
layout: home
title: My Page
custom_js: /assets/js/my-script.js
---

Global JavaScript

Override the default layout and add your script:

<script src="/ceres-theme/assets/js/global.js"></script>

Responsive Customization

Override responsive styles:

// Custom mobile styles
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }
    
    .bento-grid {
        gap: 1rem;
    }
}

// Custom tablet styles
@media (max-width: 992px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
}

Tips

Use CSS variables — Override --er-* variables for global changes
Be specific — Use specific selectors to override component styles
Test responsively — Check your customizations on all screen sizes
Keep it minimal — Only override what you need to change
Document changes — Comment your custom CSS for future reference

Example: Complete Custom Theme

---
---

// Custom color scheme
:root {
    --er-accent: #8b5cf6;
    --er-accent-dark: #7c3aed;
    --er-accent-dim: rgba(139, 92, 246, 0.1);
    --er-black: #1e1b4b;
}

// Custom font
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

* {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

// Pill-shaped buttons
.btn {
    border-radius: 50px;
}

// Softer card corners
.bento-card,
.pricing-card,
.use-case-card,
.step-card {
    border-radius: 20px;
}

// Custom gradient
.gradient {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

// Dark footer
.site-footer {
    background: var(--er-black);
    
    .footer-brand, .footer-title {
        color: #fff;
    }
    
    .footer-desc, .footer-links a, .footer-bottom p {
        color: #a5b4fc;
    }
}

Custom CSS File

Step 1: Create the File

Step 2: Reference in Config

Changing Colors

Changing Fonts

Replace Primary Font

Replace Code Font

Overriding Components

Buttons

Hero Section

Cards

Navigation

Footer

Overriding Layouts

Example: Custom Default Layout

Overriding Includes

Example: Custom Header

Adding Custom JavaScript

Per-Page JavaScript

Global JavaScript

Responsive Customization

Tips

Example: Complete Custom Theme