WordPress.org

Make WordPress Core

Opened 4 months ago

Last modified 3 weeks ago

#52939 new defect (bug)

Frontend toolbar CSS conflict with some themes

Reported by: keraweb Owned by:
Milestone: 5.9 Priority: normal
Severity: normal Version:
Component: Toolbar Keywords: has-patch has-screenshots needs-testing
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 4 months ago.
inherit text color
vaa-mesmerize-before.png (238.3 KB) - added by sabernhardt 4 months ago.
no default color for toolbar text
vaa-mesmerize-after-inherit-color.png (239.3 KB) - added by sabernhardt 4 months ago.
inheriting text color

Download all attachments as: .zip

Change History (7)

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

@sabernhardt
4 months ago

inherit text color

@sabernhardt
4 months ago

no default color for toolbar text

@sabernhardt
4 months ago

inheriting text color

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

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

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

Note: See TracTickets for help on using tickets.