[TYPO3-english] Odd/even styling of tables made within the rtehtml editor

[Christopher Torgalson]

Hi,

On Mon, Feb 16, 2009 at 9:22 AM, Trine Buhl <trine.buhl at mail.dk> wrote:
> Trine Buhl skrev:
>> Hi
>>
>> I am trying to apply a style tables made within the rtehtlm editor with
>> alternate row styling (odd/even)
>>
>> But I can't get it to work, as the style is not available in the Table
>> properties -> Style.
>>
>>
>> What do I do wrong?
>>
>> Regards Trine
>>
>> RTE.default.contentCSS = fileadmin/templates/css/default_content.css
>>
>> # Add zebra
>> RTE.classes.tb-zebra-rows {
>> name = Zebra rows
>> alternating.rows {
>> // first row is 1 (odd) not 0
>> startAt = 1
>> // odd td in tbody
>> oddClass = tr-odd
>> // even td in tbody
>> evenClass = tr-even
>> // odd th on top (either inside thead or tr.thead)
>> oddHeaderClass = th-odd
>> // odd th on top (either inside thead or tr.thead)
>> evenHeaderClass = th-even
>> }
>> }
>>
>>
>> Allow the relevant classes for table, tr, th, td to show up in the
>> blockstyle list:
>>
>> RTE.default.buttons.blockstyle.tags {
>> table.allowedClasses = tb-zebra-rows
>> tr.allowedClasses = tr-odd, tr-even, header-odd, header-even
>> th.allowedClasses = header-odd, header-even, th-odd, th-even
>> }
>>
>>
>> # add classes that we do need
>> RTE.default.classesParagraph := addToList(tb-zebra-rows,
>> tb-zebra-cols,tr-odd, tr-even, header-odd, header-even, td-odd, td-even,
>> header-odd, header-even, th-odd, th-even, thead)
>> RTE.default.classesTable := addToList(tb-zebra-rows,
>> tb-zebra-cols,tr-odd, tr-even, header-odd, header-even,
>> header-odd, header-even, th-odd, th-even, thead)
>> RTE.default.classesTD := addToList(tb-zebra-rows,
>> tb-zebra-cols,tr-odd, tr-even, header-odd, header-even, td-odd, td-even,
>> header-odd, header-even, th-odd, th-even, thead)
>> RTE.default.proc.allowedClasses := raddToList(tb-zebra-rows,
>> tb-zebra-cols,tr-odd, tr-even, header-odd, header-even, td-odd, td-even,
>> header-odd, header-even, th-odd, th-even, thead)
>>
>>
>
> Found an easier way to add the styling....jQuery
>
> $(document).ready(function(){
>                //DOM is ready - lets go!
>
>                $(".com-category-title:even").addClass("even");
>                $(".com-category-desc-3 table.contenttable tbody tr:odd").addClass("odd");
>        });


I suspect that, even though the business part of this code is only two
lines long, it's twice as long as it needs to be. You don't usually
need classes for BOTH even and odd table rows since you can select the
tr elements directly. The following code will do in most cases
(caveat: I don't know exactly where the class 'com-category-title' is
used so I could be wrong...):

// Javascript
$(document).ready(function(){
  $(".com-category-desc-3 table.contenttable tbody tr:odd").addClass("odd");
});

/* CSS */
tr {
  background-color:#fff;
}

tr.odd {
  background-color:#ccc;
}


CSS is like Typoscript: define the default (tr) and override as
necessary (tr.odd).

-- 
Christopher Torgalson
http://www.typo3apprentice.com/