Skip to content

Add header image readability styling to all themes#612

Merged
akirk merged 5 commits intomainfrom
fix/mastodon-theme-header-image-readability
Mar 26, 2026
Merged

Add header image readability styling to all themes#612
akirk merged 5 commits intomainfrom
fix/mastodon-theme-header-image-readability

Conversation

@akirk
Copy link
Copy Markdown
Owner

@akirk akirk commented Mar 26, 2026

Screenshot 2026-03-26 at 10 07 14 Screenshot 2026-03-26 at 10 04 07

Summary

  • Fixes unreadable profile info text when a header image is present (reported in Friends Main Feed Not Updating #596)
  • Adds a dark gradient overlay (::before pseudo-element) over profile header images
  • Sets white text color with subtle text shadow on headings, descriptions, chips, and links
  • Applies semi-transparent chip backgrounds for contrast
  • Applied consistently across all three themes: Mastodon, Google Reader, and default (Flavor)

Test plan

  • Visit a friend's page who has a profile header image set
  • Verify text (name, description, chips) is readable over the header image
  • Test in both light and dark mode
  • Check all three themes: Mastodon, Google Reader, Flavor

Test in WordPress Playground

akirk added 5 commits March 26, 2026 08:47
Profile header images had no contrast treatment, making text unreadable
when displayed over colorful backgrounds. Adds a dark gradient overlay,
white text with subtle shadow, and semi-transparent chip backgrounds
across the Mastodon, Google Reader, and default (Flavor) themes.
…themes

Moves the background image from #author-header up to the parent
<header> element so it covers both the author info and the search box.
The search box gets translucent white styling to blend into the image.
Mastodon theme is unaffected as its search is in the sidebar.
@akirk akirk merged commit 3e98b08 into main Mar 26, 2026
25 checks passed
@akirk akirk deleted the fix/mastodon-theme-header-image-readability branch March 26, 2026 09:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant