Removing the guillemets (») from the sidebar

For awhile, it was very trendy for web designers to use special characters such as "»" and ">" to replace bullets and such on web pages. In recent years the trend seems to be fading and I think that is a very good thing. I can think of many reasons for not using special characters as bullets, but in the case of my Premium Shop, I just don't like the way they look.

Unfortunately, there is no good way to grab hold of the guillemets in the CafePress HTML via CSS so we have to use JavaScript. The most elegant and obvious solution is to put this function into the head:

<script language="JavaScript">
    function removeGuillemets()
    {
        document.body.innerHTML = document.body.innerHTML.replace(/\xBB/g, "");
    }
</script>

We can then add this to "<BODY> tag attributes" to call the function.

onload="removeGuillemets();"

While this is very simple and certainly works, because the function is called after the page is rendered, you can actually see the guillemets for a split second on each page load before the code is executed. I'd rather the user not see them at all so instead of using the code above, I've placed the following code into "Extra Sidebar Content":

<script language="JavaScript">
    var tagList = document.getElementsByTagName('td');
    for (var i = 0; i < tagList.length; i++)
    {
        var className = tagList[i].className;
        if (className.indexOf('smallsidebartext') >= 0)
        {
            tagList[i].innerHTML = tagList[i].innerHTML.replace(/\xBB/g, ""); 
        }
    }
</script>

This code will execute as the page is rendered so you never actually see the guillemets. It did get slightly more complicated though. We can't just modify document.body.innerHTML while the page is rendering because it will cause the browser to stop rendering the page before it is complete. We have to make sure that we only modify elements that have already been completely rendered. As such, our code has to come after the guillemets. It then has to look back at the portion of the page that is already rendered and find them. Luckily, they all live inside of table cells with the class "smallsidebartext" so finding them isn't too difficult. Here is the code again with notes:

<script language="JavaScript">
     var tagList = document.getElementsByTagName('td');¹
     for (var i = 0; i < tagList.length; i++)²
     {
           var className = tagList[i].className;³
           if (className.indexOf('smallsidebartext') >= 0)⁴
           {
                tagList[i].innerHTML = tagList[i].innerHTML.replace(/\xBB/g, ""); ⁵
           }
     }
</script>

1) Find all of the table cells (<td>) on the page.
2) Loop over the table cells
3) Get the class name for the current cell
4) If the class name contains "smallsidebartext" do step #5
	5) Replace any guillimets inside the table cells with nothing

Now our sidebar no longer has »'s marking each section name leaving us with a page that looks like this: