WeBWorK Main Forum

Pink on gray background in 2.4.9

Pink on gray background in 2.4.9

by Ted Shifrin -
Number of replies: 1
We finally just upgraded to version 2.4.9. Thanks to Mike, Jason, et al. for all the hard work! I really appreciate the students' now getting to see the answer in TeX form!

I find it almost impossible to read the dim pink lettering that is now omnipresent. But when one checks an answer, but against the gray background ("correct" or "incorrect" under Result) it's virtually illegible. Is this something we can change somewhere?
In reply to Ted Shifrin

Re: Pink on gray background in 2.4.9

by Michael Gage -
Hi TEd,

There is. I was asked to tone down the fire engine red "wrong answer" color
and I fear I over did it. :-)

Here are the lines in global.conf which control the color of the right and wrong backgrounds for the answer blanks:

# decorations for correct input blanks -- apparently you can't define and name attribute collections in a .css file
$pg{options}{correct_answer} = "{background-color:#3F3}";
# decorations for incorrect input blanks
$pg{options}{incorrect_answer} = "{background-color:#FCC}";
The color codes are referenced by hexadecimal in the order Red, Green, Blue. Something like #F55
will be redder, #F00 would be blinding. :-)

The other place where color codes are set is in the htdocs/css/math2.css file. Check the course configuration file to see which theme your course uses. math and math2 are the most common so be sure to make your change in the file corresponding to the theme you use.

Here are the lines in htdocs/css/XXX.css file which affect the color coding for some of the other warning messages which may be washing out in the grey background.

/* background styles for success and failure messages */
div.WarningMessage { background-color: #F55; padding: 3px 3px 3px 3px; }
div.ResultsWithoutError { color: inherit; background-color: #8F8; } /* green */
div.ResultsWithError { color: #F55; background-color: inherit; } /* red */
div.ResultsAlert { color: #F60; background-color: inherit; } /* orange */
span.WarningMessage { background-color: #F55; padding: 3px 3px 3px 3px; }
span.ResultsWithoutError { color: inherit; background-color: #8F8; } /* green */
span.ResultsWithError { color: #F55; background-color: inherit; } /* red */
span.ResultsAlert { color: #F60; background-color: inherit; } /* orange */
span.correct { color: inherit; background-color: #8F8; } /* green */
span.incorrect { color: #F55; background-color: inherit; } /* red */
input.correct { color:inherit; background-color: #8F8; } /* green */
input.incorrect { color;inherit; background-color: #F55; } /* red */ 

The .css files can be used to customize the colors and look of your webwork site.

-- Mike