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>
  8.  

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
blogroll