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: Difference between revisions

From MoodleDocs
Line 76: Line 76:


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:
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
* 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 [http://tango-project.org/Tango_Icon_Gallery 16x16 icons from the Tango project])
* 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 [http://tango-project.org/Tango_Icon_Gallery 16x16 icons from the Tango project])
Line 84: Line 85:
* 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)
* 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
* 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)  
* send different sets of images to different browsers (e.g. non-alpha-transparent to IE6 or below, alpha-transparent to everyone else)


== Full code ==
== Full code ==

Revision as of 11:05, 30 April 2006

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)

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