# Themes & branding

> Colors, fonts, logo, custom CSS, and optional header/footer HTML.

HTML version: https://blogizi.com/docs/themes
Markdown version: https://blogizi.com/docs/themes.md

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

```css
[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

```css
[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

```css
[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.

```html
<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

```html
<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

```css
[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.