PHP Magento Tips

Display Fancy Global Messages in Magento

Rate this posting:

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:

Step 1: Create local.xml file inside your theme’s layout folder. Create file in app/design/frontend/rwd/default/layout/local.xml and add below code in it.

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

Step 2: Create file in app/design/frontend/rwd/default/template/core/custom_global_messages.phtml and add below code in it.

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

Step 3: Add below CSS in skin/frontend/rwd/default/css/styles.css

/* ============================================ *
 * Inchoo Global Messages tweak
 * ============================================ */
#custom_global_messages {
 position: relative;
 z-index: 9999;
#custom_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;
Tag : Magento, Messages
0 Comments On "Display Fancy Global Messages in Magento"

Back To Top