Categories

Typo3 RTE: Add custom table design with zebra striped rows

Donate with

82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

Copy Monero Donation Address

Donate with

Donate BAT now

Verified BAT publisher

Goal

We want to be enable to insert custom styled tables into regular Typo3 content elements that have the alternating zebra row (or column) effect.

Howto

Edit the PageTSconfig (usually the one of the root page) and insert the following code into it:

RTE {
## define table classes
classes.myCustomTable {
name = My custom table layout
alternating.rows {
# 0 = even, 1 = odd
startAt = 0
oddClass = row-odd
evenClass = row-even
oddHeaderClass = row-odd
evenHeaderClass = row-even
}
counting.columns {
startAt = 0
columnClass = td-count-
columnLastClass = td-last
columnHeaderClass = th-count-
columnHeaderLastClass = th-last
}
}
 
## set this so that row-odd and row-even are not being used together in the same row definition to allow the zebra effect
mutuallyExclusiveClasses = row-odd,row-even
 
proc.allowedClasses := addToList(row-even, row-odd, td-count-, td-last, th-count-, th-last, myCustomTable )
buttons.blockstyle.tags {
div.allowedClasses := addToList()
table.allowedClasses := addToList(myCustomTable)
tr.allowedClasses := addToList(row-odd, row-even)
td.allowedClasses := addToList(td-count-, td-last)
th.allowedClasses := addToList(th-count-, th-last)
}
buttons.textstyle.tags.span.allowedClasses := addToList()
buttons.link.properties.class.allowedClasses := addToList()
}

This will configure the RTE to display the table style "myCustomTable" (well, actually it will display "My custom table layout) in the table properties of a regular content (text/Text with image) element.
For the frontend we need to Typo3 to assign the defined class(es) to the template. By default only the style "contenttable"  is being assigned. For this to change do the following:
Edit the root template (or the corresponding page template) and add the following line:

lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list = contenttable, myCustomTable

This will make sure that the table settings will be properly assigned to the table elements in the frontend.
Furthermore you'll need to define the corresponding CSS by adding it to your rte.css (or whatever file you're using to define the RTE CSS). This can look like this:

table caption {margin:35px 0px 5px 3px; text-align: left; font-family: "MavenProBold"; font-size: 18px; color: #000;}
table.myCustomTable {margin-left:-2px;}
table.myCustomTable tbody tr td {font-family: "Calibri", "MavenProRegular", sans-serif; font-size: 15px; color: #4f4f4f; vertical-align: top; line-height: 1.4em; border-collapse: separate;}
table.myCustomTable tbody tr td.td-count-1 {width: 240px; padding-left: 2px;}
table.myCustomTable tbody tr td.td-count-2 {padding-left: 2px; margin-right:2px;}
table.myCustomTable tbody tr.row-odd {background-color: #F5F5F4;}
table.myCustomTable tbody tr.row-even {background-color: transparent;}

RTE {    #classes.button {    #    name = Kaufen button    #    value = color:#3CA5D8;    #}## define table classesclasses.normaleTabelle-2-spaltig {name = Normale Tabelle 2-Spaltigalternating.rows {# 0 = even, 1 = oddstartAt = 0oddClass = row-oddevenClass = row-evenoddHeaderClass = row-oddevenHeaderClass = row-even}counting.columns {startAt = 0columnClass = td-count-columnLastClass = td-lastcolumnHeaderClass = th-count-columnHeaderLastClass = th-last}}