WeBWorK Main Forum

Pink on gray background in 2.4.9

Re: Pink on gray background in 2.4.9

by Michael Gage -
Number of replies: 0
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