AutoHide for Editing Mode on Moodle 2.X

autohide.css

/** 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;
}

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

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

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

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

Improved compatibility with Moodle 2.5