WordPress.org

Make WordPress Core

Opened 6 weeks ago

Last modified 5 weeks ago

#52939 new defect (bug)

Frontend toolbar CSS conflict with some themes

Reported by: keraweb Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Toolbar Keywords: has-patch has-screenshots
Focuses: ui, css Cc:

Description

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 https://wordpress.org/themes/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 5 weeks ago.
inherit text color
vaa-mesmerize-before.png (238.3 KB) - added by sabernhardt 5 weeks ago.
no default color for toolbar text
vaa-mesmerize-after-inherit-color.png (239.3 KB) - added by sabernhardt 5 weeks ago.
inheriting text color

Download all attachments as: .zip

Change History (6)

#1 @keraweb
6 weeks 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.

@sabernhardt
5 weeks ago

inherit text color

@sabernhardt
5 weeks ago

no default color for toolbar text

@sabernhardt
5 weeks ago

inheriting text color

#2 @sabernhardt
5 weeks 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.

https://live.staticflickr.com/65535/51017674755_11002a5cf0_n.jpg

#3 @keraweb
5 weeks 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

Note: See TracTickets for help on using tickets.