Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Replacing icons with CSS3

From MoodleDocs

NOTE: the new CSS image placeholders and pix handling improvements in Moodle 2.0 allow themes to replace all icons and plugin images. Petr Škoda (škoďák)


This page details a method of altering the look of Moodle by replacing the icons with CSS3. It is also possible to achieve some of these effects with standard CSS (specificaly versions 2.0 and 2.1, which are more widely supported) or by using an alternate icon set. It may seem useless to use standards that are not widely supported (currently only Firefox and the latest test releases of Opera and Safari) but there are several practical benefits:

  • creating themes when you know that all participants are using the same browser
  • creating more accessible and usable Zoom layouts for particular users, who you know already use browsers with support for CSS3
  • creating and testing themes in advance, in anticipation of when Moodle has CSS classes to allow these same effects to be achieved in older versions of Internet Explorer
  • experimenting in order to decide what kind of extra CSS classes or id's should be added to Moodle to support more flexible themeing


Basic technique

The icons in Moodle follow a standard 'icon - hyperlink' format. The basic approach here is to identify the img tag that supplies the current icon, and set it to display: none, hiding it from view.

Then a background image of the same icon is added to the link tag, on the left hand side. Padding is added to move the link text along, out of the way of the icon.

The problems arise because there aren't sufficient CSS classes and id's in the HTML to directly target these images and links. Often we need to use fairly complex CSS3 selectors, such as: 

   #mod-resource-view img[src$="files.gif"] ~ a

This means target the hyperlink that is at the same level in the hierarchy as the img whose src URL ends with "files.gif". If these effects are found useful then these selectors should be replaced with simple CSS classes.

You can read about these CSS3 selectors here:

http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

Removing icons examples

.sideblock .c0,
.block_calendar_upcoming img,
#course-mod #content > h2.main > img,
#mod-resource-view img[src$="files.gif"],
#files-index .files td.name a:first-child {
    display: none;
    }

Replacing icons examples

This is a two step process. First create the space for the icon (which is the same for every icon in this particular case), then assign the icons individually. 

.sideblock .c1 a,
.block_calendar_upcoming .event a,
#course-mod #content > h2.main,
#mod-resource-view img[src$="files.gif"] ~ a,
.files td.name a,
.files td a:first-child {
    background-repeat: no-repeat;
    padding: 2px 2px 2px 18px;
    background-position: left;
    }

.block_calendar_upcoming .event img[src$="site.gif"] ~ a {
    background-image: url(http://moodle.org/pix/c/site.gif);
    }
a[title*="allows guest users"] {
    background-image: url(http://moodle.org/pix/i/guest.gif);
    }
.activity.chat > a,
.block_activity_modules a[href*="mod/chat"] {
    background-image: url(http://moodle.org/mod/chat/icon.gif);
    }

Unfinished areas

These icons can be hidden but not (yet) replaced:

  • icons at the top of resource/activity editing screens
  • course/site/user/group calendar event icons on main calendar page

There has been no work done (yet) on:

  • editing command icons
  • course block command icons (hide, show, highlight)
  • the breadcrumb and calendar next/previous images added in 1.6

Benefits and next step

This may seem like a lot of work to end up with the exact same physical presentation, but this is just the beginning. You could:

  • serve the same icon files for multiple Moodle installations
  • change icons seperately for places that are hard coded to the same URL in the HTML
  • use a set of 3rd party icons without having to rename them, re-organize the folder structure and convert them to .gif files (e.g. the 16x16 icons from the Tango project)
  • also use the 24x24 or 48x48 pixel versions of those same Tango icons (remember to increase the top and bottom padding on the a tag)
  • make three stylesheets with progressively larger text and size the icons to match
  • create an accessible Zoom layout using large, high contrast icons
  • generate greyscale versions of the icons and 'dim' them along with the text of hidden items
  • activate rollover, hover or click effects in the same way you change link colors and underlines (e.g. increase the size of the text and icon on mouseover, for easier reading/identification)
  • use .png files with alpha transparency
  • send different sets of images to different browsers (e.g. non-alpha-transparent to IE6 or below, alpha-transparent to everyone else)
  • place the icons to the right of the text (also right-justifying the text so it doesn't look ragged)
  • only right align the text and icon in the right hand sideblock column and left align the links on left hand side (or vice versa)

Full code

A small note: all the URLs point to images on Moodle.org for clarity. Make sure to change these to point to your own server address otherwise you'll be putting unneccessary strain on Moodle.org's servers. 

.sideblock .c0,
.block_calendar_upcoming img,
td.picture img,
#course-mod #content > h2.main > img,
td.activity img.activityicon,
#mod-resource-view img[src$="files.gif"],
#files-index .files td.name a:first-child,
span.helplink img,
a[title*="requires an enrolment"] img,
a[title*="allows guest users"] img,
a[target="courseinfo"] img,
.files img {
    display: none;
    }

.sideblock td,
.files td.name,
td.activity {
    padding: 0;
    height: 20px;
    }

.sideblock .c1 a,
.block_calendar_upcoming .event a,
.activity > a,
#course-mod #content > h2.main,
#mod-resource-view img[src$="files.gif"] ~ a,
a[title*="requires an enrolment"],
a[title*="allows guest users"],
a[target="courseinfo"],
.files td.name a,
.files td a:first-child {
    background-repeat: no-repeat;
    padding: 2px 2px 2px 18px;
    background-position: left;
    }

a[title*="allows guest users"] {
    background-image: url(http://moodle.org/pix/i/guest.gif);
    }
a[title*="requires an enrolment"] {
    background-image: url(http://moodle.org/pix/i/key.gif);
    }
a[target="courseinfo"] {
    background-image: url(http://moodle.org/pix/i/info.gif);
    }


a[href*="help.php"] {
    background-repeat: no-repeat;
    padding: 2px 18px 2px 2px;
    background-position: right;
    background-image: url(http://moodle.org/pix/help.gif);
    }

a[href$="emoticons.html"] {
    background-image: url(http://moodle.org/pix/s/smiley.gif);
    }
    

.block_calendar_upcoming .event img[src$="site.gif"] ~ a {
    background-image: url(http://moodle.org/pix/c/site.gif);
    }
.block_calendar_upcoming .event img[src$="group.gif"] ~ a {
    background-image: url(http://moodle.org/pix/c/group.gif);
    }
.block_calendar_upcoming .event img[src$="user.gif"] ~ a {
    background-image: url(http://moodle.org/pix/c/user.gif);
    }
.block_calendar_upcoming .event img[src$="course.gif"] ~ a {
    background-image: url(http://moodle.org/pix/c/course.gif);
    }

.activity.attendance > a,
.block_activity_modules a[href*="mod/attendance"] {
    background-image: url(http://moodle.org/mod/attendance/icon.gif);
    }
.activity.assignment > a,
.block_activity_modules a[href*="mod/assignment"] {
    background-image: url(http://moodle.org/mod/assignment/icon.gif);
    }
.activity.chat > a,
.block_activity_modules a[href*="mod/chat"] {
    background-image: url(http://moodle.org/mod/chat/icon.gif);
    }
.activity.choice > a,
.block_activity_modules a[href*="mod/choice"] {
    background-image: url(http://moodle.org/mod/choice/icon.gif);
    }
.activity.data > a,
.block_activity_modules a[href*="mod/data"] {
    background-image: url(http://moodle.org/mod/data/icon.gif);
    }
.activity.dialogue > a,
.block_activity_modules a[href*="mod/dialogue"] {
    background-image: url(http://moodle.org/mod/dialogue/icon.gif);
    }
.activity.exercise > a,
.block_activity_modules a[href*="mod/exercise"] {
    background-image: url(http://moodle.org/mod/exercise/icon.gif);
    }
.activity.forum > a,
.block_activity_modules a[href*="mod/forum"] {
    background-image: url(http://moodle.org/mod/forum/icon.gif);
    }
.activity.glossary > a,
.block_activity_modules a[href*="mod/glossary"] {
    background-image: url(http://moodle.org/mod/glossary/icon.gif);
    }
.activity.hotpot > a,
.block_activity_modules a[href*="mod/hotpot"] {
    background-image: url(http://moodle.org/mod/hotpot/icon.gif);
    }
.activity.journal > a,
.block_activity_modules a[href*="mod/journal"] {
    background-image: url(http://moodle.org/mod/journal/icon.gif);
    }
.activity.label > a,
.block_activity_modules a[href*="mod/label"] {
    background-image: url(http://moodle.org/mod/label/icon.gif);
    }
.activity.lams > a,
.block_activity_modules a[href*="mod/lams"] {
    background-image: url(http://moodle.org/mod/lams/icon.gif);
    }
.activity.lesson > a,
.block_activity_modules a[href*="mod/lesson"] {
    background-image: url(http://moodle.org/mod/lesson/icon.gif);
    }
.activity.quiz > a,
.block_activity_modules a[href*="mod/quiz"] {
    background-image: url(http://moodle.org/mod/quiz/icon.gif);
    }
.activity.scorm > a,
.block_activity_modules a[href*="mod/scorm"] {
    background-image: url(http://moodle.org/mod/scorm/icon.gif);
    }
.activity.survey > a,
.block_activity_modules a[href*="mod/survey"] {
    background-image: url(http://moodle.org/mod/survey/icon.gif);
    }
.activity.wiki > a,
.block_activity_modules a[href*="mod/wiki"] {
    background-image: url(http://moodle.org/mod/wiki/icon.gif);
    }
.activity.workshop > a,
.block_activity_modules a[href*="mod/workshop"] {
    background-image: url(http://moodle.org/mod/workshop/icon.gif);
    }


.activity.resource > a,
.block_activity_modules a[href*="mod/resource"] {
    background-image: url(http://moodle.org/mod/resource/icon.gif);
    }
.activity.resource img[src$="unknown.gif"] ~ a,
.file .name a {
    background-image: url(http://moodle.org/pix/f/unknown.gif);
    }
.activity.resource img[src$="audio.gif"] ~ a, 
.file a[href$=".odt"] {
    background-image: url(http://moodle.org/pix/f/audio.gif);
    }
.activity.resource img[src$="avi.gif"] ~ a, 
.file a[href$=".avi"] {
    background-image: url(http://moodle.org/pix/f/avi.gif);
    }
.activity.resource img[src$="excel.gif"] ~ a, 
.file a[href$=".xls"] {
    background-image: url(http://moodle.org/pix/f/excel.gif);
    }
.activity.resource img[src$="flash.gif"] ~ a,
.file a[href$=".swf"] {
    background-image: url(http://moodle.org/pix/f/flash.gif);
    }
.activity.resource img[src$="folder.gif"] ~ a,
#mod-resource-view img[src$="files.gif"] ~ a,
.files .folder td.name a {
    background-image: url(http://moodle.org/pix/f/folder.gif);
    }
.activity.resource img[src$="html.gif"] ~ a,
.file a[href$=".html"],
.file a[href$=".htm"] {
    background-image: url(http://moodle.org/pix/f/html.gif);
    }
.activity.resource img[src$="image.gif"] ~ a,
.file a[href$=".gif"],
.file a[href$=".png"],
.file a[href$=".jpeg"],
.file a[href$=".jpg"] {
    background-image: url(http://moodle.org/pix/f/image.gif);
    }
.activity.resource img[src$="odt.gif"] ~ a,
.file a[href$=".odt"] {
    background-image: url(http://moodle.org/pix/f/odt.gif);
    }
.activity.resource img[src$="pdf.gif"] ~ a,
.file a[href$=".pdf"] {
    background-image: url(http://moodle.org/pix/f/pdf.gif);
    }
.activity.resource img[src$="powerpoint.gif"] ~ a {
    background-image: url(http://moodle.org/pix/f/powerpoint.gif);
    }
.activity.resource img[src$="text.gif"] ~ a,
.file a[href$=".js"],
.file a[href$=".csv"],
.file a[href$=".rtf"],
.file a[href$=".css"],
.file a[href$=".txt"] {
    background-image: url(http://moodle.org/pix/f/text.gif);
    }
.activity.resource img[src$="video.gif"] ~ a {
    background-image: url(http://moodle.org/pix/f/video.gif);
    }
.activity.resource img[src$="web.gif"] ~ a {
    background-image: url(http://moodle.org/pix/f/web.gif);
    }
.activity.resource img[src$="word.gif"] ~ a,
.file a[href$=".doc"],
.file a[href$=".dot"] {
    background-image: url(http://moodle.org/pix/f/word.gif);
    }
.activity.resource img[src$="xml.gif"] ~ a,
.file a[href$=".xml"] {
    background-image: url(http://moodle.org/pix/f/xml.gif);
    }
.activity.resource img[src$="zip.gif"] ~ a, 
.file a[href$=".tar.gz"],
.file a[href$=".zip"] {
    background-image: url(http://moodle.org/pix/f/zip.gif);
    }


.block_site_main_menu .c1 a[href*="forum/view"] {background-image: url(http://moodle.org/mod/forum/icon.gif);}

.block_participants .c1 a[href*="user/index"] {background-image: url(http://moodle.org/pix/i/users.gif);}

.block_course_list .c1 a {background-image: url(http://moodle.org/pix/i/course.gif);}

.block_admin .c1 a[href*="admin/configure"] {background-image: url(http://moodle.org/pix/i/admin.gif);}
.block_admin .c1 a[href*="admin/users"] {background-image: url(http://moodle.org/pix/i/users.gif);}
.block_admin .c1 a[href*="backup/backup"] {background-image: url(http://moodle.org/pix/i/backup.gif);}
.block_admin .c1 a[href*="course/index"] {background-image: url(http://moodle.org/pix/i/course.gif);}
.block_admin .c1 a[href*="log.php"] {background-image: url(http://moodle.org/pix/i/log.gif);}
.block_admin .c1 a[href*="files/index"] {background-image: url(http://moodle.org/pix/i/files.gif);}
.block_admin .c1 a[href$="backupdata"] {background-image: url(http://moodle.org/pix/i/restore.gif);}
.block_admin .c1 a[href*="course/import"] {background-image: url(http://moodle.org/pix/i/restore.gif);}
.block_admin .c1 a[href$="edit=on"] {background-image: url(http://moodle.org/pix/i/edit.gif);}
.block_admin .c1 a[href$="edit=off"] {background-image: url(http://moodle.org/pix/i/edit.gif);}
.block_admin .c1 a[href*="edit.php"] {background-image: url(http://moodle.org/pix/i/settings.gif);}
.block_admin .c1 a[href*="user/edit.php"] {background-image: url(http://moodle.org/pix/i/user.gif);}
.block_admin .c1 a[href*="teacher.php"] {background-image: url(http://moodle.org/pix/i/users.gif);}
.block_admin .c1 a[href*="student.php"] {background-image: url(http://moodle.org/pix/i/users.gif);}
.block_admin .c1 a[href*="groups.php"] {background-image: url(http://moodle.org/pix/i/group.gif);}
.block_admin .c1 a[href*="scales.php"] {background-image: url(http://moodle.org/pix/i/scales.gif);}
.block_admin .c1 a[href*="grade/index"] {background-image: url(http://moodle.org/pix/i/grades.gif);}
.block_admin .c1 a[href*="teacher.html"] {background-image: url(http://moodle.org/mod/resource/icon.gif);}
.block_admin .c1 a[href*="mod/forum/view"] {background-image: url(http://moodle.org/mod/forum/icon.gif);}
.block_admin .c1 a[href*="user.php"] {background-image: url(http://moodle.org/pix/i/report.gif);}
.block_admin .c1 a[href*="change_password.php"] {background-image: url(http://moodle.org/pix/i/user.gif);}
.block_admin .c1 a[href*="unenrol.php"] {background-image: url(http://moodle.org/pix/i/user.gif);}
Retrieved from "https://docs.moodle.org/dev/index.php?title=Replacing_icons_with_CSS3&oldid=24893"
Powered by MediaWiki