Make WordPress Core

Opened 20 months ago

Last modified 13 months ago

#52939 new defect (bug)

Frontend toolbar CSS conflict with some themes

Reported by: keraweb's profile keraweb Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Toolbar Keywords: has-patch has-screenshots needs-testing needs-testing-info
Focuses: ui, css Cc:


There are themes available that add some global styling that could interfere with the WP toolbar on the frontend.
This could be fixed by adding some reset/basic CSS for the toolbar.

Example theme: Mesmerize

This theme adds various CSS in the toolbar that might affect some menu items.

For example ::before CSS for all items that sets the display as a table. This could cause some indentation issues when adding elements like form types or icons to menu items.

Same with text color.
A simple color: inherit for the #wpadminbar * {} selector would fix any color overwrites for global elements like label etc.

Attachments (3)

52939.diff (374 bytes) - added by sabernhardt 20 months ago.
inherit text color
vaa-mesmerize-before.png (238.3 KB) - added by sabernhardt 20 months ago.
no default color for toolbar text
vaa-mesmerize-after-inherit-color.png (239.3 KB) - added by sabernhardt 20 months ago.
inheriting text color

Download all attachments as: .zip

Change History (9)

#1 @keraweb
20 months ago

More info:

This bug came up with a bug report on one of my plugins.
First I wanted to fix this in my plugin but as I was debugging the CSS I noticed plugins like Yoast SEO also have the same issue with such theme styles.
That is why I think it's better to create a proper fix in WP core.

20 months ago

inherit text color

20 months ago

no default color for toolbar text

20 months ago

inheriting text color

#2 @sabernhardt
20 months ago

  • Focuses css added
  • Keywords has-patch has-screenshots added
  • Version trunk deleted

@keraweb Thanks for the report!

I think adding a default text color could help with other plugins' toolbar information, too, and inherit seems to work better than setting a specific color. You still would need to adjust your plugin's styles a little (for text on buttons and against white).

However, I would rather avoid adjusting core styles to correct a theme problem. The clearfix hack does not belong on elements without specifying a class, especially div or ul. So a few themes break more than the toolbar with that. The clearfix splits up the Yoast notification bubble and pushes the search input down, and it also means that the alignleft and alignright classes for floating media elements (in the content) are cleared every time.

#3 @keraweb
20 months ago

Hi @sabernhardt

Thanks for your quick actions!

What are your thoughts about adding default form styling for the toolbar?
I understand that WP core itself doesn't have any form elements in the toolbar but various plugins have. This would allow them to use the core UI instead of each plugin having to create their own CSS.
I believe this would benefit the end user in that plugins will more likely choose the same UI.

About the clearfix, totally agree with you, this is bad practice IMO. I will report this to the theme author.

Cheers, Jory

#4 @sabernhardt
17 months ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to 5.9

I'm still unsure about adding form styling in core. I have not determined whether that might help with the search box selectors. However, that goes beyond the original scope of this ticket anyway.

So I set the milestone for the color reset, and if there is interest in adding form element styles, we could open a new ticket for that enhancement.

This ticket was mentioned in Slack in #core-test by mai21. View the logs.

13 months ago

#6 @sabernhardt
13 months ago

  • Keywords needs-testing-info added
  • Milestone changed from 5.9 to Future Release

With Beta 1 on Tuesday, I'm moving this to Future Release.

Note: See TracTickets for help on using tickets.