Custom output for session:messages? - pyrocms

Question

In PyroCMS, I'm using the session:messages tag to display messages to the user. This is working well, but I'd like to add a close button to each message which requires placing a span within each message. For example:
<div class="alert success">
You have logged in successfully. <span class="close">X</span>
</div>
Each message is wrapped in a div, which is given a class by setting an attribute of the session:messages tag. There is no built-in way to specify the output. How can I override the messages() function in session.php, adding a new attribute to append this close button?
So far I have tried:
Copying system/cms/plugins/session.php to *addons/shared_addons/plugins/session.php* and modifying the messages() function. The core function is used, rather than the new plugin as I had hoped.
Copying the plugin as described above, and then changing it's class to My_Plugin_Session extends Plugin_Session in hopes that its functions would then override the core Plugin_Session class. No luck.

Answer 1

It's not possible to extend certain things that are in the core (e.g. libraries and helpers) - I think this applies to plugins too.
In this case, if I was you (and I may well have to do this for my next project as these closable alerts are typically in Twitter Bootstrap etc.) I'd just edit /system/cms/plugins/session.php directly and add the extra <span> for the close button to the success, notice and error conditionals ('if' statements).
On a typical site I can't think of a situation where you'd ever need some alerts displayed differently to others (other than different colours depending on the outcome of course, which you can do in the CSS using the class name).
Providing you're using Git (you've cloned or forked the official PyroCMS repository and made your own branch) you'll be absolutely fine with future updates - if in a future version the session plugin changes, any changes will just be merged into your code automatically, or if Git can't figure it out, it'll show you the differences and prompt you to fix it by hand.
Note - there are a couple of other solutions for this specific problem based on the admin interface (you may have noticed the flash messages there are closable).
You could create a partial - which can contain PHP, not just Lex tags - e.g. see /system/cms/themes/pyrocms/views/admin/partials/notices.php with something like this (edit as needed and duplicate for notice and error):
<?php if ($this->session->flashdata('success')): ?>
<div class="alert success">
<?php echo $this->session->flashdata('success'); ?>
</div>
<?php endif; ?>
PyroCMS admin actually uses liveQuery to append the close button <span> in the browser
Source: /system/cms/modules/wysiwyg/js/wysiwyg.js:
// Add the close link to all alert boxes
$('.alert').livequery(function(){
$(this).prepend('x');
});

Answer 2

I did this and it is working perfect no need other plugin than jQuery.
in the template layout add this:
{{ session:messages success="message success" notice="message info" error="message error" }}
JavaScript:
$(function() {
$('.message').prepend('<a class="baxclose" id="baxclose"></a>');
$('#baxclose').click(function(){
$('.message').fadeOut('slow');
});
});
and the CSS:
a.baxclose{
float:left;
width:30px;
height:30px;
background:transparent url(../img/close-icon.png);
margin-top: -30px;
margin-left: -30px;
cursor:pointer;
}
.message {
padding: 20px 20px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin-bottom: 10px;
-moz-box-shadow:inset 0 2px 3px rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 0 2px 3px rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.1);
box-shadow:inset 0 2px 3px rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.1);
zoom: 1;
margin-bottom: 20px;
}
.message h3 {
margin-top: 0;
font-size: 12px;
font-weight: bold;
}
.message p {
margin-bottom: 0;
}
.message.info {
border: 1px solid #cadcea;
background-color: #cdf;
background-image: -o-linear-gradient(top, #eef, #cdf);
background-image: -ms-linear-gradient(top, #eef, #cdf);
background-image: -moz-linear-gradient(top, #eef, #cdf);
background-image: -webkit-gradient(linear, left top, left bottom, from(#eef), to(#cdf));
background-image: -webkit-linear-gradient(top, #eef, #cdf);
background-image: linear-gradient(top, #eef, #cdf);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEFF', endColorstr='#CCDDFF');
color: #225b86;
text-shadow: 0 1px 1px #fff;
}
.message.error {
border: 1px solid #eeb7ba;
background-color: #fae2e2;
background-image: -o-linear-gradient(top, #fae2e2, #f2cacb);
background-image: -ms-linear-gradient(top, #fae2e2, #f2cacb);
background-image: -moz-linear-gradient(top, #fae2e2, #f2cacb);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fae2e2), to(#f2cacb));
background-image: -webkit-linear-gradient(top, #fae2e2, #f2cacb);
background-image: linear-gradient(top, #fae2e2, #f2cacb);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fae2e2', endColorstr='#f2cacb');
color: #be4741;
text-shadow: 0 1px 1px #fff;
}
.message.success {
border: 1px solid #b8c97b;
background-color: #e5edc4;
background-image: -o-linear-gradient(top, #e5edc4, #d9e4ac);
background-image: -ms-linear-gradient(top, #e5edc4, #d9e4ac);
background-image: -moz-linear-gradient(top, #e5edc4, #d9e4ac);
background-image: -webkit-gradient(linear, left top, left bottom, from(#e5edc4), to(#d9e4ac));
background-image: -webkit-linear-gradient(top, #e5edc4, #d9e4ac);
background-image: linear-gradient(top, #e5edc4, #d9e4ac);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5edc4', endColorstr='#d9e4ac');
color: #3f7227;
text-shadow: 0 1px 1px #fff;
}

Answer 3

Instead of the button you use to remove, another option would be to create a fadeOut message on click event.
HTML:
<div id="msgAlert"> …session:messages goes here...</div>
JS:
<script type="text/javascript">
$('html').click(function() { $('#msgAlert').delay(5000).fadeOut('slow'); });
Having a click will fadeOut the session message after 5sec.