TemplaVoila advanced: Use of beLayout

Since version 1.3 of TemplaVoila you can use the element beLayout in the DS.

So extra extensions which allows also to modify the layout of the TemplaVoila page modul are not required any more.

You can use this element to define your own template for the Datastructures in the TemplaVoila Page Modul. This is useful for:

  • use in Page DS: Give your editors a better overview of the available content areas in your DS. Especially if you have more than 3 Columns.
  • use in flexible Contentelements DS: This is especially useful for grid-elements elements (like a two columns FCE)


beLayout for Page DS

  • You can help the editor to know what he does, e.g. put a header area to the top and simulate the layout of the page:

  1. <?xml version="1.0" encoding="utf-8" standalone="yes" ?>
  2. <T3DataStructure>
  3.   <meta type="array">
  4.     <langDisable>0</langDisable>
  5.     <langChildren>1</langChildren>
  6.     <beLayout>
  7.     <![CDATA[
  8.     <link rel="stylesheet" type="text/css" href="......../fileadmin/be.css" />   
  9.     <div id="templavoilabackend" style="border: 1px solid #333333">
  10.               <table width="99%" >
  11.               <tr>
  12.                   <td width="99%" class="top" colspan="2" style="background: #CAE0DE; border-bottom: 1px solid black">###field_headercontent###</td>
  13.                     </tr> 
  14.                     <tr>
  15.                   <td width="99%" colspan="2" class="header" style="background: #CAE0DE; border-bottom: 1px solid black">###field_topcontent###</td>
  16.                     </tr> 
  17.               <tr>
  18.                 <td width="60%" valign="top" style="border-right: 2px solid black">###field_content###</td>
  19.                   <td width="40%" valign="top" class="right" style="background: #F6FFC6;">###field_rightcontent###</td>                     
  20.               </tr>
  21.               </table>
  22.            </div>
  23.             ]]>
  24.             </beLayout>
  25.   </meta>
  26. ...


beLayout for FCE Grids

  • This is useful to help the editor keeping overview in nested elements:

  1. <beLayout>
  2. <![CDATA[   
  3. <div class="fce-expandablebox" style="border: 1px solid #7F9897; background: #AFD7D6; margin-bottom: 8px">
  4. ###field_content###
  5. </div>
  6. ]]>
  7. </beLayout>

Use of a backend.css

With the help some skin extensions you are able to include your own css file for the backend. e.g. fileadmin/templates/css/backend.css

You can use this to do more adjustments to the TemplaVoila PageModul layout.

blog comments powered by Disqus
  1. TYPO3 Programmierung http://www.andre-lanius.de 13.01.10 13:26

    Hello, thank you for this tutorial.

  2. Regis 28.07.09 16:03

    It seems that beLayout only works with Page Template but not with FCE.
    Is there a workaround for beLayout FCE.

    using Typo3 V4.2.8
    TV 1.3.7


  3. Daniel 21.10.08 21:53

    Yes we plan to publish the new pagemodul for TemplaVoila

  4. Marco 21.10.08 13:55

    I have read your entry in bugs.typo3.org about beLayout and local processing. You wrote, that is obsolete because you work on seperate pagemodul. It this a new extension or is this integrated in templavoila? It is already available?



  5. Cord 22.01.08 16:31

    Thank you for this helpful hint!