Problem/Motivation

See discussion in: #2195695: Admin UIs on the front-end are difficult to theme

The toolbar is an administrative UI component that appears on the frontend of sites. It's important that it is consistent with the Seven style guide and that other admin themes can control the look and feel.

Proposed resolution

Our CSS standards define module CSS as: “the minimal styles needed to get the module's functionality working.”
Theme CSS is defined as: “extra styles to make the module's functionality aesthetically pleasing. ”
Move the theme styling into the Seven theme
Add a library alter hook to load the admin theme CSS. Example: #2341221: Node preview bar has usability issues, is difficult to use on mobile, not usable without Bartik, and does not align with the Seven style guide and current toolbar designs

Remaining tasks

Write the patch.
Test.

User interface changes

None

API changes

None

Data model changes

None

CommentFileSizeAuthor
#11 core-move_toolbar_theme_css-2539992-11.patch31.79 KBbruvers
#8 ScreenShot-no-edit-button.png176.75 KBoheller
#8 ScreenShot-original.png275.44 KBoheller
#6 interdiff-core-move_toolbar_theme_css-2539992-3-6.txt775 bytesrajeevk
#6 core-move_toolbar_theme_css-2539992-6.patch10.85 KBrajeevk
#5 Screenshot 2015-09-11 16.16.18.jpg623.89 KBLewisNyman
#5 Screenshot 2015-09-11 16.16.12.jpg385.22 KBLewisNyman
#5 Screenshot 2015-09-11 16.16.05.jpg411.39 KBLewisNyman
#5 Screenshot 2015-09-11 16.12.14.jpg752.4 KBLewisNyman
#3 core-move_toolbar_theme_css-2539992-3.patch31.75 KBbruvers
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman at Wunder commented
Parent issue: » #2489460: [Meta] Move module.theme.css files to Classy or Seven
bruvers’s picture

bruvers CreditAttribution: bruvers at Wunder commented
Assigned: Unassigned » bruvers

Working on this.

bruvers’s picture

bruvers CreditAttribution: bruvers at Wunder commented
FileSize
core-move_toolbar_theme_css-2539992-3.patch31.75 KB

The patch moves toolbar.theme.css and toolbar.icons.theme.css to the Seven theme. It also adds a hook_library_info_alter() implementation in toolbar.module to include the stylesheets from the new location in Seven's theme folder.

bruvers’s picture

bruvers CreditAttribution: bruvers at Wunder commented
Status: Active » Needs review

Needs review now.

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman at Wunder commented
Assigned: bruvers » Unassigned
Issue summary: View changes
Status: Needs review » Needs work
FileSize
Screenshot 2015-09-11 16.12.14.jpg752.4 KB
Screenshot 2015-09-11 16.16.05.jpg411.39 KB
Screenshot 2015-09-11 16.16.12.jpg385.22 KB
Screenshot 2015-09-11 16.16.18.jpg623.89 KB

Great thanks. I applied the patch and here are some screenshots.

Looking good with Seven as the admin theme:

Stark as the admin theme with Bartik on the frontend:

Same but with the tray collapsed:

Stark toolbar with Stark loaded:

  1. +++ b/core/modules/toolbar/toolbar.module
@@ -349,3 +349,44 @@ function _toolbar_get_subtrees_hash() {
+    $alter_library($libraries['toolbar'], $theme);
+  }
+}
\ No newline at end of file

    We need a blank line at the end 

  2. +++ b/core/themes/seven/css/components/toolbar.css
@@ -0,0 +1,168 @@
+ * @file toolbar.theme.css

    We need to change this as the name as changed. It would be nice if we could put more than the file name, like "Visual styling for the administration toolbar"

rajeevk’s picture

rajeevk
Location London
CreditAttribution: rajeevk at Axelerant commented
FileSize
core-move_toolbar_theme_css-2539992-6.patch10.85 KB
interdiff-core-move_toolbar_theme_css-2539992-3-6.txt775 bytes

Corrected with points raised by @LewisNyman & attaching the patch with interdiff.

rajeevk’s picture

rajeevk
Location London
CreditAttribution: rajeevk at Axelerant commented
Status: Needs work » Needs review
oheller’s picture

oheller CreditAttribution: oheller at Breakthrough Technologies, LLC commented
Status: Needs review » Needs work
FileSize
ScreenShot-original.png275.44 KB
ScreenShot-no-edit-button.png176.75 KB

Looks like the Edit button in the toolbar for turning on and off the contextual links has lost some styling.

oheller’s picture

oheller CreditAttribution: oheller at Breakthrough Technologies, LLC commented
Status: Needs work » Needs review

Nevermind, I just realized that the whole idea is the make the theme handle the edit button too. Because none of the other themes are addressing the toolbar, none of it's styled.

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman at Wunder commented

@oheller Yeah but it should be functional. You should be able to read the text.

bruvers’s picture

bruvers CreditAttribution: bruvers at Wunder commented
FileSize
core-move_toolbar_theme_css-2539992-11.patch31.79 KB

This improved patch just adds the line "Visual styling for the administration toolbar." to toolbar.css. The toolbar edit button text is not visible because of styles in contextual.toolbar.css that hide the button text. To keep this issue small and focused I've created a new issue for the toolbar edit button text #2568743: Administrative toolbar edit button text not visible in Stark.

Sorry, no interdiff because the previous patches did not apply correctly anymore.

irina.rozite’s picture

irina.rozite CreditAttribution: irina.rozite at Wunder commented
Status: Needs review » Reviewed & tested by the community

Latest patch resolves the issue. Theme toolbar CSS is moved to the Seven theme and functionality is not broken for other admin themes. Issue with "Edit" button text visibility is resolved in child issue #2568743

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman at Wunder commented
Status: Reviewed & tested by the community » Postponed

Thanks. Setting this to postponed on #2566775: [Voltron patch] Move all remaining *.admin.theme.css to Seven

Manjit.Singh’s picture

Manjit.Singh
Primary language Hindi
Location Chandigarh
CreditAttribution: Manjit.Singh at Srijan | A Material+ Company commented
Status: Postponed » Needs work

#2566775: [Voltron patch] Move all remaining *.admin.theme.css to Seven is active.

andypost’s picture

andypost
he/him
Primary language Russian
CreditAttribution: andypost as a volunteer and at Skilld commented 
+++ b/core/modules/toolbar/toolbar.module
@@ -349,3 +349,44 @@ function _toolbar_get_subtrees_hash() {
+ * Includes additional stylesheets defined by the admin theme to allow it to
+ * customize the Administration toolbar appearance.
+ *
+ * An admin theme can specify CSS files to make the front-end administration
+ * experience of in-place editing match the administration experience in the
+ * back-end.
...
+function toolbar_library_info_alter(&$libraries, $extension) {
+  if ($extension === 'toolbar' && isset($libraries['toolbar'])) {
+    $theme = Drupal::config('system.theme')->get('admin');
+
+    // First let the base theme modify the library, then the actual theme.
+    $alter_library = function(&$library, $theme) use (&$alter_library) {
+      if (isset($theme) && $theme_path = drupal_get_path('theme', $theme)) {
+        $info = system_get_info('theme', $theme);
+        // Recurse to process base theme(s) first.
+        if (isset($info['base theme'])) {
+          $alter_library($library, $info['base theme']);
+        }
+        if (isset($info['toolbar_stylesheets'])) {
+          foreach ($info['toolbar_stylesheets'] as $path) {
+            $library['css']['theme']['/' . $theme_path . '/' . $path] = [];
+          }
+        }
+      }
+    };
+
+    $alter_library($libraries['toolbar'], $theme);

why admin theme library injected into main theme?

toolbar should get overrides for its libraries from themes

star-szr’s picture

star-szr
he/him
Primary language English
CreditAttribution: star-szr as a volunteer commented

Hmm yeah at this point we could just use libraries-extend rather than add another magic key to info files. What do other think?

andypost’s picture

andypost
he/him
Primary language Russian
CreditAttribution: andypost as a volunteer and at Skilld commented

otoh moving all theming to seven will break toolbar for bartik so...
only minimal split needed or maybe just a clean-up or wont fix?

other themes could override toolbar.theme part of library already

star-szr’s picture

star-szr
he/him
Primary language English
CreditAttribution: star-szr as a volunteer commented

We won't break Bartik because we have Stable in place :) so we are free to make sensible decisions as to what makes sense to keep in core or where things should live in our @internal themes, Bartik and Seven.

drintios’s picture

drintios CreditAttribution: drintios at Skilld commented

We can use libraries-extend but, we also need to check issues with icons cause toolbar can get broken.

Which icons are we using ?
We will have custom ones ?
Different ones for seven ?

star-szr’s picture

star-szr
he/him
Primary language English
CreditAttribution: star-szr as a volunteer and at Northern Commerce commented

I don't think this issue is about changing the visual appearance of Seven or Seven's toolbar per se - if that were to happen it should be in a separate issue.

I think we may even want to use a libraries-override in Seven to remove the Stable toolbar CSS, or for that matter just use override instead of libraries-extend :)

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Acquia commented
Issue tags: +Javascript Modernization Initiative
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Acquia commented
Issue tags: -Javascript Modernization Initiative +Admin UI Modernisation initiative

Version: 8.6.x-dev » 8.8.x-dev

Drupal 8.6.x will not receive any further development aside from security fixes. Bug reports should be targeted against the 8.8.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.9.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.2.x-dev

Drupal 8 is end-of-life as of November 17, 2021. There will not be further changes made to Drupal 8. Bugfixes are now made to the 9.3.x and higher branches only. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.15 was released on June 1st, 2022 and is the final full bugfix release for the Drupal 9.3.x series. Drupal 9.3.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.4.x-dev branch from now on, and new development or disruptive changes should be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.9 was released on December 7, 2022 and is the final full bugfix release for the Drupal 9.4.x series. Drupal 9.4.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.5.x-dev branch from now on, and new development or disruptive changes should be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
CreditAttribution: bnjmnm at Acquia commented
Status: Needs work » Postponed (maintainer needs more info)
Issue tags: +Needs issue summary update

Neds issue summary as

  • This one refers to Seven, a now-removed theme
  • There's mention of "Add a library alter hook to load the admin theme CSS". The claro theme now styles the toolbar on the admin & default themes. We should check if that change meets that specific need #3070493: Introduce a mechanism to provide an alternate Claro design for the toolbar in the future
  • Part of the justification to doing this is adhering to as-documented CSS standards Our CSS standards define module CSS as: “the minimal styles needed to get the module's functionality working.”
    Theme CSS is defined as: “extra styles to make the module's functionality aesthetically pleasing. ”. Given this issue is 8+ years old, we should establish that this is still worth pursuing even if it might disrupt the way many sites are accustomed to.

Version: 9.5.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.