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;
}
@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