Article Theming

How EarlySEO articles adapt to your site's theme across all integrations — CSS custom properties, clean HTML delivery, and per-platform behavior.

EarlySEO articles are designed to inherit your site's theme automatically. Whether you use WordPress, Shopify, Ghost, Webflow, Wix, Framer, or a custom webhook, published articles will match your site's fonts, colors, and spacing without any extra configuration.

How It Works

When EarlySEO generates an article, it produces clean, semantic HTML — standard tags like <h2>, <p>, <ul>, <a>, <table>, etc. No inline styles are injected into individual elements.

Each integration handles theming differently:

Integration	Theming Approach
WordPress	Clean HTML — your WordPress theme controls all styling. The EarlySEO Sync plugin enqueues a lightweight companion stylesheet that only adds spacing/layout if needed.
WordPress.com	Clean HTML — your WordPress.com theme applies its own typography and colors.
Shopify	Clean HTML — your Shopify blog theme controls the look of articles. EarlySEO strips all embedded styles before publishing.
Ghost	Clean HTML — your Ghost theme's post template styles the content.
Webflow	Clean HTML — your Webflow Designer styles apply to collection items.
Wix	Clean HTML — Wix blog themes control the article's appearance.
Framer	Clean HTML — Framer manages its own rendering pipeline.
Notion	Converted to native Notion blocks — renders using Notion's own styling.
Squarespace	Hosted blog — uses your configured domain and theme settings.
Webhook	Three HTML variants + companion CSS provided in the payload — you choose which to use.

Webhook Integration

The webhook payload includes two versions of the article HTML:

`content_html` (recommended)

Fully styled HTML wrapped in a .earlyseo-article div with an embedded <style> block. Works out of the box — tables, blockquotes, code blocks, and lists are properly styled even if your site has no CSS for those elements.

All colors use CSS custom properties, so they automatically inherit your theme. To customize, just set the variables on your site — the embedded defaults will be overridden.

<!-- content_html — works immediately, no extra setup -->
<div class="earlyseo-article">
  <style>
    .earlyseo-article { color: var(--earlyseo-text-color, inherit); ... }
    .earlyseo-article blockquote { color: var(--earlyseo-muted-color, #6b7280); ... }
    .earlyseo-article table { ... }
  </style>
  <h2>Introduction</h2>
  <p>Your article content with <a href="/related">internal links</a>...</p>
  <blockquote><p>Properly styled even if your site has no blockquote CSS.</p></blockquote>
  <table>
    <thead><tr><th>Feature</th><th>Status</th></tr></thead>
    <tbody><tr><td>Tables</td><td>Styled</td></tr></tbody>
  </table>
</div>

To customize colors, add CSS variables to your site — they override the defaults:

:root {
  --earlyseo-text-color: #333;
  --earlyseo-heading-color: #111;
  --earlyseo-link-color: #0066cc;
  --earlyseo-border-color: #ddd;
}

`content_raw_html`

Completely bare HTML — no wrapper div, no styles. Use this only if your site already has full CSS for all HTML elements (tables, blockquotes, code blocks, lists, etc.).

<h2>Introduction</h2>
<p>Your article content...</p>

CSS Custom Properties

The embedded <style> block in content_html uses CSS custom properties for every color value. The defaults are semi-transparent (rgba) so they automatically adapt to both light and dark backgrounds — no configuration needed.

If you want to fine-tune for your brand, override any variable on your site — your values take priority over the embedded defaults:

/* Example: brand overrides */
:root {
  --earlyseo-text-color: #333333;
  --earlyseo-heading-color: #111111;
  --earlyseo-link-color: #0066cc;
  --earlyseo-font-family: "Inter", sans-serif;
  --earlyseo-muted-color: #6b7280;
  --earlyseo-border-color: #e0e0e0;
  --earlyseo-code-bg: #f5f5f5;
  --earlyseo-pre-bg: #fafafa;
  --earlyseo-th-bg: #f5f5f5;
}

Available Tokens

Token	What it controls	Default
`--earlyseo-text-color`	Body text color	`inherit`
`--earlyseo-heading-color`	Heading color (h1–h6)	`inherit`
`--earlyseo-link-color`	Link color	`inherit`
`--earlyseo-font-family`	Body font family	`inherit`
`--earlyseo-muted-color`	Blockquote / secondary text color	`inherit` (0.75 opacity)
`--earlyseo-border-color`	All borders (h2, blockquote, pre, table, hr)	`rgba(128,128,128,0.2)`
`--earlyseo-code-bg`	Inline code background	`rgba(128,128,128,0.1)`
`--earlyseo-pre-bg`	Code block background	`rgba(128,128,128,0.06)`
`--earlyseo-th-bg`	Table header background	`rgba(128,128,128,0.1)`

Why semi-transparent defaults? Because rgba(128,128,128,0.1) creates a subtle tint on any background — slightly darker on white, slightly lighter on black. This means tables, code blocks, and blockquotes look correct on both light and dark themes without any user configuration.

Text color, heading color, link color, and font family all inherit from the surrounding page, so articles automatically match the site's typography.

Dark Mode Support

Articles work on dark themes out of the box because all background/border defaults use semi-transparent rgba() values that adapt to any background color.

If you want to fine-tune colors for dark mode, override the tokens:

@media (prefers-color-scheme: dark) {
  :root {
    --earlyseo-text-color: #e5e7eb;
    --earlyseo-heading-color: #f9fafb;
    --earlyseo-link-color: #60a5fa;
    --earlyseo-muted-color: #9ca3af;
  }
}

If your site uses a class-based dark mode (e.g., .dark on <html>), use the same overrides inside that selector:

html.dark {
  --earlyseo-text-color: #e5e7eb;
  --earlyseo-heading-color: #f9fafb;
  --earlyseo-link-color: #60a5fa;
  --earlyseo-muted-color: #9ca3af;
}

Background/border tokens (--earlyseo-border-color, --earlyseo-code-bg, etc.) usually don't need dark-mode overrides because the semi-transparent defaults already adapt. Only override them if you want specific values.

FAQ

My articles look different from the rest of my blog

This should no longer happen. EarlySEO articles now deliver clean semantic HTML to all CMS platforms, and your site's theme CSS controls their appearance. If you're using the webhook integration, use content_html with content_css — it provides proper styling for tables, blockquotes, and lists even if your site doesn't have CSS for those elements.

Can I add custom CSS for EarlySEO articles only?

Yes. All article content is wrapped in a <div class="earlyseo-article"> container (for CMS platforms that support it) or uses CSS custom properties. You can target this class:

.earlyseo-article h2 {
  border-bottom: 2px solid var(--your-brand-color);
}

How do I override styles for a specific platform?

Each CMS strips embedded styles before publishing, so your theme is always in control. If you need platform-specific overrides, use your CMS's built-in custom CSS feature (e.g., WordPress Customizer, Shopify theme editor, Webflow Designer).

Do articles support RTL layouts?

Yes. Since articles use semantic HTML that inherits from the parent, RTL support depends on your site's dir="rtl" attribute and theme CSS. No special configuration is needed in EarlySEO.

On this page