Saturday, August 14, 2010

Free DNN Skin - Multiflex5 Enhancements - Part - 1: Formating DNN's default module warnings and errors at client side using jQuery

As all of we know that when there is a warning or error in loading a module for admin, while logged in as admin/host we see dnn's warning/error message. While implementing skins, we generally don't care about it as it will be only visible to admins/hosts. Have you wondered if we can fix that somehow? here is a sample screen show while Multiflex Skin is showing a dnn warning message.

dnn warning message
Let's fix it using jQuery:
1. Add jQuery reference and a js file called Home.js
<script src="<%=SKinPath %>Home.js" type="text/javascript"></script>
2. Let's add jQuery to format the message
$(function() {
    if ($('#dnn_ContentPane>table').length > 0) {
        var $table = $('#dnn_ContentPane>table')
        var html = '';
        $('td', $table).each(function() {
            html += $(this).html();
        $('#dnn_ContentPane').prepend('<div id="divMsg"><div class="content-cell-corner-top"></div><div class="content-cell">' + html + '</div><div class="content-cell-corner-bottom"></div>');

And we are done! now let's take a look at how the dnn warning message is looking in Multiflex5 skin?

dnn warning message formatted

So, we can see a little bit of jQuery can format the message at client side. I was thinking how to get it formatted right from the server side and will try to figure this out.

Next fix in multiflex5 is of dnn action menu, Once I will done with that, new version of mutltiflex5 will be released.

Please tell me your thoughts or shared your solutions for the same problem you faced during dnn development to make the Multiflex5 better suited to use in production.

Have fun with the free skin.

No comments:

Post a Comment

Please add your valuable comments about this post if it helped you. Thanks