Customize FlexLists web export layout

Some users ask to customize the layout of the FlexLists web export script. Therefore I created a small guide:

It is currently partly possible to customize the layout of the web export ( available from the Publish tab).  You can not do it directly in the FlexLists website, but if you are familiar with HTML/CSS  there are some things you can change.

Basically the output of the FlexLists web export script looks like:
<table class="FLEXlist">
   <thead>
        <tr> <th>field name 1</th> ............</tr>
   </thead>
   <tbody>
       <tr> <td> field 1 value</td> ..............</tr>
       ................
    </tbody>
</table>

So if you insert the following code before the   <script....>  from flexlists:
<style type="text/css">
table.FLEXlist{width: 500px;}
table.FLEXlist thead th{ background-color: #666666; color: white; text-align: left; }
table.FLEXlist tbody td{ border: 1px solid #666666; }
</style>

You will see a different appearance.    Have a look at: http://www.w3.org/TR/CSS21/propidx.html  to see possible properties and values that are allowed in this small piece of CSS.     To explain a bit:  the first row are the table properties, the second row the properties of the header cells  and the third row are the properties of the other table cells.  So this particular example  gives the table a standard width of 500 pixels,  makes the header have a dark background with white text and left-aligned text.  And finally adds dark borders around the data cells.

RSS