Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AutoHide for Editing Mode on Moodle 2.X
/** To hide the icons we are using opacity as display:none makes
the buttons inaccessible.
FILTER attributes should apply to IE so long as the strict
doctype is served. Use Filter: none on clear to protect PNG alphas.
Tweak the top opacity values to get "ghost" icons rather than hiding them**/
.block .header .commands a img,
.path-course-view .section .content li .commands img,
.path-course-view .section .content li .commands span.editing_move img,
.path-course-view .section .side img,
.path-course-view .section .section-modchooser a,
.path-course-view .section .content .summary img.edit{
opacity: 0.01;
filter: alpha(opacity=1);
-o-transition: opacity 0.5s linear 0.3s;
-moz-transition: opacity 0.5s linear 0.3s;
-webkit-transition: opacity 0.5s linear 0.3s;
transition: opacity 0.5s linear 0.3s;
}
.block:hover .header .commands a img,
.block .header .commands a:focus img,
.ie .block .header .commands a:active img,
.path-course-view .section .content li:hover .commands img,
.path-course-view .section .content li .commands a:focus img,
.ie.path-course-view .section .content li .commands a:active img,
.path-course-view .section .content li:hover .commands span.editing_move img,
.path-course-view .section .content li .commands span.editing_move:focus img,
.path-course-view .section .content li .commands span.editing_move img:focus,
.path-course-view .section:hover .side img,
.path-course-view .section .side a:focus img,
.ie.path-course-view .section .side a:active img,
.path-course-view .section:hover .section-modchooser a,
.path-course-view .section:hover .section-modchooser a:focus,
.ie.path-course-view .section:hover .section-modchooser a:active,
.path-course-view .section:hover .content .summary img.edit,
.path-course-view .section .content .summary a:focus img.edit,
.ie.path-course-view .section .content .summary a:active img.edit{
opacity:1;
filter: none;
-o-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
/** some feedback to tell user we are in editing mode **/
.editing.path-course-view div.content{
border: 2px #FFD24D dotted;
box-shadow: #FFD24D 0px 0px 10px;
}
.editing.path-course-view #section-0 div.content{
border: 1px #FFEFBF dotted;
box-shadow: #FFEFBF 0px 0px 10px;
}
.path-course-view .section .content .section_add_menus .horizontal > div{
background-color: #FFD24D;
padding: .1em 0;
border: 4px solid #FFD24D;
}
.path-course-view .section .content .section_add_menus .horizontal > div:first-child{
border-radius: 10px 0 0 10px;
}
.path-course-view .section#section-0 .content .section_add_menus .horizontal > div{
background-color: #FFEFBF;
border: 4px solid #FFEFBF;
}
/**if this is a tablet or phone we want to be able to see the icons**/
.tablettheme .block .header .commands a img,
.path-course-view.tablettheme .section .content li .commands a img,
.path-course-view.tablettheme .section .content .summary a img.icon.edit,
.path-course-view.tablettheme .section .side img,
.mobiletheme .block .header .commands a img,
.path-course-view.mobiletheme .section .content li .commands a img,
.path-course-view.mobiletheme .section .content .summary a img.icon.edit,
.path-course-view.mobiletheme .section .side img{
opacity: 0.3;
}
@frankiekam
Copy link

frankiekam commented Apr 7, 2012

I do experience with the Afterburner theme. I applied the autohide.css and modified the config.php as per Mark Johnson's tutorial at http://moodle.org/mod/forum/discuss.php?d=197470&parent=862604 but alas! It doesn't work with Afterburner. Perhaps there is a certain Mary I need to consult.

@frankiekam
Copy link

frankiekam commented Apr 7, 2012

I take back what I just said about Afterburner theme. It works just fine now. I needed to enable the Theme Designer Mode. That way the theme cache was not used. Then it worked just fine.

@markward
Copy link
Author

markward commented Apr 24, 2012

Hi Frankie

Yes, theme designer mode is the key. It's nice that Moodle caches stuff like that now, but it does lead to confusion sometimes :)

Mark

@markward
Copy link
Author

markward commented Jun 14, 2012

Updated the CSS to detect tablet and phone access and show ghost icons for touch users

@markward
Copy link
Author

markward commented Jun 18, 2012

Added some new pointers to handle more action icons and to add compatibility for Moodle 2.3

@markward
Copy link
Author

markward commented Feb 22, 2013

Improved the look of editing mode (hated that red anyway!)

@markward
Copy link
Author

markward commented May 21, 2013

Improved compatibility with Moodle 2.5

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment