Creative Blog
The Joomla front-end editor by default provides a simple ‘system message’ to confirm successful edits and saved articles. From a UI perspective this notice can be overlooked, especially if the message is below the content. I recently decided to implement a better way of notifying an editor of successful changes.
Using jGrowl to provide the notifications
As I often use jQuery when building websites, I choose to use jGrowl for the notifications. jGrowl mimics Growl which is a useful Mac OSX application which ‘unintrusively tells you when things happen’.
What this technique will achieve is a nice overlaid graphic which notifies the user an article has been successfully saved. It’s a subtle UI tweek, but details like this can make for a much better user experience, and everyone wants a better user experience, right?!
You must have the following include, for the system message component, coded into your template file:
<jdoc:include type="message" />
I usually place this code directly under the main component include, like this:
<jdoc:include type="component" /> <jdoc:include type="message" />
Note! I wouldn’t usually recommend doing core file hacks, but this is just one small line of code. If you decide to implement this technique, please remember to make a note of the modified file, along with the new line of code as you may have to make the change again if the specified file is modified after a Joomla security update. I usually create a simple text file detailing any core file hacks I have made, so I can be sure to change the files if the event of an update overwriting any modified code.
Step 1
• Download the latest version of jQuery: http://jquery.com
• Download jGrowl: http://stanlemon.net/projects/jgrowl.html
Include the following files jquery-1.3.2.js, jquery.jgrowl.js, and jquery.jgrowl.css within the <head> section of your template’s index.php file:
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/YOURTEMPLATE/css/jquery.jgrowl.css" type="text/css" /> <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/YOURTEMPLATE/js/jquery.js"></script> <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/YOURTEMPLATE/js/jquery.jgrowl.js"></script>
Note! When using jQuery with Joomla you should also add the following tag to your <head> section to prevent any conflicts with the built-in MooTools framework:
<script type='text/javascript'>jQuery.noConflict();</script>
Step 2
Have a play with the sample files that come with jGrowl and choose some CSS included in the jgrowl.html file. To keep things simple, I started with the ‘manilla’ code. Initially, I copied out this CSS and added it to the jquery.jgrowl.css file. If you want you can simply add the code to your default stylesheet.
div.jGrowl div.manilla {
background-color: #FFF1C2;
color: navy;
}
Step 3
We now need to modify message.php which is a core Joomla file located in the main root of your install here: libraries > joomla > document > html > renderer > message.php
Go to around line 74 and add the following code directly under $contents .= “\n</dl>”;
$contents .= "\n<script type=\"text/javascript\">jQuery(document).ready(function($){ $.jGrowl(\"".$msg."\", {theme:\"manilla\"});});</script>";
That’s about all there is to it! Login to your Joomla front-end admin, edit then save an article. If all has gone well, a notification should appear after the page redirects… nice :)
Further Steps
• You can disable the core Joomla system message DL by adding the following CSS to your stylesheet:
dl#system-message {display: none;}
Note! don’t be tempted to remove the whole DL block in message.php as this will effect the back-end administrator notifications.
• You can style the notification however you like by modifying the CSS!
• The default notification is positioned ‘top right’. You can easily change this to a nicer centered position – go to line 25 of the jquery.jgrowl.js file and change the ‘position’ to:
position:"center"
See http://stanlemon.net/projects/jgrowl.html for more details on the available options.
Fix redirect for saving a ‘New Article’
I just wanted to quickly detail a fix for a minor problem with the way Joomla handles adding a new article in the front-end editor. Currently (version 1.5.14 and previous) Joomla will redirect a user to the frontpage after adding a new article in the front-end editor. This is a bit annoying and may confuse a user as to whether the system has even saved the article. I found a patch which fixes this.*
Once again, this is a core file modification so be sure to note it for future reference.
Find the following file located in the main root of your install here: components > com_content > controller.php
Go to around line 244 and replace:
$this->setRedirect($referer, $msg); }
with:
if (!JRequest::getString('ret')) {
$referer = JRoute::_(ContentHelperRoute::getArticleRoute($model->get('id'),$model->get('catid'),$model->get('sectionid')));
}
$this->setRedirect($referer, $msg);
}
Now when an new article is saved, the page redirects to the article itself and the above jGrowl implementation will also notify the user the save was successful!
The patch was found here: http://forge.joomla.org/gf/project/joomla/tracker/?action=TrackerItemEdit&tracker_item_id=16305
*I have been playing with the alpha build of Joomla 1.6 and it looks as if this behavior is fixed which is good news :)
So that’s it for this tutorial on how to make the Joomla front-end editor a little bit more user friendly. I hope you found it useful, please feel free to leave a comment below and also share the article.
Thank you! It’s very useful article.