Moodle
  1. Moodle
  2. MDL-31008

Fix up the CSS used to display dimmed objects.

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Critical Critical
    • Resolution: Fixed
    • Affects Version/s: 2.0.8, 2.1.5, 2.2.2, 2.3
    • Fix Version/s: 2.0.9, 2.1.6, 2.2.3
    • Component/s: Themes, Usability
    • Labels:
    • Testing Instructions:
      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)
    • Affected Branches:
      MOODLE_20_STABLE, MOODLE_21_STABLE, MOODLE_22_STABLE, MOODLE_23_STABLE
    • Fixed Branches:
      MOODLE_20_STABLE, MOODLE_21_STABLE, MOODLE_22_STABLE
    • Pull from Repository:
    • Pull Master Branch:
    • Rank:
      37412

      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.

        Issue Links

          Activity

          Sam Hemelryk created issue -
          Sam Hemelryk made changes -
          Field Original Value New Value
          Priority Minor [ 4 ] Major [ 3 ]
          Michael de Raadt made changes -
          Fix Version/s STABLE backlog [ 10463 ]
          Labels triaged
          Ann Adamcik made changes -
          Attachment screenshot-1.jpg [ 26278 ]
          Sam Hemelryk made changes -
          Priority Major [ 3 ] Critical [ 2 ]
          Henning Bostelmann made changes -
          Link This issue has been marked as being related by MDL-30524 [ MDL-30524 ]
          Mary Evans made changes -
          Assignee Patrick Malley [ ptrkmkl ] Mary Evans [ lazydaisy ]
          Mary Evans made changes -
          Link This issue duplicates MDL-30524 [ MDL-30524 ]
          Mary Evans made changes -
          Link This issue duplicates MDL-30524 [ MDL-30524 ]
          Mary Evans made changes -
          Status Open [ 1 ] Development in progress [ 3 ]
          Mary Evans made changes -
          Status Development in progress [ 3 ] Peer review in progress [ 10013 ]
          Peer reviewer samhemelryk
          Mary Evans made changes -
          Sam Hemelryk made changes -
          Status Peer review in progress [ 10013 ] Development in progress [ 3 ]
          Mary Evans made changes -
          Status Development in progress [ 3 ] Waiting for integration review [ 10010 ]
          Mary Evans made changes -
          Link This issue will help resolve MDL-30524 [ MDL-30524 ]
          Mary Evans made changes -
          Link This issue has been marked as being related by MDL-30524 [ MDL-30524 ]
          Sam Hemelryk made changes -
          Currently in integration Yes [ 10041 ]
          Aparup Banerjee made changes -
          Status Waiting for integration review [ 10010 ] Integration review in progress [ 10004 ]
          Integrator nebgor
          Aparup Banerjee made changes -
          Status Integration review in progress [ 10004 ] Waiting for testing [ 10005 ]
          Affects Version/s 2.2.2 [ 11552 ]
          Affects Version/s 2.1.5 [ 11553 ]
          Affects Version/s 2.0.8 [ 11554 ]
          Affects Version/s 2.3 [ 10657 ]
          Affects Version/s 2.2 [ 10656 ]
          Fix Version/s 2.0.9 [ 12051 ]
          Fix Version/s 2.1.6 [ 12052 ]
          Fix Version/s 2.2.3 [ 12053 ]
          Fix Version/s STABLE backlog [ 10463 ]
          Aparup Banerjee made changes -
          Testing Instructions 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)

          Mary Evans made changes -
          Testing Instructions 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)

          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)

          Michael de Raadt made changes -
          Tester salvetore
          Michael de Raadt made changes -
          Status Waiting for testing [ 10005 ] Testing in progress [ 10011 ]
          Michael de Raadt made changes -
          Status Testing in progress [ 10011 ] Tested [ 10006 ]
          Eloy Lafuente (stronk7) made changes -
          Status Tested [ 10006 ] Closed [ 6 ]
          Resolution Fixed [ 1 ]
          Currently in integration Yes [ 10041 ]
          Integration date 15/Mar/12

            People

            • Votes:
              2 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: