Adding custom classes to tables

Imported from Yahoo
1

Hi All,

I'm creating a custom template that will be used to publish results into a CMS, the template for which is using Twitter's bootstrap.

This provides a number of custom classes for styling tables consistently across the site. Namely 'table table-striped table-bordered table-condensed'.

I've seen the FAQ about adding custom classes to TD and TH cells, but couldn't work out from that how to address the tables themselves within my custom template.

Any help would be greatly appreciated.

Cheers

Keith

2

Hi Keith,

Looking at the source generated will show you what class Sailwave uses for the table, but if you're using Bootstrap that's not going to help I guess, unless there is a CSS rule to say thisclass=thatclass. Can we check that first before we consider doing anything else. Can you define a class rule in CSS that says make this class a clone of that class... I don't think there is but...

···

--- In sailwave@yahoogroups.com, "quayfee" <keith@...> wrote:

Hi All,

I'm creating a custom template that will be used to publish results into a CMS, the template for which is using Twitter's bootstrap.

This provides a number of custom classes for styling tables consistently across the site. Namely 'table table-striped table-bordered table-condensed'.

I've seen the FAQ about adding custom classes to TD and TH cells, but couldn't work out from that how to address the tables themselves within my custom template.

Any help would be greatly appreciated.

Cheers

Keith

3

Hi Colin,

Thanks for getting back to me. Unfortunately there isn’t. I could use jQuery to inject the additional classes.

What I was thinking was whether there was a method similar to this:

Examples:-

set.class("race.col.points.th","myclass1")

set.class("summary.col.sailno.td","myclass2 myclass3")

set.class("summary.col.race.th","myclass4")

From here: http://www.sailwave.com/how-do-i-classes-to-the-published-td-elements

That could add classes to the tables themselves.

The other alternative is to use firebug to collate all the CSS applied as a result of those classes, but that could be a real can of worms.

Thanks

Keith

···

From: sailwave@yahoogroups.com [mailto:sailwave@yahoogroups.com] On Behalf Of Colin Jenkins
Sent: 14 March 2013 09:43
To: sailwave@yahoogroups.com
Subject: [sailwave] Re: Adding custom classes to tables

Hi Keith,

Looking at the source generated will show you what class Sailwave uses for the table, but if you’re using Bootstrap that’s not going to help I guess, unless there is a CSS rule to say thisclass=thatclass. Can we check that first before we consider doing anything else. Can you define a class rule in CSS that says make this class a clone of that class… I don’t think there is but…

— In sailwave@yahoogroups.com, “quayfee” <keith@…> wrote:

Hi All,

I’m creating a custom template that will be used to publish results into a CMS, the template for which is using Twitter’s bootstrap.

This provides a number of custom classes for styling tables consistently across the site. Namely ‘table table-striped table-bordered table-condensed’.

I’ve seen the FAQ about adding custom classes to TD and TH cells, but couldn’t work out from that how to address the tables themselves within my custom template.

Any help would be greatly appreciated.

Cheers

Keith

4

iQuery would do it I guess. If the Sailwave table class is say “xyzzy”, clear the CSS for .xyzzy in the Sailwave stylesheet so it has not effect then use

$(’.code-table’.).addClass(‘someBootstrapClassHere’);

···

Cheers,

Colin J

http://sailwave.com

On Thu, Mar 14, 2013 at 10:04 AM, Keith Mountifield keith@mountifield.org wrote:

Hi Colin,

Thanks for getting back to me. Unfortunately there isn’t. I could use jQuery to inject the additional classes.

What I was thinking was whether there was a method similar to this:

Examples:-

set.class("[race.col.points.th](http://race.col.points.th)","myclass1")

set.class("[summary.col.sailno.td](http://summary.col.sailno.td)","myclass2 myclass3")

set.class("[summary.col.race.th](http://summary.col.race.th)","myclass4")

From here: http://www.sailwave.com/how-do-i-classes-to-the-published-td-elements

That could add classes to the tables themselves.

The other alternative is to use firebug to collate all the CSS applied as a result of those classes, but that could be a real can of worms.

Thanks

Keith

From: sailwave@yahoogroups.com [mailto:sailwave@yahoogroups.com] On Behalf Of Colin Jenkins
Sent: 14 March 2013 09:43
To: sailwave@yahoogroups.com
Subject: [sailwave] Re: Adding custom classes to tables

Hi Keith,

Looking at the source generated will show you what class Sailwave uses for the table, but if you’re using Bootstrap that’s not going to help I guess, unless there is a CSS rule to say thisclass=thatclass. Can we check that first before we consider doing anything else. Can you define a class rule in CSS that says make this class a clone of that class… I don’t think there is but…

— In sailwave@yahoogroups.com, “quayfee” <keith@…> wrote:

Hi All,

I’m creating a custom template that will be used to publish results into a CMS, the template for which is using Twitter’s bootstrap.

This provides a number of custom classes for styling tables consistently across the site. Namely ‘table table-striped table-bordered table-condensed’.

I’ve seen the FAQ about adding custom classes to TD and TH cells, but couldn’t work out from that how to address the tables themselves within my custom template.

Any help would be greatly appreciated.

Cheers

Keith

5

Hi Colin,

Yup, that was the sort of thing that I was thinking. It’s a shame to have to use JavaScript to do it.

Perhaps Jon could think about adding a bit more functionality to the template callbacks in a future version. It would be great to be able to easily integrate the Sailwave output with different frameworks without having to use JavaScript.

Cheers

Keith

···

From: sailwave@yahoogroups.com [mailto:sailwave@yahoogroups.com] On Behalf Of Colin Jenkins
Sent: 14 March 2013 10:13
To: Sailwave User Group
Subject: Re: [sailwave] Re: Adding custom classes to tables

iQuery would do it I guess. If the Sailwave table class is say “xyzzy”, clear the CSS for .xyzzy in the Sailwave stylesheet so it has not effect then use

$(’.code-table’.).addClass(‘someBootstrapClassHere’);

Cheers,

Colin J

http://sailwave.com

On Thu, Mar 14, 2013 at 10:04 AM, Keith Mountifield keith@mountifield.org wrote:

Hi Colin,

Thanks for getting back to me. Unfortunately there isn’t. I could use jQuery to inject the additional classes.

What I was thinking was whether there was a method similar to this:

Examples:-

set.class("[race.col.points.th](http://race.col.points.th)","myclass1")

set.class("[summary.col.sailno.td](http://summary.col.sailno.td)","myclass2 myclass3")

set.class("[summary.col.race.th](http://summary.col.race.th)","myclass4")

From here: http://www.sailwave.com/how-do-i-classes-to-the-published-td-elements

That could add classes to the tables themselves.

The other alternative is to use firebug to collate all the CSS applied as a result of those classes, but that could be a real can of worms.

Thanks

Keith

From: sailwave@yahoogroups.com [mailto:sailwave@yahoogroups.com] On Behalf Of Colin Jenkins
Sent: 14 March 2013 09:43
To: sailwave@yahoogroups.com
Subject: [sailwave] Re: Adding custom classes to tables

Hi Keith,

Looking at the source generated will show you what class Sailwave uses for the table, but if you’re using Bootstrap that’s not going to help I guess, unless there is a CSS rule to say thisclass=thatclass. Can we check that first before we consider doing anything else. Can you define a class rule in CSS that says make this class a clone of that class… I don’t think there is but…

— In sailwave@yahoogroups.com, “quayfee” <keith@…> wrote:

Hi All,

I’m creating a custom template that will be used to publish results into a CMS, the template for which is using Twitter’s bootstrap.

This provides a number of custom classes for styling tables consistently across the site. Namely ‘table table-striped table-bordered table-condensed’.

I’ve seen the FAQ about adding custom classes to TD and TH cells, but couldn’t work out from that how to address the tables themselves within my custom template.

Any help would be greatly appreciated.

Cheers

Keith

6

I agree and would be happy to do the work. I didn’t consider external stylesheets when I did it…

···

Cheers,

Colin J

http://sailwave.com

On Thu, Mar 14, 2013 at 10:32 AM, Keith Mountifield keith@mountifield.org wrote:

Hi Colin,

Yup, that was the sort of thing that I was thinking. It’s a shame to have to use JavaScript to do it.

Perhaps Jon could think about adding a bit more functionality to the template callbacks in a future version. It would be great to be able to easily integrate the Sailwave output with different frameworks without having to use JavaScript.

Cheers

Keith

From: sailwave@yahoogroups.com [mailto:sailwave@yahoogroups.com] On Behalf Of Colin Jenkins
Sent: 14 March 2013 10:13
To: Sailwave User Group
Subject: Re: [sailwave] Re: Adding custom classes to tables

iQuery would do it I guess. If the Sailwave table class is say “xyzzy”, clear the CSS for .xyzzy in the Sailwave stylesheet so it has not effect then use

$(’.code-table’.).addClass(‘someBootstrapClassHere’);

Cheers,

Colin J

http://sailwave.com

On Thu, Mar 14, 2013 at 10:04 AM, Keith Mountifield keith@mountifield.org wrote:

Hi Colin,

Thanks for getting back to me. Unfortunately there isn’t. I could use jQuery to inject the additional classes.

What I was thinking was whether there was a method similar to this:

Examples:-

set.class("[race.col.points.th](http://race.col.points.th)","myclass1")

set.class("[summary.col.sailno.td](http://summary.col.sailno.td)","myclass2 myclass3")

set.class("[summary.col.race.th](http://summary.col.race.th)","myclass4")

From here: http://www.sailwave.com/how-do-i-classes-to-the-published-td-elements

That could add classes to the tables themselves.

The other alternative is to use firebug to collate all the CSS applied as a result of those classes, but that could be a real can of worms.

Thanks

Keith

From: sailwave@yahoogroups.com [mailto:sailwave@yahoogroups.com] On Behalf Of Colin Jenkins
Sent: 14 March 2013 09:43
To: sailwave@yahoogroups.com
Subject: [sailwave] Re: Adding custom classes to tables

Hi Keith,

Looking at the source generated will show you what class Sailwave uses for the table, but if you’re using Bootstrap that’s not going to help I guess, unless there is a CSS rule to say thisclass=thatclass. Can we check that first before we consider doing anything else. Can you define a class rule in CSS that says make this class a clone of that class… I don’t think there is but…

— In sailwave@yahoogroups.com, “quayfee” <keith@…> wrote:

Hi All,

I’m creating a custom template that will be used to publish results into a CMS, the template for which is using Twitter’s bootstrap.

This provides a number of custom classes for styling tables consistently across the site. Namely ‘table table-striped table-bordered table-condensed’.

I’ve seen the FAQ about adding custom classes to TD and TH cells, but couldn’t work out from that how to address the tables themselves within my custom template.

Any help would be greatly appreciated.

Cheers

Keith

7

Hi Colin,

That’s really great. Feel free to drop me a line off-list if you want me to help with any testing & feedback. I’d be more than happy to help in any way that I can.

Cheers

Keith

···

From: sailwave@yahoogroups.com [mailto:sailwave@yahoogroups.com] On Behalf Of Colin Jenkins
Sent: 14 March 2013 10:52
To: Sailwave User Group
Subject: Re: [sailwave] Re: Adding custom classes to tables

I agree and would be happy to do the work. I didn’t consider external stylesheets when I did it…

Cheers,

Colin J

http://sailwave.com

On Thu, Mar 14, 2013 at 10:32 AM, Keith Mountifield keith@mountifield.org wrote:

Hi Colin,

Yup, that was the sort of thing that I was thinking. It’s a shame to have to use JavaScript to do it.

Perhaps Jon could think about adding a bit more functionality to the template callbacks in a future version. It would be great to be able to easily integrate the Sailwave output with different frameworks without having to use JavaScript.

Cheers

Keith

From: sailwave@yahoogroups.com [mailto:sailwave@yahoogroups.com] On Behalf Of Colin Jenkins
Sent: 14 March 2013 10:13
To: Sailwave User Group
Subject: Re: [sailwave] Re: Adding custom classes to tables

iQuery would do it I guess. If the Sailwave table class is say “xyzzy”, clear the CSS for .xyzzy in the Sailwave stylesheet so it has not effect then use

$(’.code-table’.).addClass(‘someBootstrapClassHere’);

Cheers,

Colin J

http://sailwave.com

On Thu, Mar 14, 2013 at 10:04 AM, Keith Mountifield keith@mountifield.org wrote:

Hi Colin,

Thanks for getting back to me. Unfortunately there isn’t. I could use jQuery to inject the additional classes.

What I was thinking was whether there was a method similar to this:

Examples:-

set.class("[race.col.points.th](http://race.col.points.th)","myclass1")

set.class("[summary.col.sailno.td](http://summary.col.sailno.td)","myclass2 myclass3")

set.class("[summary.col.race.th](http://summary.col.race.th)","myclass4")

From here: http://www.sailwave.com/how-do-i-classes-to-the-published-td-elements

That could add classes to the tables themselves.

The other alternative is to use firebug to collate all the CSS applied as a result of those classes, but that could be a real can of worms.

Thanks

Keith

From: sailwave@yahoogroups.com [mailto:sailwave@yahoogroups.com] On Behalf Of Colin Jenkins
Sent: 14 March 2013 09:43
To: sailwave@yahoogroups.com
Subject: [sailwave] Re: Adding custom classes to tables

Hi Keith,

Looking at the source generated will show you what class Sailwave uses for the table, but if you’re using Bootstrap that’s not going to help I guess, unless there is a CSS rule to say thisclass=thatclass. Can we check that first before we consider doing anything else. Can you define a class rule in CSS that says make this class a clone of that class… I don’t think there is but…

— In sailwave@yahoogroups.com, “quayfee” <keith@…> wrote:

Hi All,

I’m creating a custom template that will be used to publish results into a CMS, the template for which is using Twitter’s bootstrap.

This provides a number of custom classes for styling tables consistently across the site. Namely ‘table table-striped table-bordered table-condensed’.

I’ve seen the FAQ about adding custom classes to TD and TH cells, but couldn’t work out from that how to address the tables themselves within my custom template.

Any help would be greatly appreciated.

Cheers

Keith