Using message boxes with the Zen theme

Using Themes
1

I noticed that there was no line spacing before a paragraph or code block when using message boxes (components), which are built in the Zen theme. This change seem to fix the problem for me (although, I don’t know if it’s the best way):

$ diff ../../../../themes/zen/assets/sass/components/messages/_messages.scss .
5a6
>   margin-bottom: 20px;
2

cc: @frjo

3

The “message” class do not have any margins on it. I tend to use it on a p-tag, then it gets whatever margins is set on that.

1 Like
4

Sorry to reopen this; I thought I understood what you meant about p-tags. But I thought about it some more, and I again looked at the Zen theme wrapper documentation. The examples show the content being wrapped in p-tags unless you specify “nomarkdown”. I noticed that my status messages are not being wrapped with the p-tag.

I cloned the Zen demo site and checked the message wrapper examples, and they are also not being wrapped with the p-tag:

<h2 class="mt--xl" id="messages-colour-display">Messages colour display</h2>
<h3 id="status">Status</h3>
<div class="message status">Lorem ipsum dolor sit amet.</div>

<h3 id="warning">Warning</h3>
<div class="message warning">Lorem ipsum dolor sit amet.</div>

<h3 id="error">Error</h3>
<div class="message error">Lorem ipsum dolor sit amet.</div>

Can you please clarify how to use the “message” class with p-tags? Thanks so much.

5

I never envisioned a need for “messages” inside the content. If you need do use the classes on a div, just add any margins you need. You can use the “spacing” component classes, mb--s = margin bottom small etc.

I ever only used it in templates together with some javascript.

<p class="message status">A status message</p>

6

Thanks for the clarification. I was looking for a way to add info or warning messages to a post. Your Zen demo examples are exactly what I was looking for.

Anyway, the point I was trying to make was about the wrapper short code. According to the documentation, it’s suppose to insert the p-tag around the content (unless you add “nomarkdown”). That doesn’t seem to be working.

I can create my own short code.

Thanks again.

7
8

Add “block” as a second argument and it should work.

9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.