06.012008

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

Download Example

 

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.  

Download Example

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.

comment 5 Comments 7024 Views tags: templavoila

Submitting your vote...
Rating: 5.0 of 5. 3 vote(s). (Click the rating bar to rate this item.)
  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

    THX!

  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?

    Thx,

    Marco

  5. Cord 22.01.08 16:31

    Thank you for this helpful hint!

CAPTCHA image for SPAM prevention 

Login und Registrierung

toggle
...type your search above...
blogroll
MVC Framework
16.05.09 - Find parts of the offical manual + some extra Infos for the MVC extension.
aoe_realurlpath - advanded real url path
16.05.09 - alternative page path generation for real url with features like: doublicate check / workspace +...