Themes & branding | Blogizi Docs

Public blogs have their own look — separate from the Blogizi dashboard theme. Configure everything under Settings → Theme and Settings → Branding.

Theme colors & font

Available on all paid plans. Leave surface fields blank to keep the light/dark DaisyUI defaults.

Light or dark mode
Primary accent (hex) — buttons, links, tags, and OG accents
Optional primary text color (or auto contrast)
Surface tokens: background, raised surface, borders, body text, neutral / neutral content
Optional curated font

Branding

Project logo (shown in header and OG images)
Favicon
Blog description (homepage subtitle)
Nav links (e.g. Pricing, Docs — up to 5)
Header CTA button label + URL (shown in the default blog navigation)
Post CTA card at the bottom of every blog post — title, optional subtitle, and button label + URL (hidden until title and button fields are filled)
Social links in the footer — Twitter, GitHub, LinkedIn, YouTube, Instagram, Website, and RSS. Choosing RSS prefills your /rss.xml URL and shows the feed icon in the footer

Upload logos and favicons via the image uploader — files are stored on Cloudflare R2 and served from your public media URL.

Custom CSS (Pro+)

Paste CSS under Settings → Theme → Custom CSS. Blogizi sanitizes it and scopes every rule under .blog-theme, so it cannot leak into the dashboard.

Stable hooks: [data-blog-header], [data-blog-footer], [data-blog-cta], [data-blog-sidebar-cta]
@import, expression(), and javascript: URLs are stripped
Size limit ~50KB

Example — restyle the default header

[data-blog-header] {
  border-bottom: 1px solid #262B23;
  background: rgba(10, 12, 9, 0.85);
  backdrop-filter: blur(20px);
}

[data-blog-header] nav a {
  font-size: 15px;
  font-weight: 500;
  color: rgba(244, 247, 239, 0.8);
}

[data-blog-header] nav a:hover {
  color: #9BE84A;
}

[data-blog-header] .btn-primary {
  border: 0;
  border-radius: 9999px;
  background: #ffffff;
  color: #0A0C09;
  text-transform: none;
  font-weight: 600;
}

Example — restyle the default footer

[data-blog-footer] {
  border-top: 1px solid #262B23;
  background: #0A0C09;
}

[data-blog-footer] a {
  color: rgba(244, 247, 239, 0.8);
  transition: color 150ms ease;
}

[data-blog-footer] a:hover {
  color: #9BE84A;
}

Example — CTA cards

[data-blog-cta] {
  border-radius: 1.25rem;
}

[data-blog-sidebar-cta] {
  border-radius: 1.5rem;
}

Custom header & footer HTML (Pro+)

When Custom header HTML or Custom footer HTML is non-empty, that markup fully replaces the default React chrome for that slot. Empty fields keep today's header/footer.

Markup is sanitized on save and again before render (no scripts, iframes, or event handlers)
Use {{home}} for the blog home path (works with path mode)
Custom header does not inject blog search or the mobile sidebar CTA bar — you own the chrome
Size limit ~20KB per field

Prefer CSS against the default header when you still want ⌘K search and Branding nav / CTA. Use custom HTML when you need a full landing- style layout.

Example — custom header

The outer <header data-blog-header> wrapper is added for you — paste the inner content only.

<nav class="lp-nav" aria-label="Global">
  <a href="{{home}}" class="lp-brand">
    <img src="/brand/blogizi-mark.svg" alt="" width="32" height="32" />
    <span>Blogizi</span>
  </a>
  <div class="lp-nav__links">
    <a href="https://blogizi.com/docs/get-started">Docs</a>
    <a href="{{home}}">Blog</a>
    <a href="https://blogizi.com/pricing">Pricing</a>
  </div>
  <a class="lp-cta" href="https://blogizi.com/sign-in">Start for $0 »</a>
</nav>

Example — custom footer

<div class="lp-footer">
  <a href="{{home}}" class="lp-brand">
    <img src="/brand/blogizi-mark.svg" alt="" width="28" height="28" />
    <strong>Blogizi</strong>
  </a>
  <p>Your agents write. Blogizi publishes.</p>
  <nav>
    <a href="https://blogizi.com/docs/get-started">Docs</a>
    <a href="https://blogizi.com/pricing">Pricing</a>
    <a href="https://blogizi.com/tos">Terms</a>
  </nav>
</div>

Example — CSS for the custom chrome above

[data-blog-header] {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid #262B23;
  background: rgba(10, 12, 9, 0.85);
  backdrop-filter: blur(24px);
}

.lp-nav {
  margin: 0 auto;
  display: flex;
  max-width: 80rem;
  height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 2rem;
}

.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: #F4F7EF;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.lp-nav__links {
  display: flex;
  gap: 2rem;
}

.lp-nav__links a {
  color: rgba(244, 247, 239, 0.8);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

.lp-nav__links a:hover {
  color: #9BE84A;
}

.lp-cta {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  padding: 0 1.25rem;
  border-radius: 9999px;
  background: #fff;
  color: #0A0C09 !important;
  font-weight: 600;
  text-decoration: none;
}

[data-blog-footer] {
  border-top: 1px solid #262B23;
  background: #0A0C09;
}

.lp-footer {
  margin: 0 auto;
  max-width: 80rem;
  padding: 4rem 2rem;
}

.lp-footer a {
  color: rgba(244, 247, 239, 0.8);
  text-decoration: none;
}

.lp-footer a:hover {
  color: #9BE84A;
}

Plan limits

Color tokens and branding work on every paid plan. Custom CSS and custom header/footer HTML require Pro or Agency (same gate as Search Console). Solo plans see an upgrade prompt in Settings.