Formatting Text Like Drupal Status Messages in Content

Drupal comes with some built in classes for status messages. Their exact look varies from theme to theme.

They are quite useful at drawing attention to certain messages and content on the page.

We decided to expand upon the basic Drupal status messages, and start using them to enhance content. They work similar to blockquotes, except prettier.

The ones that come with Drupal can be referenced simply by including certain HTML in your content. The new ones we created would require that you add some custom CSS and upload some images for the icons.

Status Message Formats the Come with Drupal

Note: The Drupal theme you use determines the exact look and feel of the status messages.

We use this for something that is okay to do or something positive we want to draw attention to.
<div class="messages status">
content
</div>
We use this for something that we want to discourage people from doing or for issuing a warning.
<div class="messages warning">
content
</div>
We use this for something that should not be done or for issuing a critical warning.
<div class="messages error">
content
</div>
This is the default message container before it is formatted with additional CSS. We will use this as the base for all of the new ones we create.
<div class="messages">
content
</div>

Creating More Styles

Download Message

We use this when we want to draw attention to downloads.

The custom CSS that you need to add.

div.download {
    color: #000;
    background-image: url("/image/disk-black.png");
    border-color: #1D2EED;
    background-color: #F1F3FE;
}

The HTML referencing the CSS.

<div class="messages download">
content
</div>

Here are some other variations we made.

script
balloon
information
light-bulb
flag
wand
asterisk

Mimicking the Browser's Address Bar

To spice up the pages a bit more, we decided to highlight example links in a manner that makes it more obvious that it is something that is entered directly into the browser's search bar.

http://www.example.com

We had to modify the above code a bit to make this work, since we wanted to center it on the page and not take 100% of the page.

Here is the CSS code we used:

div.address-bar {
    color: #000;
    background-image: url("/sites/default/files/urlbar.png");
    border-color: #CCCCCC;
    background-color: #FFFFFF;
    width: 80%;
    margin-left: auto ;
    margin-right: auto ;
    font-family: Consolas,"Lucida Console",Menlo,Monaco,"DejaVu Sans Mono",monospace,sans-serif;
}

You have to include the margin-left: auto; and margin-right: auto;, otherwise it won't be centered.

The font family is optional, but we decided to use a console font, so there would be no confusion over 1's and l's and 0's and O's.

And we used this HTML markup on the pages:

<div class="messages address-bar">
content
</div>

By the way, you can totally steal the icon we used (). It's just a screenshot of the Firefox address bar.

Some of the places we used this markup include:

Icon Set

You will need some icons to create the new status messages.

We are using many of the 24 pixel icons from the Fugue Icons set, as well as 24 pixel versions of Farm Fresh Icons by Fatcow Web Hosting, but you can use any icon set that you like.

We used Icon Archive to find some great icons. It also includes sizes that are not in the original download packs provided by the creator. For example, you can get 24 pixel sizes of Farm Fresh Icons there, even though Fatcow's pack only includes 32 pixel and 16 pixel versions.

Keep in mind that most free icon sets require that you link back to them. So be sure to give credit where credit is due.

About the Author

WisTex's picture
Scott M. Stolz

Recommended Content