Themes

 
 
Frankie's the name, Moodle's my game!
Autohide and that Moodle 2.4 Move icon
Group Particularly helpful Moodlers

Hi.

I've activated the Autohide css feature to work on my Moodle 2.4 site.  
However, that Moodle 2.4's 'move' icon always shows up in the Turn Editing 'On' mode. I know it's some Javascript thingy vs AJAX thing, but I don't know how to make the 'move' icon appear only on mouseover.

Anyone have any idea how to solve this? I've attached the Autohide css file. I'm using the isometric theme by Mary Evans.

Frankie Kam

 
Average of ratings: -
It's only an avatar...
Re: Autohide and that Moodle 2.4 Move icon
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Have you enabled AJAX too?

 
Average of ratings: -
Frankie's the name, Moodle's my game!
Re: Autohide and that Moodle 2.4 Move icon
Group Particularly helpful Moodlers

Hi Mary. Thanks for your reply.

Yup, it's turned on....(hmm...and let's try turning it off then)....

...and therein lies the problem! I turned AJAX off and then the Move icon disappears, only to reappear on a mouseover - which is what I want. But Moodle's Drag-and-Drop upload features no longer works - which is what I don't want. wide eyes So without AJAX turned on, how can I get the Drag-and-Drop to work?

Can I just disable that Javascript Move icon and still have AJAX turned on so that I can drag-and-drop stuff from my Desktop to my Moodle course page?

Frankie Kam

 
Average of ratings: -
It's only an avatar...
Re: Autohide and that Moodle 2.4 Move icon
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

If I were you, I would open a Moodle Tracker issue as this sounds like a Moodle BUG to me.

Also...regarding the Moodle 1.9 Responsive theme, did you see my reply to you?

 
Average of ratings: -
Frankie's the name, Moodle's my game!
Re: Autohide and that Moodle 2.4 Move icon
Group Particularly helpful Moodlers

I wonder what happens if I found that code bit that controls the Javascript move icon (the icon that looks like a Maltese cross). If I could disable it, then that could be my answer.

haha

Going down another quest/rabbit hole.....will let you know what I find.

Frankie Kam

 
Average of ratings: -
Picture of Danny Wahl
Re: Autohide and that Moodle 2.4 Move icon
Group DevelopersGroup Particularly helpful Moodlers

Frankie/Mary - it's not a bug.  AJAX just uses a span and not an 'a'.  You need something like this:

.editing .section .activity .commands > * {} /* Individual activity and resource controls (can't use 'a' b/c ajax uses 'span') */

.editing .section .activity:hover .commands > *,
.editing .section .activity .commands > *:active,
.editing .section .activity .commands > *:focus {}

here's what it looked like in my theme before I removed it:

https://github.com/thedannywahl/Zebra_4_Moodle_2/blob/6824bef87df545e449ff7c1fe8eca38451342d51/style/autohide.css

 
Average of ratings: -
Frankie's the name, Moodle's my game!
Re: Autohide and that Moodle 2.4 Move icon
Group Particularly helpful Moodlers

Hi Danny

Thanks for your speedy response. I'm a bit confused. Am I supposed to add the code or to remove the code? I've tried adding it to my CSS file, but it doesn't seem to remove that dastardly JS move icon. Here's my CSS file:

http://dl.dropbox.com/u/17797520/autohideWardJohnsonDanny2.css

Frankie Kam

 
Average of ratings: -
It's only an avatar...
Re: Autohide and that Moodle 2.4 Move icon
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

The CSS you need appears to have been commented out!

Try removing the /* and */ as highlighted below, and remove that small section of CSS you added as it is included in this commented out list as you will see...

/*
.editing .section:hover .section_add_menus,
.editing .block:hover .section_add_menus,
.editing .sitetopic:hover .section_add_menus,
.editing .block:hover .addresourcemodchooser,
.editing .section:hover .addresourcemodchooser,
.editing .sitetopic:hover .addresourcemodchooser,
.editing .block:hover .title .commands .icon,
.editing .block .title .commands .icon:active,
.editing .block .title .commands .icon:focus,
.editing .block .content li:hover .commands a,
.editing .block .content li .commands a:active,
.editing .block .content li .commands a:focus,
.editing .block:hover .editbutton a,
.editing .block .editbutton a:active,
.editing .block .editbutton a:focus,
.editing .section:hover .side > *:not(br),
.editing .section .side > *:active,
.editing .section .side > *:focus,
.editing .section .summary:hover a:first-child,
.editing .section .summary a:first-child:active,
.editing .section .summary a:first-child:focus,
.editing .section .sectionname:hover + .summary a,
.editing .section .activity:hover .commands > *,
.editing .section .activity .commands > *:active,
.editing .section .activity .commands > *:focus,
.editing .sitetopic:hover > a,
.editing .sitetopic > a:active,
.editing .sitetopic > a:focus {
    filter: none;
    opacity: 1;
}
*/
 
Average of ratings: -
Frankie's the name, Moodle's my game!
Re: Autohide and that Moodle 2.4 Move icon
Group Particularly helpful Moodlers

Hi Danny

I used the entire code of your githum Zebra autohide.css to overwrite my autohide.css code and NOW IT WORKS! Those Javascript "move" icons which used to stick out like sore-thumbs all over the screen where an activity or resource is located, are now gone. Fabulous! big grin YiPPEE!!!

Thanks a million. Autohide now looks so much better.

One more question. How do I get rid of the gray #eee 0r #eeeeee background section linearea on mouseover? I've tried to edit the occurrences of #eee inside isometric.css code but the shaded gray section linearea is still there on a mouse over (as shown in the screenshot above).

Nearly there
Frankie Kam

 
Average of ratings: -
Frankie's the name, Moodle's my game!
Re: Autohide and that Moodle 2.4 Move icon
Group Particularly helpful Moodlers

I found it. To remove the label highlight, add these lines of CSS code to your css file. E.g., isometric.css.

.course-content ul.section li.activity:hover,
.sitetopic ul.section li.activity:hover {
background: inherit;
}

Source: https://moodle.org/mod/forum/discuss.php?d=219635&parent=956232

Hope this helps (me!).

Frankie

 
Average of ratings: -
Frankie's the name, Moodle's my game!
Re: Autohide and that Moodle 2.4 Move icon
Group Particularly helpful Moodlers

I'm almost home! See attached autohide.css which is almost all Danny Wahl's Zebra theme for Moodle 2.4. Credit too to Mark Ward and Mark Johnson, et. al. I've added the code to:
(1) Remove the light gray horizontal highlight on mouseover which is a Moodle 2.4 feature that I'm not too much of a fan;
(2) Make the "Add an activity or resource" link appear only on hover
(3) And best of all, that pesky Javascript "Maltese Cross Move icon" no longer pops up all over the place, cluttering up the otherwise orderly screen.

hi

All I need now is to make the Edit Summary icon to appear only on hover/mouseover.  Danny or Mary, any ideas how I can do this?

Oh, so close to reducing the clutter with autohide
Frankie Kam

 
Average of ratings: -
Picture of Danny Wahl
Re: Autohide and that Moodle 2.4 Move icon
Group DevelopersGroup Particularly helpful Moodlers

here's the edit section summary code - it uses css3 (sorry it's the only way):

.editing .section .summary a:first-child {/* whatever your hiding rule is */}
.editing .section .summary:hover a:first-child,
.editing .section .summary a:first-child:active,
.editing .section .summary a:first-child:focus,
.editing .section .sectionname:hover + .summary a {/* whatever your showing rule is */}

The first rule looks for the first link inside of the summary - which is the edit icon.  You must use :first-child because if you don't then ALL links in a summary will be hidden, d'oh!

The second rule shows the edit icon when you hover over the summary OR the section name (necessary if the summary is blank - otherwise you'll never see the icon to edit it!)

 
Average of ratings: -
Frankie's the name, Moodle's my game!
Re: Autohide and that Moodle 2.4 Move icon
Group Particularly helpful Moodlers

HI Danny

I tried it, but for those weeks where the user has typed a summary text, the Summary icon always appears - whether I hover or non-hover my mousepointer.

Here's the autohide.css I used with your code " edit section summary code". I m not sure where I went wrong.
http://dl.dropbox.com/u/17797520/moodle/autohide1/autohide.css

Frankie Kam

 
Average of ratings: -
Picture of Danny Wahl
Re: Autohide and that Moodle 2.4 Move icon
Group DevelopersGroup Particularly helpful Moodlers

sorry I can't help you out more Frankie - other than to say that the code I gave you is what we're using, and it works.

Unfortunately access to dropbox is blocked here (as well as github now unfortunately...)

 
Average of ratings: -
Frankie's the name, Moodle's my game!
Re: Autohide and that Moodle 2.4 Move icon
Group Particularly helpful Moodlers

Hi Danny 

Many thanks for your time. It's been a great help getting the CSS thingy to work. Appreciate all your help.

Frankie Kam

 
Average of ratings: -
Frankie's the name, Moodle's my game!
Re: Autohide and that Moodle 2.4 Move icon
Group Particularly helpful Moodlers

Got it working!

and then when I move the mouse pointer down,

Fantastico! At last my quest is complete.

Thanks to all. This makes a good blog post, with credit given where credit is due.
Frankie Kam

P.S., The autohide.css code I am using can be downloaded from here:
http://dl.dropbox.com/u/17797520/moodle/autohide2/autohide.css

 
Average of ratings: -
St Petersburg, Russia
Re: Autohide and that Moodle 2.4 Move icon
Group Particularly helpful Moodlers

Frankie,

Kudos for persisting until you achieved what you were looking for, but I venture to suggest that your minimalist approach may be going too far for the nieve moodle user.

In the second screenshot you show a blank section with no section summary. As a new user I would have no idea from looking at this whether it was even possible to add text. From the usability perspective I do think that you need to supply some visual cue that there's a space to add text -- hence the default appearance of the spanner. Similarly, were you to remove +Add an Activity or Resource  link a new user or one migrating from moodle 1.9, or someone just using moodle at irregular intervals would have no idea of where to accomplish the creation of an Activity.

This is also the problem with autohide itself. For users who are adept at Moodle or accustomed to mousing about the screen it reduces clutter , but for less accomplished people it could be intimidating. Plus, how does this system behave with visually impaired users who have to employ screen readers to navigate the course? What effect  does the autohide have on reading the screen to audio output?

Cheers

Mark

 
Average of ratings: -
Frankie's the name, Moodle's my game!
Re: Autohide and that Moodle 2.4 Move icon
Group Particularly helpful Moodlers

Thank Mark for your views and suggestions. I never thought about the naive user's point of view on this. I thought a new user would wave the mouse around to see what popped up, and once the initial 'imprinting' occurred (i.e., the user says "Aha! So that's how I can add a resource" of "Aha! There something here...") then it would become second nature for them to know what to do. Assumptions really. As for the impaired users, you are right. The screen reader wouldbe't be able to catch those hover-only text. Silly question: Is it a rule in many universities that the LMS has to cater for impaired students accessibility? Maybe there is a way to toggle between the two states. One for impaired students and one for non-impaired students.

Thanks for the input
Frankie Kam

 
Average of ratings: -