Could you please advise the test environment?

Thanks,

Yu

Original description: Expand/collapse block buttons - These buttons are not visible under Windows High Contrast Black settings. Need to ensure that these are visible under all settings. High.

block hide/show button image is stored in CSS as background behind a clearer, it is switched using JS trick named elementToggleHide()
the problem is that background images are "ignored" after disabling the colors in accessibility settings in IE - the theme does not matter here

Solution:
hmmm...
some other JS trick that would manipulate normal image?
Or two buttons and hiding them alternatively?

In anycase my JS knowledge is not good enough for this task.

Nick

1 file affected - theme/standard/styles_color.css

Do NOT commit yet - I am taking advice! Many thanks
Nick

IMPORTANT: not complete!

-"The white border is quite disturbing in standardwhite" - I thought the effect with this theme was barely noticeable (white on pale grey sideblock header background). I agree that other themes - cornflower, wood, chameleon?, and other user's themes would need modifying, so not ideal.

• "Why not create a real high contrast theme" - yes, that could be worthwhile ( http://moodle.org/mod/forum/discuss.php?d=85119 ) but is not sufficient on its own, because
  1. many users who need high contrast, need it across their system not just in the browser (and hiding blocks may be very useful for these people to reduce screen clutter);
  2. it needs to be configured per install;
  3. users need to know about it.

–
On to my solution:
-It replaces <a href="#" onclick=".."><img src="spacer.gif" alt="[generic text]" /></a>, with
<input type="image" onclick=".." src="switch_minus.gif" alt="[specific text]" />
-The foreground image stays visible in "Windows High Contrast" mode.
-The SRC and ALT attributes are switched in Javascript.
The images can be themed using "smartpix": Admin - Miscellaneous - Experimental - smartpix (manipulates $CFG>pixpath).
-Specific text, example "Show Latest News block", "Hide Latest News block".
-Text is multi-language - passed in via PHP.

The attached patch is not final (it contains a bug to do with cookies/initialisation). It affects 6 files:
-blocks/moodleblock.class.php - block_base::_title_html method.
-lib/javascript-static.js - elementToggleHIde, elementCookieHide functions.
-lib/weblib.php - print_side_block_end function probably needs changing.
-lang/en_utf8/access.php
-theme/standard/styles_color.css - removing rules, including border hack.
-theme/standard/styles_layout.css

Comments welcome! Thanks, Nick

Fix: now elementToggleHide Javascript function knows about the "togglehide_" ID prefix.

I have tested, with mouse and keyboard (TAB, ENTER):

• IE 6, Firefox 2/Win, Safari, Opera 9.

Can I commit?

Is your JavaScript solution the only way to go? It looks so much more complicated than the simple CSS approach.

And do your findings imply that icon handling can't be done with CSS? I ask because there have been discussions to change icon handling in Moodle to CSS background images.

–
Hi Urs, thanks for the vote!

Yes, I believe Javascript is the only solution, and it's not too complicated (the original buttons used Javascript anyway).

And no, I don't think significant images like icons should be CSS background images as there is a danger they will "disappear", in Windows High Contrast Mode, user style sheets and similar situations. This would be a backwards step. Smartpix (Admin - Miscellaneous - Experimental - smartpix) is a way to theme foreground images.
Where is the discussion about CSS icons?

Thanks Nick

Martin, let me know if you don't agree with the fix.
Thanks.

Fix transparency! (Thanks sam - on GIMP)
-pix/t/switch_minus.gif
-pix/t/switch_plus.gif

Remove reference to 'root' pix as background, that is: url(../../pix/t/switch_minus.gif),
-theme/metal/colors.css
-theme/chameleon/user_styles.css -Urs, OK?
-theme/formal_white/fw_color.css
-theme/custom_corners/user_styles.css
-theme/oceanblue/styles_color.css

Fix CSS selectors - these themes override the icons - need to use "Smartpix":
-theme/orangewhite/styles_layout.css
-theme/orangewhite/styles_color.css -icons need moving to orangewhite/pix/t/
-theme/wood/styles_color.css -Eloy, OK?

I have tested Wood theme, with Smartpix in normal mode - the black on transparent Wood +- icons are correctly substituted.

Notes,
-The folder icons in the Site Administration block disappear in WHCB/high contrast - they aren't important so OK.
-For WHCB/high contrast the safest option is plain black on white icons, no transparency, but this is not ideal for theming.

under wood, with smartpix disabled, the grey pixs are showed, correct? Only if we enable smartpix the black ones are showed.

And that's caused because they aren't anymore background pixs (css) but explicit ones (html), correct?

IMO the grey pixs look a bit annoying under wood but I think that's not important so I would suggest to:

1) Disable current .hide-show-image selectors in wood (they aren't needed now that pixs are html).
2) Put a note in theme README in order to have custompix enabled for better normal browsing.

Some day (2.0), with custompix becoming the default for all themes.

Perhaps the same 1) & 2) must be done in all themes with custom minus/plus background pixs, because they aren't going to be used anymore, isn't it?

Ciao

I've committed the themes cleanup - details above, with explanations in the readme for 'wood' and orangewhite.
Finally fixed.

With the + - buttons perfectly contrasted, of course.

Ciao