CRM-15515 Color Mayhem (AKA Fifty Shades of Grey)

    Details

    • Versioning Impact:
      Patch (backwards-compatible bug fixes)
    • Documentation Required?:
      Developer Doc
    • Funding Source:
      Needs Funding

      Description

      There are a ton of colors in CiviCRM. This makes it chaotic-feeling, and more practically, it means that adjusting colors to match your theme is very difficult.

      My feeling is that the differences between #52534D, #5c5c59, and #5D5D5D, for example, are imperceptible. However, if you decided to replace the charcoal color everywhere, you'd have to track down all three.

      My colleague Kara has documented all the colors in civicrm.css from 4.4.6 and put them into a spreadsheet. I took the spreadsheet and generated a page (attached) demonstrating the colors, listed by order in civicrm.css, by a rough order of colors, and alphabetically by selector.

      I'd like to propose replacing these with a much smaller palette of colors, bringing the current 92 down to something under 20.

        Attachments

        1. Civi Color Index-1.ods
          154 kB
          Andrew Hunt
        2. colorsofcivicrm.html
          135 kB
          Andrew Hunt
        3. newcolors.html
          31 kB
          Andrew Hunt

          Issue Links

            Activity

            [CRM-15515] Color Mayhem (AKA Fifty Shades of Grey)
            Andrew Hunt added a comment -

            I generated a new HTML page that displays like a CSS file with all the selectors for a given attribute/color combination. This is what we'll use for a client in the short run, and I think it provides another good display for evaluating the colors.

            Andrew Hunt added a comment - - edited

            Uploaded a corrected and combined version of the HTML file and the spreadsheet. There were a couple of errors in attempting to convert three-digit to six-digit hex numbers.

            (I don't have admin ability to do this, but could someone please remove the older version of Civi Color Index-1.ods, the older colorsofcivicrm.html, and newcolors.html? Thanks!)

            Coleman Watts added a comment -

            Andrew, I think there a lot of things wrong with civicrm.css, not just the color scheme. For one thing, the fact that there even is a file named civicrm.css is a red flag (life would be saner if that monolithic file was split up in a few ways). But I've been kind of waiting to see how bootstrap integration is going to shake out before spending too much time refactoring it.
            What you've done seems worthwhile though, and I think paring down our palette would be a good first move toward cleaning up this mess.

            Coleman Watts added a comment -

            colorsofcivicrm.html is interesting but not terribly useful because it includes the same colors over and over again. Something like a chart of each color and how many times it is repeated in the file (ignoring case) would be awesome.

            Andrew Hunt added a comment -

            Yeah, it's definitely not a big-picture fix, but my hope is that it wouldn't be too crazy to pick some colors and then do a giant find-and-replace as a stop-gap.

            Andrew Hunt added a comment -

            Re: the chart of each color and how many times it's used, that's the goal of the "CSS-style" section on colorsofcivicrm.html. You get all the selectors that use a certain color for a certain property, followed by an example of the color. Each of the 149 color/property combinations there is unique. We're using it for a client who wants colors changed: you just need to copy a section, change the color, and tack it onto your theme CSS to replace the color everywhere it occurs for that property (that's what prompted this whole thing).

            John K. added a comment - - edited

            More like 255 shades of grey. It would be great to see a PR that standardised at least some of these colours in the default theme. I agree with Coleman that this is not the biggest issue with Civi's theme, but it is still useful to chip away at these issues.

            Sassy variables anyone? ;]

            Chris Burgess added a comment - - edited

            Has anyone looked yet to see if any/much of this is coming in via the assorted packages included, or is it all civicrm's CSS?

            There are ~170 CSS files in packages currently, but not sure what's actually used from there.

            +1 for using SASS to build the shipped .css file, and shipping alongside it.

            Andrew Hunt added a comment -

            This is actually all from the single civicrm.css file. Some relate to included packages, but the CSS that comes with the packages is totally separate from this. SASS is totally the way to go about it, but it'll be a project. Part of me wonders whether it might be best to grandfather civicrm.css and then have new things go in a new system.

              People

              • Assignee:
                Andrew Hunt
                Reporter:
                Andrew Hunt

                Dates

                • Created:
                  Updated: