Starting a website?

Purpose-Built Templates

ZU2B Blueprints

Business in a Box

Reference

ZU2B Pulse™

See what visitors experience before they leave — paste any public URL and get a plain-English performance report in seconds.

Scan Your URL Free
FAQ • Support

When Some Text in a Custom HTML Block Renders Black Instead of White

Field Note #176
🔬 Investigated 🟡 Intermediate ⏱ 30 Minutes ✓ Observation from Experience
The symptom
A new section was added to an existing dark-themed Custom HTML block (a dashboard-style page with a global white-on-dark color scheme). Most of the new content displayed correctly in white, but some of the text — specifically, plain text placed directly inside table cells with no wrapping element — rendered in black instead.

Initial assumption
The first instinct was that the new content was somehow missing from the page’s overall dark theme, or that a stray element was breaking the layout.

Investigation
The existing table styling only defined padding and vertical alignment on table cells — it never explicitly set a text color on the base cell rule. Every prior use of that table style always wrapped its content in a smaller, purpose-specific element (a label, a badge, a status tag) that had its own explicit color set. Because of that, the missing base color on the table cell itself had never been noticed before — nothing had ever relied on it.
 
The new content was the first place plain, unwrapped text was placed directly inside a cell, which meant its color depended entirely on inheritance from parent elements. In practice, that inheritance was not producing the expected white text — most likely because something else in the page (commonly a theme’s own default table or `<code>` element styling, if the block is embedded inside a WordPress theme) was taking precedence over the intended inherited value.
 
Adding an explicit `color` declaration directly to the base table-cell rule resolved the issue immediately, without needing to identify exactly what was overriding the inherited color.

What to check

When some but not all text in a themed Custom HTML block renders in the wrong color:
 
1. Check whether the affected text is wrapped in its own styled element, or sitting as raw/plain text directly inside a generic container.
2. Check the base CSS rule for that container (e.g. a table cell, a list item) for whether it explicitly sets a text color, or is relying on inheritance.
3. If relying on inheritance, add an explicit color directly to the rule rather than assuming the inherited value will hold — especially in any context where the block might be embedded inside a theme or page that has its own default styling for common HTML elements like tables or `<code>` tags.
4. Inline `<code>` elements are a particularly common source of this issue, since many WordPress themes apply their own default background/text-color styling to `<code>` regardless of the surrounding block’s theme.

Troubleshooting lesson
Inherited color is not a safe default inside a Custom HTML block that may be embedded in an unknown theme environment. Any base style rule that has always “happened to work” because everything using it was independently styled is a latent gap — the first time plain, unstyled content uses that rule, the missing explicit value will surface.

Tagged in :

More from the field