I am trying to modify the background color of my panel header using a button that changes the color scheme of my site. The button currently functions on AFO. Below is the stylesheet for the button:
.AFO { background-color: #fff;}
.AFO h1 { color: #00159d; }
.AFO h2 { color: #00159d; }
.AFO h3 { color: #00159d; }
.AFO h4 { color: #00159d; }
.AFO h5 { color: #00159d; }
.AFO h6 { color: #00159d; }
.AFO p { color: #00159d; }
.AFO th { background-color: #c3cced; color: #00159d;}
.AFO panel-header { background-image:-webkit-linear-gradient(top, #c3cced, #00159d ) !important; color: #00159d !important;}
The HTML
<div class="panel-heading orange ct-orange" ng-class="colorScheme">Details</div>Although I have the button working, I am unable to locate the JavaScript responsible for it. When inspecting the element, I noticed that AFO is persistently added to the class, maintaining its original orange color.
So far, the only way I have successfully changed the panel color is by modifying the top line in the CSS to this:
.AFO { background-color: #fff; background-image:-webkit-linear-gradient(top, #c3cced, #00159d ) !important; color: #00159d !important;}I would appreciate any suggestions or ideas on how to achieve this. If you need more information, please let me know. I will continue my search for the button!!!
Update: Found the JavaScript!
$(function() {
$(".colorSelect").change(function() {
$("body").attr('class', '');
$(".colorSelect").each(function() {
$("body").addClass($(this).val());
});
});
});