Make WordPress Core

Opened 3 years ago

Last modified 3 years 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 3 years ago.
inherit text color
vaa-mesmerize-before.png (238.3 KB) - added by sabernhardt 3 years ago.
no default color for toolbar text
vaa-mesmerize-after-inherit-color.png (239.3 KB) - added by sabernhardt 3 years ago.
inheriting text color

Download all attachments as: .zip

Change History (9)

#1 @keraweb
3 years 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.

3 years ago

inherit text color

3 years ago

no default color for toolbar text

3 years ago

inheriting text color

#2 @sabernhardt
3 years 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
3 years 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
3 years 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.

3 years ago

#6 @sabernhardt
3 years 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.