[TYPO3-project-formidable] How to use CSS in HTML templates ?

Fri Jul 4 09:45:22 CEST 2008

Hello,

You should write something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
     <head>
         <title>Template</title>
     </head>
     <body>

         <!-- ###LIST### begin-->

	<style type="text/css">

		/* TABLE LAYOUT */
		.lister-table { width: 100%;}
		.lister-table TD { padding: 2px; margin: 0px;}

		/* DATA ROWS */
		.data-row-1 { background-color: #faf0c6;}

	</style>

         <table class="lister-table">
             <tr>
                 <th>{username.label}</th>
             </tr>

             <!-- ###ROWS### begin-->
                 <!-- ###ROW### begin-->
                     <tr class = "data-row-1">
                         <td>{username.value}</td>
                     </tr>
                 <!-- ###ROW### end-->
             <!-- ###ROWS### end-->
         </table>

         <!-- ###LIST### end-->
     </body>
</html>

Regards,
Loredana

Izzie Greys a écrit :
> Hello everybody,
> 
> I started to work with formidable yesterday and I need help. I don't
> understand how to use my own CSS. For example here is what I have in my html
> template (I tried with a part of the default html template of the
> renderlet:LISTER) :
> 
> 
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
> http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html>
>     <head>
>         <title>Template</title>
>     </head>
>     <body>
>         <!-- ###LIST### begin-->
> 
>         <!--###STYLES### begin-->
>         /* TABLE LAYOUT */
>         {PREFIX} .lister-table { width: 100%;}
>         {PREFIX} .lister-table TD { padding: 2px; margin: 0px;}
> 
>         /* DATA ROWS */
>         {PREFIX} .data-row-1 { background-color: #faf0c6;}
> 
>         <!--###STYLES### end-->
> 
>         <!--###BEFORE### begin--><!--###BEFORE### end-->
>         <table class="lister-table">
>             <tr>
>                 <th>{username.label}</th>
>             </tr>
> 
>             <!-- ###ROWS### begin-->
>                 <!-- ###ROW### begin-->
>                     <tr class = "data-row-1">
>                         <td>{username.value}</td>
>                     </tr>
>                 <!-- ###ROW### end-->
>             <!-- ###ROWS### end-->
>         </table>
> 
>         <!-- ###LIST### end-->
>     </body>
> </html>
> 
> 
> But it's not working. The classes lister-table and data-row-1 are not used,
> and the CSS code between <!--###STYLES### begin--> and <!--###STYLES###
> end--> appeared on screen. I don't know where I have to define the CSS
> classes.
> 
> Thanks in advance. And thanks for this "formidable" project :)
> 
> Izzie