Hi all,
I am introduced a function to Change existing color code to a new color code across the application in a single step, which in terms will not replace your existing color in source code but it does the magic of displaying new color in place of old color.
Add this function into your page at the header. Then choose an existing color in your application and pass it as a first parameter and the new color code in the second parameter. This function will change all existing colors with new one's in a fraction of seconds.
In general, if you want to change each Color and you may not aware of the impact your change will create on system. Using this function, it makes no harm to your code and it will change the design as you like.
First Parameter : Find color Code
Second Parameter : Replace Color Code
Put this function inside the <head></head> after included the jquery library. The below i have given an example. so that you can understand very easily.
For example: You have downloaded a template from themeforest or any other source..
The existing template colors you want to change, so at this point of scenario you can change the color just by putting the below code into your html or php header files.
Note: This function requires jquery library.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
// Call like this for each color attribute you want to replace
// Code by Manikanta
$(document).ready(function(){
function colorReplace(findHexColor, replaceWith) {
// Convert rgb color strings to hex
function rgb2hex(rgb) {
if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
// Select and run a map function on every tag
$('*').map(function(i, el) {
// Get the computed styles of each tag
var styles = window.getComputedStyle(el);
// Go through each computed style and search for "color"
Object.keys(styles).reduce(function(acc, k) {
var name = styles[k];
var value = styles.getPropertyValue(name);
if (value !== null && name.indexOf("color") >= 0) {
// Convert the rgb color to hex and compare with the target color
if (value.indexOf("rgb(") >= 0 && rgb2hex(value) === findHexColor) {
// Replace the color on this found color attribute
$(el).css(name, replaceWith);
}
}
});
});
}
// Call like this for each color attribute you want to replace
//Example Usage colorReplace(findHexColor, replaceWith)
colorReplace("#afd600", "#afd600");
});
</script>
</head>
<body>
</body>
</html>
For any doubts or suggestion or any enhancement suggestions you wanna to give to me you can get me on live chat by my email:manikantak49@gmail.com
Feel free to contact me at any time..
colorReplace(findColorCode, replaceWithColorCode)
I am introduced a function to Change existing color code to a new color code across the application in a single step, which in terms will not replace your existing color in source code but it does the magic of displaying new color in place of old color.
How it works:-
Add this function into your page at the header. Then choose an existing color in your application and pass it as a first parameter and the new color code in the second parameter. This function will change all existing colors with new one's in a fraction of seconds.
Advantages:-
In general, if you want to change each Color and you may not aware of the impact your change will create on system. Using this function, it makes no harm to your code and it will change the design as you like.
Second Parameter : Replace Color Code
Put this function inside the <head></head> after included the jquery library. The below i have given an example. so that you can understand very easily.
For example: You have downloaded a template from themeforest or any other source..
The existing template colors you want to change, so at this point of scenario you can change the color just by putting the below code into your html or php header files.
Note: This function requires jquery library.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
// Call like this for each color attribute you want to replace
// Code by Manikanta
$(document).ready(function(){
function colorReplace(findHexColor, replaceWith) {
// Convert rgb color strings to hex
function rgb2hex(rgb) {
if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
// Select and run a map function on every tag
$('*').map(function(i, el) {
// Get the computed styles of each tag
var styles = window.getComputedStyle(el);
// Go through each computed style and search for "color"
Object.keys(styles).reduce(function(acc, k) {
var name = styles[k];
var value = styles.getPropertyValue(name);
if (value !== null && name.indexOf("color") >= 0) {
// Convert the rgb color to hex and compare with the target color
if (value.indexOf("rgb(") >= 0 && rgb2hex(value) === findHexColor) {
// Replace the color on this found color attribute
$(el).css(name, replaceWith);
}
}
});
});
}
// Call like this for each color attribute you want to replace
//Example Usage colorReplace(findHexColor, replaceWith)
colorReplace("#afd600", "#afd600");
});
</script>
</head>
<body>
</body>
</html>
For any doubts or suggestion or any enhancement suggestions you wanna to give to me you can get me on live chat by my email:manikantak49@gmail.com
Feel free to contact me at any time..
0 comments:
Post a Comment