Home News Contact Us Forum About Us Demos Products F.A.Q.
Shopping Cart
You currently have 0 items in your cart.


Recent Events
  • 18/11/2017 Black Friday is coming

    Don't wait BLACK FRIDAY, use FRIDAY17 coupon code to get 35% discount for all our extensions right now.

  • 05/09/2017 BIG Autumn SALE

    Use AUTUMN17 coupon code to buy our WordPress or Joomla! extensions with 25% discount. Hurry up! The offer is valid till 11 September.


2Checkout.com, Inc. is an authorized retailer of goods and services provided by ARI Soft. 2CheckOut




Follow us on twitter



Welcome, Guest
Please Login or Register.    Lost Password?

Alter style for JTableSorter?
(1 viewing) (1) Guest
Go to bottomPage: 12
TOPIC: Alter style for JTableSorter?
#2474
Alter style for JTableSorter? 8 Years, 2 Months ago Karma: 0
Hi there,

I've tried searching for the answer to this question, but cannot find it, so apologies if this has already been answered elsewhere

Basically, I'd like to know if it's possible to alter the css for the JTableSorter - i.e the TH and TR (for zebra stripes).

In your example (smart.ari-soft.com/ari-jtablesorter.html) the TH is coloured green (blue once clicked), and the stripes white and purple.

I found a great answer to use css to style the JDataTable by using ".dataTables_wrapper" styles; is there something similar for JTableSorter?

Thanks
The administrator has disabled public write access.
 
#2476
Re:Alter style for JTableSorter? 8 Years, 2 Months ago Karma: 670
Hello,

You can use the following CSS rules for ARI JTableSorter plugin:

Code:


/* CSS rules for each even row */
table.tablesorter TR.even TD {
  background-color: red;
}

/* CSS rules for each even row */
table.tablesorter TR.odd TD {
  background-color: yellow;
}

/* CSS rules for sorting columns */
table.tablesorter thead tr .header
{
  background-color: blue;
}

/* CSS rules for active sorting column */
table.tablesorter thead tr .headerSortDown, 
table.tablesorter thead tr .headerSortUp 
{
  background-color:  green;
}



Regards,
ARI Soft
The administrator has disabled public write access.
 
#2477
Re:Alter style for JTableSorter? 8 Years, 2 Months ago Karma: 0
Thank you so much for the quick reply!

A few further questions:

1. The style for the "odd" rows doesn't seem to work. See this page for example: www.dip.qld.gov.au/structural-reform/rationale-and-maps.html

I've set the color to red but it still shows up purple.

Code:

/* CSS rules for each odd row */
table.tablesorter TR.odd TD {
background-color: red;
}

2. Can I also alter the font type and size?

3. Can I alter the colour of the TH for a column set to be "notSortableCols", as per the 2nd column ("Type and size") in the above example?

Thanks again
The administrator has disabled public write access.
 
#2478
Re:Alter style for JTableSorter? 8 Years, 2 Months ago Karma: 670
About questions:

1. Sorry, use the following CSS rule:

Code:


/* CSS rules for each odd row */
TABLE.tablesorter TBODY TR.odd TD {
background-color: red;
}



2. Yes, you can use for this purpose 'font-size' and ' font-family' CSS properties.

3. Yes, set color for all TH in table and override sortable columns if needed. For example, use the following CSS rule:

Code:


TABLE.tablesorter THEAD TR TH
{
  background-color: green;
}



Regards,
ARI Soft
The administrator has disabled public write access.
 
#2481
Re:Alter style for JTableSorter? 8 Years, 2 Months ago Karma: 0
Thanks again for your help - I'm getting there

I'm still having an issue with the background colour of the odd rows - the font size and type have changed successfully but the colour remains purple. I'm also unable to affect the non-sortable TH cell background or font. Here is my code:

/* CSS rules for each even row */
table.tablesorter TR.even TD {
background-color: #fafafa;
font-size: 10pt;
font-family: arial;
}

/* CSS rules for each odd row */
TABLE.tablesorter tbody TR.odd TD {
background-color: #f6f6f6;
font-size: 10pt;
font-family: arial;
}

table.tablesorter tbody td {
background-color: red;
font-size: 10pt;
font-family: arial;
}

/* CSS rules for sorting columns */
table.tablesorter thead tr .header
{
background-color: #dfdfdf;
font-size: 10pt;
font-family: arial;
}

/* CSS rules for active sorting column */
table.tablesorter thead tr .headerSortDown,
table.tablesorter thead tr .headerSortUp
{
background-color: #8dbdd8;
}

TABLE.tablesorter THEAD TR TH
{
background-color: #dfdfdf;
font-size: 10pt;
font-family: arial;
}

You can see the page here: www.dip.qld.gov.au/structural-reform/rationale-and-maps.html
The administrator has disabled public write access.
 
#2485
Re:Alter style for JTableSorter? 8 Years, 2 Months ago Karma: 670
Hello,

Add !important attribute to CSS properties. In other words, use the following syntax:

Code:


TABLE.tablesorter tbody TR.odd TD {
background-color: #f6f6f6 !important;
}



Regards,
ARI Soft
The administrator has disabled public write access.
 
Go to topPage: 12