Pages

Showing posts with label autohide. Show all posts
Showing posts with label autohide. Show all posts

Thursday, June 27, 2013

Mark Ward's elegant Straw Poll block for Moodle 2.x

Figure 1. Before clicking a choice.

I stumbled upon Mark Ward's blog, Moodle Mark. "Working on ingenious plugins, themes and customisations for Moodle 2". How true. Mark is the creator of the Autohide code and concept. Thanks to Mark's ingenuity, Moodle adminstrators and teachers have an easier time editing their Moodle coursepages.
Among the many inventions of Mark, what intrigued me was the very nice looking and elegant, Straw Poll block for Moodle 2.x.

Monday, June 3, 2013

Tweak for Danny Wahl's Autohide for Moodle 2.x when using the Topics Format

If you're using Danny Wahl's Autohide creation with the Topics Format course format in Moodle 2.x, here's a tweak for the autohide.css file that allows the Settings icon to appear on mouse hover. Before this, I was using the Weekly Format and all was fine. Then I switched over to the Topics Format and suddenly I realised that there was no way to change a topic's description as the Settings icon refused to appear on mouseover!


What a strange phenomena. Upon further investigation, thanks to Sakshi Goel and Mary Cooch in this forum, I was finally able to solve this puzzle by changing this section of the code:

.section_add_menus, /* Add Resource/Activity dropdowns (2.2) */
.addresourcemodchooser, /* Add Resource/Activity Link (2.3) */
.editing .block .title .commands .icon, /* Block Title Controls */
.editing .block .content li .commands a, /* Command in block content (add resources/activities in Main menu) */
.editing .block .editbutton a, /* Edit button in custom HTML blocks */
.editing .section .side > *:not(br), /* Section controls (can't use 'a' b/c ajax uses 'span') */
.topics .section .content .summary ,
.editing .section .summary a:first-child, 
.editing .section .activity .commands > *, /* Individual activity and resource controls (can't use 'a' b/c ajax uses 'span') */
.editing .sitetopic > a {
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: opacity 0.5s linear 0s;
    -moz-transition: opacity 0.5s linear 0s;
    -ms-transition: opacity 0.5s linear 0s;
    -o-transition: opacity 0.5s linear 0s;
    transition: opacity 0.5s linear 0s; /* half-second fade in */
}

to

.section_add_menus, /* Add Resource/Activity dropdowns (2.2) */
.addresourcemodchooser, /* Add Resource/Activity Link (2.3) */
.editing .block .title .commands .icon, /* Block Title Controls */
.editing .block .content li .commands a, /* Command in block content (add resources/activities in Main menu) */
.editing .block .editbutton a, /* Edit button in custom HTML blocks */
.editing .section .side > *:not(br), /* Section controls (can't use 'a' b/c ajax uses 'span') */
.editing .section .activity .commands > *, /* Individual activity and resource controls (can't use 'a' b/c ajax uses 'span') */
.editing .section .summary a:first-child, 
.editing .sitetopic > a {
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: opacity 0.5s linear 0s;
    -moz-transition: opacity 0.5s linear 0s;
    -ms-transition: opacity 0.5s linear 0s;
    -o-transition: opacity 0.5s linear 0s;
    transition: opacity 0.5s linear 0s; /* half-second fade in */
}

.topics .section .content .summary {
   filter: alpha(opacity=0.5);
    opacity: 0.8;
    -webkit-transition: opacity 0.5s linear 0s;
    -moz-transition: opacity 0.5s linear 0s;
    -ms-transition: opacity 0.5s linear 0s;
    -o-transition: opacity 0.5s linear 0s;
    transition: opacity 0.5s linear 0s; /* half-second fade in */
}

Now the Settings (gear icon) symbol appears on mouseover as it should.


Yippee!!
You can download the tweaked autohide.css file from here.

Regards
Frankie Kam



Friday, February 8, 2013

Making Moodle more SOCIAL and FUN.

Making Moodle More Social and Fun

I presented this at University Malaya on Thursday 7th February 2012. Hope you enjoy the tips.



Thanks for viewing. Any comments?

Frankie Kam

Wednesday, January 23, 2013

Autohide Revisited - Reducing the clutter of "Turn Editing On"

As a Moodle administrator of a Moodle 2.4 site, you might be used to seeing the repetitive editing icons shown when your site is in the "Turn Editing On" mode. It's a common sight for a Moodle administrator and the icons provide sufficient visual cues for a newbie to administer a site.


Well, that's Moodle out of the box. Lots of useful
editing icons. It's just that you usually edit only one thing at a time.
NOW YOU SEE IT (THEM)......

Since March 2012, the generous, helpful and talented Moodle community has been perfecting the Autohide feature of Moodle 2.x (Autohide and that Move icon, 2013). It is now, in my humble opinion, a must-have tool for Moodle 2.3/2.4 administrators. Autohide hides the editing icons until a hover or mouseover is done. This, to me, makes a lot of sense since too many icons leads to information overload. I mean the mouse cursor can appear at only one location at a time. So why show all the editing icons at once?

Monday, April 9, 2012

Autohide CSS Code for Moodle 2.2 to reduce clutter in Administration "Turn Editing On" mode

My first post for Moodlenews.com under the Totara LMS banner focused on Mark Ward's Autohide CSS code.This is great news for Moodle course administrators who hit the "Turn Editing On" button often. The Moodlenews post here shows how you can reduce the Editing icons visual overload.







Thanks to the wonder of AJAX and Mark Ward's ingenuity, Moodle course administration just became more FUN.

Ratings and Recommendations by outbrain