Change the color of sub-sections in the sidebar

On my CafePress shop, I chose not to display sub-sections in the sidebar. However, I saw this post in the CafePress community forum asking how to change the color of sub-section links. It's not an easy thing to do on the surface. The table cells containing the sub-section links have the same css class as the cells containing the parent sections.

After looking at the source though, I found a way to adapt the JavaScript that I used to remove guillemets from the sidebar. The table cells for the sub-sections have a colspan of 11. The main sections have a colspan of 12.

To use the adapted code, place this in your 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].colSpan < 12 && 
            tagList[i].colSpan > 1)
        {
            tagList[i].className = tagList[i].className + " " + "subcat";
        }
    }
</script>

This looks very similar to the code for removing guillemets but instead of just checking the class to make sure we're in the sidebar, we also check to see if the tag has a colspan greater than 1 and less than 12. We could just check for a colSpan of 11 but I wasn't sure if it would display a third level of sub-sections with a colSpan of 10 because I don't have any sections that are three levels deep. Sure... I could have taken the time to create another sub-section but I'm feeling lazy so I didn't. After the code identifies a table cell with a sub-section link in it, it then adds a class to the table cell of "subcat".

To style these links and change their color, we now can use CSS in our head section like this:

<style type="text/css">
    td.subcat a
    {
        color:red;
    }
</style>

The CSS above would make your links red but you can easily style them however you would like. This little JavaScript code snippet can be adapted to all sorts of different situations where the CafePress HTML does not define CSS classes on the elements you want to style. If you adapt it to a new purpose, send me an e-mail and tell me about it!

Note: If the above snippet does not work for you, try placing the code in your footer instead of the extra sidebar content. Some of the pre-built CafePress templates include the sidebar after the extra sidebar content. That's no good because the code will execute before there is anything to alter.