Carrying on from the discussion about using CSS to add icons in the side blocks ... is there a nifty way we can convert ALL the icons to be styled via CSS?
It would mean we could do away with the difficult-to-maintain custom pixpath and themes could easily control ALL icons from a styles_icons.css file.
I'm thinking of some sort of function that inserts a DIV or a SPAN or an anchor with a particular class for that icon.
Thoughts? Accessibility? Old browsers? Clickability?
Sounds fine to me, but you shouldn't need a SPAN (or really a DIV). I would use LI (or A tag with display:block), with a unique id for each.
then the CSS can simply be
#scales {
background: #e0cee3 url(/img/scales.gif) 2px 50% no-repeat; padding: 0.5em 3.5em;
}
the padding means the text of the LI, DIV (or A) doesn't appear on top of the image.
putting the image behind the A tag would be good because then the image should be clickable. This would require display:block though (as would SPAN).
Also, obviously should split up the CSS I gave above, and only do the background-image in the unique ID # - control all the padding and background colours further up the cascade.
cheers
then the CSS can simply be
#scales {
background: #e0cee3 url(/img/scales.gif) 2px 50% no-repeat; padding: 0.5em 3.5em;
}
the padding means the text of the LI, DIV (or A) doesn't appear on top of the image.
putting the image behind the A tag would be good because then the image should be clickable. This would require display:block though (as would SPAN).
Also, obviously should split up the CSS I gave above, and only do the background-image in the unique ID # - control all the padding and background colours further up the cascade.
cheers
I am all for it. As mentioned in a previous discussion, sometimes sideblock heading
backgrounds are dark, but the other content background is white or
light.
Recently, as I was modifying a theme, I came across some really nice icons that worked well in the sideblocks but were too small and hard to read in the main area.
So, yes, if we can do this be css, I think it would be a boon to the theme deveopers.
Recently, as I was modifying a theme, I came across some really nice icons that worked well in the sideblocks but were too small and hard to read in the main area.
So, yes, if we can do this be css, I think it would be a boon to the theme deveopers.
On base of the "Cascading Themes" there will also be no need anymore to copy all icons into the theme folder and maintain none or all icons, but a theme designer could just add or replace some.
For accessibility the "title" tag of the LI or DIV must hold the explanations for screenreaders. The texts for the title tag can be maintained centraly in the language packs.
This would be great.
For accessibility the "title" tag of the LI or DIV must hold the explanations for screenreaders. The texts for the title tag can be maintained centraly in the language packs.
This would be great.
Icons accompanying a text link (either in the flow of text or in lists) should definately use this method.
I'm not so sure about stand alone icons with no accompanying text, as with this method there is no equivalent of the alt attribute text that gets substituted in non-visual browsers for img tags.
You might be able to do some variation of the Farhner Image Replacement technique to get the background image without text on visual browsers and vice-versa for non-visual browsers but a quick tour of the likely suspects shows no similar technique in use for small (e.g. 16x16 pixel) icons rather than larger header text images.
Actually, Doug Bowman of Stop Design uses such a thing for his permalinks (the little document icon next to the date under each story blurb). However, he uses display:none to hide the link text, which I believe is the primary reason that the FIR technique is considered inaccessible. Perhaps one of the other FIR variants that don't use display:none could be adopted e.g. some use margins to push text completely off the screen. These other techniques also dispense with the semantically useless extra span that the basic FIR introduces.
(Slightly off-topic: I'm not the world's biggest fan of using Flash for it's own sake, but when I discovered the FIR-related sIFR technique , I have to admit I thought the Flash wizards here at Moodle.org could create some really whizzy themes if that was supported in the XHTML)