cssgoogle-chromestylish

Alter background-color of accepted answer box

I am trying to set the color of accepted-answer box on Cross Validated SE exactly equal (or close) to Stack Overflow. I think SO's style is easier to visualize.

The problem is that I am not being able to change the color of the 'Normal distribution' that circumscribes the number of answers on the question. See picture below.

enter image description here

I have tried to hover the mouse over the format and inspect the element to visualize the part of the code that changes this feature, but I did not get it.

I am using Stylish on Chrome and what I have got so far is:

.answered-accepted {
    background-color: rgb(117, 132, 92) !important;
    color: #e1e818
}

How can one change that background color?

Solution

  • If it was me, I'd just forget that "Normal distribution" graphic and set the whole background:

    div.status.answered-accepted, div.status.answered-accepted strong {
    background: rgb(117, 132, 92) !important;
    color: #e1e818 !important;
}

    But, if you really want to change that graphic, do the following:

    1. Download the relevant sprite.

    2. Crop and edit the image: new graph sprite

    3. Upload the image to your server or Base-64 encode it.

    4. The new CSS:

      div.status.answered-accepted strong {
    background-image: url(data:image/gif;base64,R0lGODlhSQAdANUAAGh3XHSCacPJvpymlODj3YSRe7G5q9nd1mp5Xuvt6q21ppGciM3SyX2Kc7rBtYyYg218Yubo5KStnff49tve2MfNw3B+ZHiFbZehju/x7tHWzrS7rr3Dt4CMdo2ZhOnr58rQxu/377C4quPl4NTZ0YmUf5SfjN3h27i/ssDGu5ytlMXOvQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUABMALAAAAABJAB0AAAblwIlwSCwaj8ikcslsOp/QqDQp8DRKqMx0yy1GJBaAGLA4dM9STWHMDlTQcCbjwq5bOPG8UUOv21N6gScdfoUXDIFxGR6FjR1miWcSjZQeCZFcDgiUlAqYU3OclHefUCdropQXJKVNGQOpog8frUsGm7GcErVJFQG5oggbvEaDwKkWIMRDCQvHsavLE5PPsQURxAoQ1bkYWq3a3LkIA9+YCrjiseSXkejqzxjteQkS6fDACyN5JCX44h0Qnfkg4tc/cRYUYJsywoG/g/gaGCDAJEMECgw2mDAI8SAEDwoqHIhgTtqnIAA7) !important;
    color: #e1e818 !important;
}