Problem/Motivation

Toolbar breaks way too easy by allowing theme CSS to cascade. For example applying hover/focus style to a {} will break the toolbars style.

Proposed resolution

Make it unbreakable, set styles for everything and make theem strong.

Remaining tasks

Write a patch.

User interface changes

None, but prevent breakages and themer wtf's.

API changes

None.

Comments

jessebeach’s picture

jessebeach commented

I suggest testing against Bootstrap. It has the very broad and presumptive CSS resets.

https://drupal.org/project/bootstrap

It's perfect for this kind of iron-bounding work.

sun’s picture

sun
Primary language German
Location Karlsruhe
commented
Title: Isolate toolbars CSS » Toolbar CSS styles are too weak; common theme styles unintentionally distort it
Category: Task » Bug report
Priority: Normal » Major

I think this is a major bug and TX WTF.

I have a lot of experience on this topic; it took me some good amount of time to make the CSS of admin_menu (1) strong enough to avoid the problem in all themes, but yet (2) weak enough to still allow themes to override the styling without too much PITA selectors, and of course, (3) avoiding !important where possible.

In fact, to properly sort this out and fix it, I added ~100 contributed themes to the Administration menu demo site, whereas the menu appears as expected in all themes (you easily can switch between them).

It's all very dated, but in case it helps here: admin_menu.css

jessebeach’s picture

jessebeach commented

Awesome, thanks sun!

hass’s picture

hass commented
Status: Active » Closed (duplicate)
Parent issue: » #1944572: Remove "ul.menu" dependency to prevent theme clashes