If there is more than one message, theme_status_message() returns the message items as an unordered list. However, with single messages, it returns the message naked without any container what so ever.

This creates problems for anyone who is attempting to style more elegant status messages. If you decide to use background images as icons for the messages (like an Alert box in MacOS ), you'd want to use padding to position the icon. Using CSS, this is very easy to do for the messages that are returned within a UL(because you can select the UL to position the text, and style it as needed), but it becomes troublesome for the containerless single message.

Though, I've been able to work around this by changing text-alignments for UL's vs the DIV, and zeroing out the list's margins -- it just seems silly.

All styling difficulties can be avoided entirely by surrounding single messages in paragraph tags. The paragraph tags also make the markup semantically correct (IMHO). Here's a tested one line patch that resolves the issue.

CommentFileSizeAuthor
theme_status.patch356 bytesNick Lewis

Comments

dries’s picture

dries commented
Status: Reviewed & tested by the community » Needs review
drumm’s picture

drumm
he/him
Location NY, US
commented
Category: bug » task

Why not make it consistent and always use a list?

dries’s picture

dries commented

We probably want to make it always return a list, as hinted by Drumm. Would that work?

Steven’s picture

Steven commented

But then we should set a class on the UL and add a default style to drupal.css which hides the useless lone bullet (list-item-style: none).

Stefan Nagtegaal’s picture

Stefan Nagtegaal commented

@Steven: why?

Nick Lewis’s picture

Nick Lewis commented

Well, I suppose it could go either way. Its just seems weird to output "Your blog entry was created." as a list item, as opposed to a paragraph -- given that there are no other items in that list. That said, I suppose making it consistant would remove 2 lines of code (never a bad thing.) Personally, I'd like the freedom to style single messages and multiple messages differently (but that's just me.) I'd be happy to reroll the patch to return it as a single list item if that's the bidding of the group, however.

dries’s picture

dries commented

Having to add a CSS class to hide a bullet seems overkill. Either we're ok with the bullet, or we go with the current patch?

Nick Lewis’s picture

Nick Lewis commented

Well, I vote for paragraphs:
1. Its more flexible from a CSS perspective. Having a P and UL requires less code to achieve a decent style; it removes the need to override a theme function if you want to emulate desktop OS's interface. The single list item, on the otherhand, would create a need.
2. A single message is not part of a series. Therefore it shouldn't be in a list.
3. the bullet will cause the messages to look worse than they do now. The paragraph merely corrects the issue, and adds the p margins. This will cause the message to look consistant with the rest of the site's typography.

I rest my case.

drumm’s picture

drumm
he/him
Location NY, US
commented
Version: x.y.z » 6.x-dev

Don't think we want to do markup changes like this for Drupal 5.

bdragon’s picture

bdragon commented
Status: Needs review » Needs work

Patch no longer applies.

jody lynn’s picture

jody lynn
she/her
Primary language English
commented
Version: 6.x-dev » 7.x-dev
jacine’s picture

jacine
she/her
Location New York
commented

Nice patch! I agree with #8.

marcingy’s picture

marcingy commented
Version: 7.x-dev » 8.x-dev

This is still an issue in d8.

Nick Lewis’s picture

Nick Lewis commented
Assigned: Nick Lewis » Unassigned
pasqualle’s picture

pasqualle
Location 🇭🇺 Budapest
commented
Issue summary: View changes
Status: Needs work » Closed (fixed)

with single messages, it returns the message naked without any container what so ever.

In D7 add the container to the page.tpl.php
for example /themes/bartik/templates/page.tpl.php

  <?php if ($messages): ?>
    <div id="messages"><div class="section clearfix">
      <?php print $messages; ?>
    </div></div> <!-- /.section, /#messages -->
  <?php endif; ?>

In D8 /core/modules/system/templates/status-messages.html.twig already has the container

<div class="messages messages--{{ type }}" role="contentinfo" aria-label="{{ status_headings[type] }}">