Magento Global Messages are sometimes not enough visible to the customers.

Let’s improve their visual impact by putting them on top of the page, and prettify with some nice animations!

Here is demostration video of what we can accomplish in just three simple steps:

1. Create local.xml file inside your theme’s layout folder, or insert our layout update to appropriate place if you already have it (read more about “local.xml method”).

<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.1.0">
    <default>
		<reference name="root">
			<remove name="global_messages" />
		</reference>
		<reference name="after_body_start">
			<block type="core/template" name="inchoo_global_messages" template="core/inchoo_global_messages.phtml" before="-" />
		</reference>
    </default>
</layout>

2. Create inchoo_global_messages.phtml in
app/design/frontend/your_package/your_theme/template/core/

<?php if($this->getMessagesBlock()->getMessageCollection()->count()): ?>
	<div id="inchoo_global_messages" style="display: none">
		<a href="javascript:void(0)" id="inchoo_global_messages_close" style="display: none" title="<?php echo $this->__('Hide messages') ?>">&times;</a>
		<?php echo $this->getMessagesBlock()->getGroupedHtml(); ?>
	</div>
<?php $this->getMessagesBlock()->getMessageCollection()->clear(); ?>
<script type="text/javascript">
//<![CDATA[
	Event.observe('inchoo_global_messages_close', 'click', function() {
		Effect.SlideUp('inchoo_global_messages', { duration: 0.4, delay: 0.3 });
		Effect.Fade('inchoo_global_messages_close', { duration: 0.2 });
	});
	Event.observe(document, 'dom:loaded', function() {
		Effect.SlideDown('inchoo_global_messages', { duration: 0.4, delay: 0.3 });
		Effect.Appear('inchoo_global_messages_close', { duration: 0.2, delay: 1 });
	});
//]]>
</script>
<?php endif; ?>

3. Append styling of #inchoo_global_messages to your CSS file in
skin/frontend/your_ package/your_theme/css/

#inchoo_global_messages {
	position: relative;
	z-index: 9999;
}
#inchoo_global_messages_close {
	position: absolute;
	top: 13px;
	right: 13px;
	z-index: 10000;
	display: block;
	width: 15px;
	height: 15px;
	background: #666;
	text-align: center;
	color: #fff;
	font-size: 15px;
	line-height: 15px;
	text-decoration: none;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}

and tweak message styling according to your design.

In video example, I’ve added those overrides to default Magento css:

.messages li, .messages li li { margin: 0 !important; }
.error-msg, .success-msg, .note-msg, .notice-msg {
	border: none !important;
	font-size: 14px !important;
	background-position: 13px 13px !important;
	padding: 10px 35px !important;
	min-height: 22px !important;
}
.note-msg, .notice-msg { color: #d6b501; }

And that’s it… Reload your cache and notify your customers in a fancy way