I am trying to generalize a theme design so that I can make colour customisations that are simple, effective and carry forward properly.
I have managed to develop this using the standard them as the base. I also want to use the standard icon set, but am running into a problem:
I now have a design with a dark sideblock header and white text. The rest of the page is white with dark text.
As you can see in the picture the icons in the sideblock header are not very visible. I would love to swap them for white version of the same icon.
However the same icon (/pix/t/up.gif) is used in both situations. When I make it visible for the sideblock header, it will be invisible on the main page and vice versa.
I think it would be a good idea to have a separate set of icons for the sideblock header so that they can be changed on their own.
What do other people think? Should I make a request in the Tracker?
It could be a good idea to be able to select different icons for different needs (not only sideblock headers / content)
Another solution is to use icons that look nice in both dark and light background (small example attached).
I agree with Mauno. The last thing we need is more icons.
Want to do the rest for me now, Mauno?
Want to do the rest for me now, Mauno?
Hello Hans,
This visibility problem only occurs in Edit mode, but of course it makes things difficult for admins/teachers. When faced with the same problem, I found the solution of dividing my "editing" block headers into two horizontal halves, the upper part keeping the dark background which is displayed in non-edit mode and the lower half being made a lighter color, so that the icons remain visible.
Maybe not totally satisfactory form an aesthetic point of view, but it works!
If you're interested I can give you the CSS recipe.
Joseph
That is a good idea, and a workable solution for me!
Yes, I would be very interested in the recipe!
Thanks, Hans
Yes, I would be very interested in the recipe!
Thanks, Hans
Hans,
try this:
.sideblock .header .commands {
background-color: ...;
}
put your chosen color in there.
Joseph
try this:
.sideblock .header .commands {
background-color: ...;
}
put your chosen color in there.
Joseph
The way the icons are implemented is preventing the use of black or dark backgrounds: changing the icons - making them more bright - is not enough... becuase the mechanism is not complete implemented.
(i tried several layouts in the past.. )
Yes - making icons more bright is not enough - but if you add a thin dark border to light icon it can be used with all backgrounds. If size of an icon is 12x12 it looks best with minimal number of colors and clear contrast. Most of icons are 16x16 and some of them are "pale" or "rough" when used with dark background but could be fixed with a minor editing.
In http://icons.primail.ch/index.php?page=iconset_emails it is possible to see the influence of background color with some icon examples.
Patrick, according to your desires I just started creating 1-3 new icon sets for moodle with a couple of color variations. Do you have any special wishes? 
Wow! You are a good man, Mauno. How could I ask more from someone who gives so much! Thank you.
Yes, nice workaround!
Adding a black outline to a light icon really does help make the icons work with a variety of backgrounds.
But in my opinion the real villain in small icons is 'anti-aliasing'!
Anti-aliasing is basically the process by which pixel based displays simulate smooth edges by blending the edge colour with a background colour. Many of the icons in Moodle have anti-aliasing.
In Hans opening post he has highlighted an arrow in his image. The greyish areas around the edge of the arrow are where that arrow has been anti-aliased to a light background.
Using anti-aliasing on the outlines of icons at this size results in 'clashes' as the colour that is anti-aliased to may change from theme to theme (of course, if we could use PNGs instead of GIFs then we would be sorted). It also leads to a decrease in contrast between the background colour and the icon.
Attached is a screendump of some of our icons, I'm still working on them, but notice the solid black 'aliased' outline. Not to everyones tastes, but offers good contrast and background colour compatibility.
But in my opinion the real villain in small icons is 'anti-aliasing'!
Anti-aliasing is basically the process by which pixel based displays simulate smooth edges by blending the edge colour with a background colour. Many of the icons in Moodle have anti-aliasing.
In Hans opening post he has highlighted an arrow in his image. The greyish areas around the edge of the arrow are where that arrow has been anti-aliased to a light background.
Using anti-aliasing on the outlines of icons at this size results in 'clashes' as the colour that is anti-aliased to may change from theme to theme (of course, if we could use PNGs instead of GIFs then we would be sorted). It also leads to a decrease in contrast between the background colour and the icon.
Attached is a screendump of some of our icons, I'm still working on them, but notice the solid black 'aliased' outline. Not to everyones tastes, but offers good contrast and background colour compatibility.
After a quick check 51 icons from pix folder need a small change to be seen properly with dark backgrounds.
especially the arrows were killing me..
I never knew there where so many icons!
Some of them seem absolutely bizarre!
For example, the attached image of either snails or hand-grenades... what are they for?! I don't seem to be able to make them appear in Moodle at all!
We're going through a process of replacing the default icons, I think I'll upload them as a custom icon set or something, because they are actually pretty good.
But for now, here is a link to some nice icons; (we're using the 'file type' icons) http://www.ndesign-studio.com/resources/mini-pixel-icons/
They're free as long as you post a link back to the site. Well worth it until Moodle gets a re-vamp I think.
Some of them seem absolutely bizarre!
For example, the attached image of either snails or hand-grenades... what are they for?! I don't seem to be able to make them appear in Moodle at all!
We're going through a process of replacing the default icons, I think I'll upload them as a custom icon set or something, because they are actually pretty good.
But for now, here is a link to some nice icons; (we're using the 'file type' icons) http://www.ndesign-studio.com/resources/mini-pixel-icons/
They're free as long as you post a link back to the site. Well worth it until Moodle gets a re-vamp I think.
Andrew,
The attached are the Hot Potatoes icons.
Joseph
The attached are the Hot Potatoes icons.
Joseph
It really takes time to modify them, I have now ready most icons of my "standard edition pack". Is folder pix/a/ still in some use?
Great work Mauno!
Some of the default icons do appear a little pale on the light background, such as the 'mail' icons and the 2nd row 'groups' icons (it may just be the CRTs here at college). I've attached one of our new group icons to the bottom of this post which offer a bit more contrast. When I've finished them all I'll upload them.
I haven't updated any of the icons in the pix/a/ directory. In fact I don't know what they are used for so I have just left them.
Pixel level image manipulation takes time, but if you are using Photoshop you may be able to speed up your work in future by setting up actions for certain processes. For example, when I want to add a single pixel black outline to something, I just hit 'Shift+F1' and it automates it.
Andy K.
Thanks Andy,
I think I'll do the same if there is no special need for editing pix/a/
You are right, those small icons are too pale but it is easy to fix them (11x11px icons have still lots of free space around them 
) and I will also upload or give a link to my new icons (first set) in a week.
Very Nice.
We decided to put our 11x11px iconset up to 13x13px mainly due to visibility issues. (we have a high percentage of students who require help with reading, as well as a specialist centre for profound disabilities) The 2 extra pixels allows us to put a black outline any standard 11x11px icons, and thus increase the clarity of the shapes in the icons.
But I have noticed that sometimes the icons are scaled to 11x11px, do you know of any way to get the icons displaying at 13x13px??
We decided to put our 11x11px iconset up to 13x13px mainly due to visibility issues. (we have a high percentage of students who require help with reading, as well as a specialist centre for profound disabilities) The 2 extra pixels allows us to put a black outline any standard 11x11px icons, and thus increase the clarity of the shapes in the icons.
But I have noticed that sometimes the icons are scaled to 11x11px, do you know of any way to get the icons displaying at 13x13px??
I just answered my own question.
img.iconsmall {
vertical-align:middle;
margin-right:1px;
width:13px;
height:13px;
border:0px;
}
img.iconsmall {
vertical-align:middle;
margin-right:1px;
width:13px;
height:13px;
border:0px;
}
...and here comes my version 1 for almost all backgrounds:
http://korpelainen.net/pix1.htm
http://korpelainen.net/pix1.zip
Some icons are modified from old ones - some are new. Feel free to use and change them.
Thank you for all the hard work, Mauno. For sure these will come in handy.
I will create some more icon sets later - here is another version with some different icons and more contrast. Those arrows can be changed easily to different color because they have only solid color (no gradient).
Great Work!
The icon of module choice was wrong size - attached 16x16px version...
These familiar (edited) icons work well with most backgrounds too:
Very goog-looking icons. Great job
the icons in the navigation bar stay problematic..
Do you mean the icon in the breadcrumb trail? If so, then you can change this in the header of your theme (call the function with the symbol as a parameter) and style it using CSS...
For the sideblocks I have found another trick: use a gradient image that is darker at the top and lighter at the bottom, make it repeat sideways...
For the sideblocks I have found another trick: use a gradient image that is darker at the top and lighter at the bottom, make it repeat sideways...