Replace every instance of a color in a fully loaded page using javascript or jquery

Question

I manage a baseball organization's web site that uses the SportsEngine platform. This platform gives me the ability to specify ONE primary color and ONE secondary color to be used throughout the entire site. We are sharing this account with the travel baseball organization that serves our recreation baseball players. The recreation program is branded with blue and red... the travel program is branded with navy blue and grey. I like the theme and all the objects I am able to create look just fine, but I really need the travel pages to use navy blue (#00003C) where there currently is blue (#000080) and gray (#949494) where there currently is red (#DD0000).

The platform allows me to insert code objects, including HEAD code.

I have been trying to come up with jQuery or native javascript that will ultimately traverse the entire document and replace any occurrence of #000080 with #00003C. I have been partially successful, but nothing I do seems to get all of them. I can inspect and add css for the individual elements not getting modified, but this doesn't serve me well now or into the future.

While I am programmer for a living (C), my experience with jQuery and javascript is very limited.

I have tried both solutions here... Replacing Specific color code in css using jquery

I have also tried things like....

<script>

var ssllj = jQuery.noConflict(true);

ssllj(document).ready(function () {
    ssllj('*').filter(function() { 
        return ssllj(this).css('background-color') == "rgb(0, 0, 128)" 
    }).css('background-color', '#00003C')

    ssllj('*').filter(function() { 
        return ssllj(this).css('background') == "rgb(0, 0, 128)" 
    }).css('background', '#00003C')

    ssllj('*').filter(function() { 
        return ssllj(this).css('color') == "rgb(0, 0, 128)" 
    }).css('color', '#00003C')
});

</script>

I have also tried some other things. The results under all circumstances is consistent... there are many objects that remain on the page where the color has not changed. The ones that are not changed are always the same.

How can I actually get every occurrence of the color changed? What types of things would fail to be modified with the above solutions?

Usually branding is done via CSS. I can't imagine that's not the case so you could simply override the css instead of using jquery. — Erik Philips, Feb 01 '18 at 22:58
The CSS files I cannot edit, they are vast and I cannot predict what they will change in them. Nor do I have the time to reverse engineer their platform. As a user of the system I simply supply my primary color and secondary color. — clansing, Feb 01 '18 at 23:03
If I manually open the CSS files I see them referencing/using, I find my primary color appearing over a hundred times — clansing, Feb 01 '18 at 23:05
I have thought about making copies of the CSS and search/replace... but there are two problems with that 1) they can change the code at any time 2) they dont give me a place to host files, so I would have to find a place to host the CSS files I create. — clansing, Feb 01 '18 at 23:07
hmmm... you may try to find all stylesheets and replace your color in css text :-) — Andrii Muzalevskyi, Feb 01 '18 at 23:10
I don't know how to do that on client side. Ultimately that is what I want to do and trying to do. — clansing, Feb 01 '18 at 23:14
1. Get css content of first stylesheet as `document.querySelectorAll('style')[0].innerText` 2. Replace 3. Put new css on the page http://cwestblog.com/2013/11/07/javascript-create-stylesheet/ — Andrii Muzalevskyi, Feb 01 '18 at 23:14
I can't see anything inherently wrong in your code. Also, since you tried multiple solutions and they all rendered the same result, perhaps the problem might not be the code. On the elements that haven't changed color, can you inspect those elements and verify their color is `#000080`? That's where I'd look next. — user9263373, Feb 01 '18 at 23:15
if styles are added as `` check this answer please https://stackoverflow.com/questions/24287295/can-i-get-text-source-of-link-stylesheet — Andrii Muzalevskyi, Feb 01 '18 at 23:18
@clansing Ok, another suggestion is to remove the function that sets `.css('background', '#00003C')`. I don't know if it will help, but it's extraneous since `background` itself is not a css property but a means for using shorhand syntax to set multiple background properties. https://www.w3schools.com/css/css_background.asp — user9263373, Feb 01 '18 at 23:34
are the style sheets on the same domain? I' thinking into this direction https://stackoverflow.com/questions/13528512/modify-a-css-rule-object-with-javascript — Thomas, Feb 01 '18 at 23:42
andrey and thomas were certainly on the right track... I got that working well, but it was taking as high as 10 seconds in IE to iterate over the 4 style sheets and find/replace the colors, obviously not acceptable, so I went in another direction — clansing, Feb 06 '18 at 04:10

score 0 · Accepted Answer · answered Feb 06 '18 at 04:37

I still don't understand why my initial solution wasn't working well. After messing around a lot it was like it was timing out and not finishing. Some page loads more would be replaced than others. Any way... Andrey and Thomas suggested interfacing with document.styleSheets (cssRules/rules) and that sent me in the right direction. I struggled with a few cross browser hiccups and ultimately got it working the way I wanted with the following...

<script>
var ssllj = jQuery.noConflict(true);

function ssytb_color_change(sheet) {
    var rules = [];
    var colors = [
       ["rgb(0, 0, 128)", "rgb(0, 0, 60)"],       /* Change blue (#000080) to navy blue (#00003C) (rgb format) */
       ["rgb(221, 0, 0)", "rgb(148, 148, 148)"],  /* Change red (#DD0000) to gray (#949494) (rgb format)*/
       ["#000080", "#00003C"],                    /* Change blue (#000080) to navy blue (#00003C) */
       ["#dd0000", "#949494"]                     /* Change red (#DD0000) to gray (#949494) */
    ];

    /* Get the rules from the sheet */
    if (document.styleSheets[sheet].cssRules) {
        rules = document.styleSheets[sheet].cssRules;
    }
    else if (document.styleSheets[sheet].rules) {
        rules = document.styleSheets[sheet].rules;
    }
    else {
        return;
    }

    /* Iterate over all the rules in the sheet */
    for (var rule in rules) {
         /* Make sure its a style rule */
         if (rules[rule].type == CSSRule.STYLE_RULE) {
            /* Iterate over the colors we need to replace */
            for (var color in colors) {
                /* Check if the color appears in the rule */
                if (rules[rule].cssText.lastIndexOf(colors[color][0]) > 0) {
                    /* Replace background-color if necessary */
                    if (rules[rule].style.backgroundColor == colors[color][0]) {
                        rules[rule].style.backgroundColor = colors[color][1];
                    }
                    /* Replace color if necessary */
                    if (rules[rule].style.color == colors[color][0]) {
                        rules[rule].style.color = colors[color][1];
                    }
                    /* Replace border-bottom-color if necessary */
                    if (rules[rule].style.borderBottomColor == colors[color][0]) {
                        rules[rule].style.borderBottomColor = colors[color][1];
                    }
                    /* Replace border-top-color if necessary */
                    if (rules[rule].style.borderTopColor == colors[color][0]) {
                        rules[rule].style.borderTopColor = colors[color][1];
                    }
                    /* Replace border-left-color if necessary */
                    if (rules[rule].style.borderLeftColor == colors[color][0]) {
                        rules[rule].style.borderLeftColor = colors[color][1];
                    }
                    /* Replace border-right-color if necessary */
                    if (rules[rule].style.borderRightColor == colors[color][0]) {
                        rules[rule].style.borderRightColor = colors[color][1];
                    }
                    // /* Replace box-shadow-color if necessary */
                    if (rules[rule].style.boxShadow.indexOf(colors[color][0]) >=0) {
                        rules[rule].style.boxShadow = rules[rule].style.boxShadow.replace(colors[color][0], colors[color][1]);
                    }
                }
            }
        }
    }
}

ssllj(document).ready(function () {
    ssytb_color_change(1);
    ssytb_color_change(2);
    ssytb_color_change(3);
    ssytb_color_change(4);
});
</script>

BUT....

This was taking 10 seconds to execute in IE. Only a little over a second in Chrome, but still visible. I manipulated the function in various ways from the form its presented in above, but couldn't get it to take much less than 10 seconds.

So I gave up.

But then had a thought to implement a function that spits out the CSS that needed modification, which I place onto the pages via the platforms Code page element. The idea here is that I will just have to execute this every once in a while to make sure it stays current with whatever the SportsEngine development staff changes.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var ssllj = jQuery.noConflict(true);

ssllj(document).ready(function () {
   var output = "";
   output = output + ssytb_get_css(1);
   output = output + ssytb_get_css(2);
   output = output + ssytb_get_css(3);
   output = output + ssytb_get_css(4);
   ssllj('.ssytb_css').text(output);
});


function ssytb_get_css(sheet) {
    var output = "";
    var modifiedCssText = "";
    var rules = [];
    var colors = [
       ["rgb(0, 0, 128)", "rgb(0, 0, 60)"],       /* Change blue (#000080) to navy blue (#00003C) (rgb format) */
       ["rgb(221, 0, 0)", "rgb(148, 148, 148)"],  /* Change red (#DD0000) to gray (#949494) (rgb format)*/
       ["#000080", "#00003C"],                    /* Change blue (#000080) to navy blue (#00003C) */
       ["#dd0000", "#949494"]                     /* Change red (#DD0000) to gray (#949494) */
    ];

    /* Get the rules from the sheet */
    if (document.styleSheets[sheet].cssRules) {
        rules = document.styleSheets[sheet].cssRules;
    }
    else if (document.styleSheets[sheet].rules) {
        rules = document.styleSheets[sheet].rules;
    }

    /* Iterate over all the rules in the sheet */
    for (var rule in rules) {
        /* Check for a style rule */
        if (rules[rule].type == CSSRule.STYLE_RULE) {
            /* Iterate over the colors we need to replace */
            for (var color in colors) {
                /* Check if the color appears in the rule */
                if (rules[rule].cssText.indexOf(colors[color][0]) > 0) {
                    /* If it has content then remove it (a lot of these are font awesome characters and dont print well) */
                    rules[rule].style.removeProperty("content");
                    /* Replace all of the colors that may appear */
                    modifiedCssText = rules[rule].cssText;
                    for (color in colors) {
                        modifiedCssText = modifiedCssText.split(colors[color][0]).join(colors[color][1]);                   
                    }
                    /* Add modified rule to our output */
                    output = output + " " + modifiedCssText;
                    break;
                }
            }
        }
    }

    return output;
}
</script>

Replace every instance of a color in a fully loaded page using javascript or jquery

1 Answers1