Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-31008

Fix up the CSS used to display dimmed objects.

    XMLWordPrintable

Details

    • Bug
    • Status: Closed
    • Critical
    • Resolution: Fixed
    • 2.0.8, 2.1.5, 2.2.2, 2.3
    • 2.0.9, 2.1.6, 2.2.3
    • Themes, Usability
    • MOODLE_20_STABLE, MOODLE_21_STABLE, MOODLE_22_STABLE, MOODLE_23_STABLE
    • MOODLE_20_STABLE, MOODLE_21_STABLE, MOODLE_22_STABLE
    • Hide

      note: CSS knowledge needed for test.

      1) Go to the courses weekly outline.
      2) Add a resource - label.
      3) Enter in Label text. Set visible to hide.
      4) Check to make sure that text is grey.
      5) Edit the label and change the text colour to red.
      6) save and return to course - ensure that the label is now dimmed.

      Please test in IE as well as other browsers.

      A) add custom css to your theme using 'dimmed_category' and check its not dimmed but is actually grey (#AAA) when using 'dimmed_category' on 'a' (Anchors)

      Show
      note: CSS knowledge needed for test. 1) Go to the courses weekly outline. 2) Add a resource - label. 3) Enter in Label text. Set visible to hide. 4) Check to make sure that text is grey. 5) Edit the label and change the text colour to red. 6) save and return to course - ensure that the label is now dimmed. Please test in IE as well as other browsers. A) add custom css to your theme using 'dimmed_category' and check its not dimmed but is actually grey (#AAA) when using 'dimmed_category' on 'a' (Anchors)

    Description

      As part of MDL-26712 the styles for dimmed objects including categories, labels etc were changed from being a grey colour to being 50% transparent.
      This was a smart solution to the issue with labels that was being addressed however it has ramifications in that those dimmed classes are used all over the place by both ourselves (core) and others.
      There's no telling where they were used and the new styles, particularly the height:1% are liable to cause problems.
      As well as this the solution implemented is not backwards compatible, if third party theme's have overridden dimmed font colour they will have been left with a faded version of the colour they used.

      On top of that is that we avoid adding these sort of styles to the base theme unless absolutely 100% necessary.
      The main reasons for this being:

      1. The design of base - think of it like white bread - it is meant to be kept plain and simple, nothing exciting happens there unless it is 100% required.
      2. Cross browser comparability and the rule complexities used to solve it often lead to browser variations and problems for third party dev's in overriding the rules. This in part relates to the design of the base theme, we keep things simple so that it is easy to override. Remember customising a theme is the first thing people look to do in establishing a site.
      3. Usability issues, in regards to opacity especially in area's containing user content when background colours and font colours may not be clear with diminished opacity.

      In regards to these changes as mentioned earlier I think the solution implemented is a good solution for hidden labels. The problem is really that rather than implement it to target hidden labels specifically, the general css for dimming was changed.
      The introduction of the 1% height also needs to be reviewed... certainly at the moment that is the single biggest problem.

      Attachments

        Issue Links

          Activity

            People

              lazydaisy Mary Evans
              samhemelryk Sam Hemelryk
              Sam Hemelryk Sam Hemelryk
              Aparup Banerjee Aparup Banerjee
              Michael de Raadt Michael de Raadt
              Votes:
              2 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                14/May/12