[TYPO3-project-formidable] custom CSS to lister and other?

[Manuel Rego Casasnovas]

Hello,

El jue, 17-01-2008 a las 15:40 +0100, stefano cecere escribió:
> hi everybody
> 
> after testing it, i could do everything but not the styling a lister
with custom CSS.
> (the "template" directive kept me giving error for the lister ...
anybody has a working lister html template to share?)
> 
> do you have some suggestions?

If you are using a renderlet:LISTER you could use the next XML
configuration:
<template>
   <path>EXT:my_extension/res/templates/test.tpl</path>
   <subpart>###LIST###</subpart>
</template>

And if the file doesn't exist, FORMidable will show you a default
template:
<!-- ###LIST### begin-->
                

        

        <!--###BEFORE### begin--><!--###BEFORE### end-->

        <table class="lister-table" cellspacing="0">
                <tr class = "top-row">
                        <td class="col-uid"><!-- ###SORT_uid###
begin-->uid<!-- ###SORT_uid### end--></td>
                        <td class="col-title"><!-- ###SORT_title###
begin-->title<!-- ###SORT_title### end--></td>
                        <td class="col-hidden"><!-- ###SORT_hidden###
begin-->hidden<!-- ###SORT_hidden### end--></td>
                        <td class="col-hide"><!-- ###SORT_hide###
begin-->{hide.label}<!-- ###SORT_hide### end--></td>
                        
                </tr>

                <!-- ###ROWS### begin-->

                        <!-- ###ROW1### begin-->
                        <tr class = "data-row-1">
                                <td class="col-uid">{uid}</td>
                                <td class="col-title">{title}</td>
                                <td class="col-hidden">{hidden}</td>
                                <td class="col-hide">{hide}</td>
                                
                        </tr>
                        <!-- ###ROW1### end-->

                        <!-- ###ROW2### begin-->
                        <tr class = "data-row-2">
                                <td class="col-uid">{uid}</td>
                                <td class="col-title">{title}</td>
                                <td class="col-hidden">{hidden}</td>
                                <td class="col-hide">{hide}</td>
                                
                        </tr>
                        <!-- ###ROW2### end-->

                        <!-- ###ROWACT### begin-->
                        <tr class = "data-row-act">
                                <td class="col-uid">{uid}</td>
                                <td class="col-title">{title}</td>
                                <td class="col-hidden">{hidden}</td>
                                <td class="col-hide">{hide}</td>
                                
                        </tr>
                        <!-- ###ROWACT### end-->

                <!-- ###ROWS### end-->

                <tr class = "bottom-row">
                        <td colspan = "4" align = "center">
                                {PAGER}
                        </td>
                </tr>
        </table>

        <!--###AFTER### begin--><!--###AFTER### end-->


                
<!-- ###LIST### end-->


Moreover you'll see "automatic CSS":
        /* TABLE LAYOUT */
        #myform_anonymous_a583bb8193 .lister-table { width: 100%;}
        #myform_anonymous_a583bb8193 .lister-table TD { padding: 2px;
margin: 0px;}

        /* SORTING HEADERS */
        #myform_anonymous_a583bb8193 .top-row { font-weight: bold;
background-color: #ff6d05;}
        #myform_anonymous_a583bb8193 .top-row TD A { color: white;}
        #myform_anonymous_a583bb8193 .top-row TD A.sort-act-asc,
        #myform_anonymous_a583bb8193 .top-row TD A.sort-act-desc
{ font-style: bold; padding-right: 15px; background-repeat: no-repeat;
background-position: right;}

        /* normal sorting header */
        #myform_anonymous_a583bb8193 .top-row TD A.sort-no {}

        /* active sorting header, sort ASC */
        #myform_anonymous_a583bb8193 .top-row TD
A.sort-act-asc { background-image:
url(/typo3conf/ext/ameos_formidable/api/base/rdt_lister/res/img/aasc.gif);}

        /* active sorting header, sort DESC */
        #myform_anonymous_a583bb8193 .top-row TD
A.sort-act-desc        { background-image:
url(/typo3conf/ext/ameos_formidable/api/base/rdt_lister/res/img/adesc.gif);}

        /* DATA ROWS */
        #myform_anonymous_a583bb8193 .data-row-1 { background-color:
#faf0c6;}  /* aspect for even rows */
        #myform_anonymous_a583bb8193 .data-row-2 { background-color:
#fff48b;}  /* aspect for odd rows */
        #myform_anonymous_a583bb8193 .data-row-act { background-color:
#ffd700;}        /* aspect for active row */
        #myform_anonymous_a583bb8193 .bottom-row { background-color:
transparent;}


Best regards,
   Rego



-- 
Manuel Rego Casasnovas 
Computer Science Engineer 
mailto:mrego at igalia.com 
Tel: +34 986 10 76 10 
Fax: +34 981 91 39 49 
Igalia - http://www.igalia.com