Replacing icons with CSS: Difference between revisions
From MoodleDocs
(a start on this topic) |
mNo edit summary |
||
| Line 1: | Line 1: | ||
It is possible to '''replace icons with CSS'''. You can also place [[alternate icon set]] files within your theme's folder but this has some drawbacks compared with the [[CSS]] approach. | It is possible to '''replace icons with CSS'''. You can also place [[Alternate icon set|alternate icon set]] files within your theme's folder but this has some drawbacks compared with the [[CSS]] approach. | ||
* you must use .gif files | * you must use .gif files, which prevents you using alpha transparency available with .pngs | ||
* the images must be the same size (in some cases), namely 16x16 pixels | * you can't send different images to different browsers (e.g. .gifs to IE, .png to everyone else) | ||
* the images must be the same size as the standard icons (in some cases at least), namely 16x16 pixels | |||
* you can't switch images via javascript/mouseover/rollovers/alternate stylesheets etc. | * you can't switch images via javascript/mouseover/rollovers/alternate stylesheets etc. | ||
* you can't make the images part of the clickable area of associated links | * you can't make the images part of the clickable area of associated links | ||
| Line 42: | Line 43: | ||
==== adding sideblock icons ==== | ==== adding sideblock icons ==== | ||
... | .sideblock .c1 a {background-repeat: no-repeat; padding-left: 20px;} | ||
Then each individual sideblock icon needs to be applied e.g. | |||
<nowiki>.block_course_list .c1 a {background-image: url(http://moodle.org/pix/i/course.gif);}</nowiki> | |||
==== adding activity and resource icons ==== | ==== adding activity and resource icons ==== | ||
| Line 48: | Line 53: | ||
td.activity > a {background-repeat: no-repeat; padding-left: 20px;} | td.activity > a {background-repeat: no-repeat; padding-left: 20px;} | ||
Then each individual activity icon needs to be | Then each individual activity icon needs to be applied e.g. | ||
<nowiki>td.activity.glossary > a {background-image: url(http://moodle.org/mod/glossary/icon.gif);}</nowiki> | <nowiki>td.activity.glossary > a {background-image: url(http://moodle.org/mod/glossary/icon.gif);}</nowiki> | ||
Revision as of 20:51, 27 April 2006
It is possible to replace icons with CSS. You can also place alternate icon set files within your theme's folder but this has some drawbacks compared with the CSS approach.
- you must use .gif files, which prevents you using alpha transparency available with .pngs
- you can't send different images to different browsers (e.g. .gifs to IE, .png to everyone else)
- the images must be the same size as the standard icons (in some cases at least), namely 16x16 pixels
- you can't switch images via javascript/mouseover/rollovers/alternate stylesheets etc.
- you can't make the images part of the clickable area of associated links
On the other hand, the drawbacks of the CSS approach are:
- the old icons are still downloaded, and part of the HTML even though they are not displayed
- it may not work in every case (investigations still ongoing)
How to replace icons with CSS
Removing current icons
The first step to providing alternative icons via CSS, is to hide the current icons.
removing sideblock icons
.sideblock .c0 {display: none;}
removing activity and resource icons
.activity img.activityicon {display: none;}
icons that can't currently be replaced
- course requires enrollment key icon
- course allows guest access icon
oddities, problems, issues
- you can't have different icons for each different resource type (e.g. pdf, weblink, text resource)
Applying new icons
The next stage is to apply new icons. These will be added as background images, that occupy the left hand side of the associated link tag, with the text moved along to the right.
adding sideblock icons
.sideblock .c1 a {background-repeat: no-repeat; padding-left: 20px;}
Then each individual sideblock icon needs to be applied e.g.
.block_course_list .c1 a {background-image: url(http://moodle.org/pix/i/course.gif);}
adding activity and resource icons
td.activity > a {background-repeat: no-repeat; padding-left: 20px;}
Then each individual activity icon needs to be applied e.g.
td.activity.glossary > a {background-image: url(http://moodle.org/mod/glossary/icon.gif);}
(this code only works on Firefox and other browsers that support child selectors, there is a workaround but it's fairly ugly. I will add this once it is fine tuned)
