I need to make that when you use a color picker the hover styling would work too. So far I've only got background and border bottom working here is the code below (uses JQuery):
var customElements2 ="#search .submit_input, .reputation.positive, .members li.positive";
var customElements = ".maintitle, #community_app_menu > li.active > a, .ipsSideBlock h3, #sc-topbar";
var customText = "#user_navigation a, #main_search, #search_options, #community_app_menu div li:hover > a, #community_app_menu li:hover > a, #community_app_menu li.click.click_active > a, #more_apps_menucontentul li > a:hover, #community_app_menu > li.active > a";
jQuery('#colorpicker').ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
jQuery(el).val(hex);
jQuery(el).ColorPickerHide();
jQuery(el).css("borderBottomColor", "#" + hex);
jQuery(el).css("backgroundColor", "#" + hex);
jQuery(customElements).css("border-bottom-color", "#" + hex);
jQuery(customElements2).css("background-color", "#" + hex);
jQuery(customText).css("color", "#" + hex);
jQuery.cookie('customcolor',hex,{ expires: 365, path: '/'});
},
onBeforeShow: function () {
jQuery(this).ColorPickerSetColor(this.value);
},
onChange: function (hsb, hex, rgb) {
jQuery(customElements).css("border-bottom-color", "#" + hex);
jQuery(customElements2).css("background-color", "#" + hex);
jQuery(customText).css("color", "#" + hex);
jQuery.cookie('customcolor',hex,{ expires: 365, path: '/'});
}
})
.bind('keyup', function(){
jQuery(this).ColorPickerSetColor(this.value);
});
if ( (jQuery.cookie('customcolor') != null)) {
jQuery(customElements).css("border-bottom-color", "#" + jQuery.cookie('customcolor'));
jQuery(customElements2).css("background-color", "#" + jQuery.cookie('customcolor'));
jQuery(customText).css("color", "#" + jQuery.cookie('customcolor'));
jQuery("#colorpicker").val(jQuery.cookie('customcolor'));
}
else{
jQuery(customElements).css("border-bottom-color","#C42323");
jQuery(customText).css("color","#C42323");
}
});