A new look for system messages was proposed in https://groups.drupal.org/node/283223#Messages and was introduced in https://drupal.org/node/1986408.

However the current implementation does not match the original design and comes with a border join which is simple ugly.


While we should have a thicker block (border) on the left currently we have a ragged line instead becouse of the different border colors and the the way browsers render the joins of borders.

We could get a nice / clean look in two ways:

  1. Change our mind on the expected look of messages and use the same color for all four sides of the border.
  2. Adding some extra css markup to have what was originally designed.

Personally I vote to the second solution and do it if there is not something (important) against it.

#4 2095929-system-messages-border-4.patch2.48 KBlongwave
PASSED: [[SimpleTest]]: [MySQL] 58,748 pass(es). View
#1 d8-messages--error-reworked.png41.14 KBthamas
#1 drupal-system-messages-border-fix-2095929-1.patch2.48 KBthamas
PASSED: [[SimpleTest]]: [MySQL] 58,946 pass(es). View
d8-messages--error.png42.91 KBthamas
Members fund testing for the Drupal project. Drupal Association Learn more


thamas’s picture

Issue tags: +frontend
2.48 KB
PASSED: [[SimpleTest]]: [MySQL] 58,946 pass(es). View
41.14 KB

Here is a patch with a simple box-shadow trick. It is not perfect 'cause the border radius is applied to both sides of the shadow. But it is not so noticeable like the current implementation and needed just some additional lines of code. I feel I could live with it. ;)


If we want a "pixel-perfect" solution :) (without plus rounds) we have to use a :before pseudo-element with a bit more lines of css code.

LewisNyman’s picture

Issue tags: +styleguide
LewisNyman’s picture

This looks a lot better. Nice catch.

+++ b/core/modules/system/css/system.theme.css
@@ -514,14 +514,14 @@ ul.tabs {
+  border-width: 1px 1px 1px 0px;  /* LTR */
+  border-width: 1px 0px 1px 1px;

We don't need to have 'px' units after 0. That's all I could find.

longwave’s picture

Status: Active » Needs review
2.48 KB
PASSED: [[SimpleTest]]: [MySQL] 58,748 pass(es). View

Looks better to me too. Attached patch changes 0px to 0 as suggested.

LewisNyman’s picture

Status: Needs review » Reviewed & tested by the community


thamas’s picture

Thanks for the review and the correction! I should pay attention to what I do… :)

webchick’s picture

Status: Reviewed & tested by the community » Fixed

Committed and pushed to 8.x. Thanks!

Automatically closed -- issue fixed for 2 weeks with no activity.