Is it possible to only show up and down arrows without using a whole theme?

[darkred]

I've made this userscript.

(Among other things) It uses your great tablesorter fork (thank you!) to make the tables in all discography tabs sortable .
i.e. it just executes this to make the tables sortable:

function sorting(){
    $('.display.discog').tablesorter();  
}

The table sorts fine but the arrows don't show.

I know that by adding something like the following line to my script:
$('head').append('<link rel="stylesheet" type="text/css" href="http://tablesorter.com/themes/green/style.css">');
I could load one of tablesorter's themes - they are also contained in the ZIP download-
but I don't want to do that.

Would it be possible to only insert 'up' and 'down' arrows in each column header without using a whole tablesorter theme, i.e. to only use the arrow icons (from the theme) while keeping the site's style for the tables intact?

[Mottie]

Hi @darkred!

Yeah, you don't need any theme at all... here is a demo using the following:

Script

$(function () {
    $('table').tablesorter({
        cssAsc: 'up',
        cssDesc: 'down'
    });
});

CSS

table, td, th {
    border: 1px solid black;
    border-collapse: collapsed;
    padding: 2px 5px;
}
thead th {
    background-repeat: no-repeat;
    background-position: right center;
}
thead th.up {
    padding-right: 20px;
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}
thead th.down {
    padding-right: 20px;
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}

[darkred]

Thank you very much for the quick answer! I'm grateful!

[dee22]

Thank you!
Exactly what i'm looking for ;-)