Filter Tab - Background Color

Please note that this is now available as a plugin for easier installation. While you can use this document as a reference, the recommended method to add this functionality is through the plugin installation wizard. Learn more about plugins here. 

To customize the design of your component to match the filter tabs, first, you will need to make sure a filter tab is set up with a color selected. 

Once you have selected a color for the filter tab, you will navigate to your page's JavaScript tab.

Within the tab, copy and paste the code found here:

TB.render('any', function(data) {
    component = data.objId;
    cp = '[data-obj-id="' + component.replace('component_', '') + '"]';

    function bgcolor(elm) {
        $(cp).find(".table-actions").css({
            "background-color": $(elm).css("background-color"),
            "border-color": $(elm).css("border-color")
        })
    }
    if ($(cp + ' .filter-tabs > .nav.nav-tabs > li.active').length) {
        bgcolor($(cp + ' .filter-tabs > .nav.nav-tabs > li.active > a').first())
    }
    jQuery('body').on('click', cp + ' .filter-tabs > .nav.nav-tabs > li > a', function() {
        bgcolor(this);
    });
});