'Upgrade' your Moodle 1.9 standard icons to Moodle 2.4 without really trying

Here's a cheeky little post.

Tired of how dated your Moodle 1.9 resource and activity icons look? Aren't those icons so 2004? Hold on a second. What year are we in? 2012! Tired of getting information overload everytime you hit that "Turn Editing On" button? Despair no more. Now you can give your Moodle 1.9's site a new 'makeover' without converting the entire site to Moodle 2.4!

In case you didn't know, Moodle 2.4 comes with a new icon set, professionally designed by Barbara Ramiro, a talented and prolific Graphic Designer. Thanks Barbara! The new look is fresher and more modern. Check out the new set in this PDF file on moodle.org: http://docs.moodle.org/dev/images_dev/e/e8/Moodle_icons_24.pdf
Isn't that simply mouth-watering?

And then there's this site that juxtopositions Moodle 2.3 and Moodle 2.4 icons so that you can compare the old and the new: http://docs.moodle.org/dev/2.3_icons_versus_2.4

Well, the other I was admiring the new icon set when it hit me that I could 'upgrade' my Moodle 1.9 standard icons for some of the new Moodle 2.4 offerings, all without too much effort. Here's the result.

The new editing icons are now less distracting. The new icons are fresher and have replaced the original dated icons. The result? Enhanced usability, in my humble opinion.

How did I do it? It's simple. Just go to the demo Moodle 2.4 site at http://qa.moodle.net/ and then right-click on any icon and save it to your harddrive. It'll be a svg format. Use any image editor and convert the icon into gif format. Then replace your Moodle 1.9 icon by ftp'ing the new gif file into the appropriate folder of your Moodle 1.9 activity or resource. For example, the icon for the standard forum in Moodle 1.9 is /mod/forum/icon.gif. So just drop the new icon.gif file into that directory and your site is good to go!

Here's what my Moodle coursepage looks like with Settings set to off.

So what do you think of my Moodle 1.9's user interface icons makeover? Does it improve the usability of the site? Does it enhance the user interface? If you want a copy of my gif'fed icons, just send me an E-mail request. No charge.

Until the next time amigos and senoritas. keep Moodlin'
Frankie Kam

The WonderWall for Moodle evolves with Like and Dislike buttons.

No, I'm not talking about the FB Like icon. In this post, I'm announcing that I have added Like and Dislike buttons to the Wonderwall.

Live site:
http://www.moodurian.com/mod/resource/view.php?id=4278
Username:  studentscm
Password: studentscm

Now that each post comes with user interactivity, this raises the usefulness of the Wall to a whole new level. That of community interaction. Many thanks to the brilliant William Thomas of Wctdesigns for his post that saved me much time and effort. Thanks mate!

Give it a try. Available for now only for Moodle 1.9.
Frankie Kam

WunderbarWall For Your Moodle 1.9 Site - First Look

Hi All

Here's my latest work on the WunderbarWall, erm, I mean, WonderWall for Moodle 1.9. Moodle 2.x users, please be patient. I haven't yet ported over the code. Latest version of the Wall is as shown below in these three images. Now with the Nicedit integration into the WonderWall, you can do straight copy and paste from websites and the multmedia updates can be posted directly onto the Wall.


Everyday, I'm shufflin' toggling!

I figured out to integrate Nicedit with Moodle and to toggle between Nicedit's rich editor and HTML's humble and under-rated Textarea.

Figure 1. Nicedit Rich Text editor integration.

Figure 1. Toggling  between the Nicedit Rich Text editor
and the normal standard HTML Textarea.

Figure 3. The Wall allows you to copy-and-paste media rich content from
other websites. Again, this is possible thanks to Nicedit. Not bad for
a rich text editor (2009) that is no longer in development!

So what are you waiting for? Head over to my Moodle production site for a live demo:
http://www.moodurian.com/mod/resource/view.php?id=4267
Username: studentscm
Password: studentscm


Grafitti Wall

Finally for today, I created a Grafitti Wall on my Moodle site. You can use the Nicedit editor to post creative updates to my Grafitti Wall. Please be gentle and be mindful to post only polite messages!

http://www.moodurian.com/mod/resource/view.php?id=4268

Username: studentscm
Password: studentscm

Figure 4. Check out the Grafitti Wall. 

Now that's what I call art!

Figure 5. The Rich Editor allows you to post colorful
messages onto the Wall. Go ahead, try your hand
at creative sentences and words.

Figure 6. The Wall also features special Gafitti Fonts
that you can use to spice up the Wall!

If you are interested to have a Wonder/WunderbarWall installed on your Moodle 1.9 / 2.x production site, just send me an E-mail. Code and installation charges apply.

Frankie Kam

Nicedit your Moodle 1.9/2.x Wall for a truly WonderWall!

Hi Ya'll

I couldn't resist sharing this. I have managed to integrate the Nicedit rich text editor with the Wonderwall for Moodle 1.9 and Moodle 2.2.

What this means is, now, I can post RICH TEXT updates onto the wall. What's rich text? Imagine multi-coloured, multi-sized and multi-font updates on the wall. How does this sound to you?


I. Nicedit Wonderwall Integration - Moodle 1.9.x

I've managed to integrated a rich-text editor, NicEdit, with the WonderWall.
http://www.moodurian.com/mod/resource/view.php?id=4264
Username: studentscm
Password: studentscm

Messages now allow for, amongst other things,
1. Multicoloured (for creative messages)
2. Multiformatted
3. full embed code of
     a. Youtube
     b. Vimeo
     c. Google Maps
     d. Scribd
     e. Slideshare
4. Embedding of image URLs




II. Nicedit Wonderwall Integration - Moodle 2.x

Users of Moodle 2.x can also benefit from the wall as a cool, creative and innovative pedagogical tool for online classes or E-Learning. I've ported the code over to my Moodle 2.2 production site. It should also work on Moodle 2.3.

III. Icons on the Nicedit panel

I managed to also reduce the distraction of the icons on the Nicedit panel. I did this in several ways.
(1) Reduce the colour contrast of the icons - they now look more cloudy with a grayish hue.
(2) Reduced the number of icons displayed (I had to edit the nicEdit.js file to do this)
(3) Reduced the font colour of the display text of the Font Size, Family and Style drop-down selection boxes

The result is a customised Nicedit panel, that looks like the image above. I changed the textarea colour to yellow so that it would match the on-focus dark yellow border. I also wanted to focus the user on the edit box, not on the icons. The icons have been intentionally dimmed to achieve a minimalistic, low-profile and less conspicuous look. Al this whilst maintaining an almost full edit functionality.

Interested in setting up your own Wonderwall? I'm selling the copies of the Wall code, if you are interested.
Well, that's all for now. Until we meet again, have fun exploring the new textarea edit box with the NicEdit
icons.

regards
Frankie Kam