Mezuen egilea: David Scotson

I've not looked into this recently but would suggest em sizing based on '1em = standard paragraph text' with a percentage set on the body tag to control overall text size as recommended by Owen Briggs.

That technique has been around for a while, and nothing stands still in CSS as browsers are updated but it still seems to get support e.g. from the CSS discuss wiki pages onUsingFontSize and FontSize.

Moodle in English -> Themes -> alt-tags and 508 compliance -> Re: alt-tags and 508 compliance

David Scotson -

I believe this is already the case in many places. If you have a specific alt tag in mind then you should probably file a bug report.

I recently noticed the alt tags for the block edit controls where not localized, but think this is now fixed in CVS.

I'm not sure what you mean by 'hardcode a padding-left value' but, yes, the padding needs to be there to stop the content overlapping the background image.

For example for the 16x16 images used in the block implementation, I've used a 30px padding and positioned the image 10 pixels in from the left to give

[10px-space] 16px image [4px-space] text

However, all these values can be changed easily to use a much bigger image, or varied on an item to item basis. It can be altered when you mouse-over the li, reversed to have the images at the right of (or above or below or behind or in the middle of) the text or left out completely. All these decisions can be controlled on a theme by theme basis (or by javascript stylesheet switchers within a theme) so it's not really hard-coded.

Well there are three basic techniques, two of which have problems:

  • the obvious CSS solution is to change the list bullet style to use an image. Unfortunately this is inconsistent across browsers

  • the second is to place an img tag within the list item, which is what appears to be done at the site you link to. The problem with this is that you can't change the image simply by changing the CSS. In Moodle terms, this isn't controllable by the 'theme'

So I went with a third approach, which I used for my block rewrite and which you can see at the demo page Urs set up. The approach is to attach a non-repeating background image to the a tag inside the li which is postioned like so:

.block-list li a {
    padding: 0.2em 0 0.2em 30px;
    background-repeat: no-repeat;
    background-position: 10px center;
    display: block;
}

and the individual images are selected with this:

.block-list li.people-profile a {
    background-image: url(img/user.gif);
}

This has several benefits including allowing the theme to dictate the image, filetype, size and position all of which are constrained to some degree if an img tag is used.

There's some code here, I think Urs has had a play around with it.

I was unsure about how to introduce this without utterly trashing backwards compatability, but if Moodle is to have a standard stylesheet as well as a 'theme' stylesheet then I think that solves the problem (to a large degree) and I'd be quite keen to work out the remaining kinks and have this replace the current block HTML.