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="http://dev.aoesupport.com/~danielp/projecte/webex/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 4 Comments 3544 Views tags: templavoila

Submitting your vote...
Rating: 5.0 of 5. 1 vote(s). (Click the rating bar to rate this item.)
  1. Karl http://payday-on-line.biz/ 31.03.09 15:36

    Badly need your help. I write because I'm afraid to say some things out loud.
    I am from Burma and learning to write in English, tell me right I wrote the following sentence: "Ltima edici n - de find cheap airline tickets and flights from corpus christi to syracuse, event tickets and more."

    THX :p, Karl.

  2. Daniel 21.10.08 21:53

    Yes we plan to publish the new pagemodul for TemplaVoila

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

  4. 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
aoe_realurlpath - advanded real url path
16.05.09 - alternative page path generation for real url with features like: doublicate check / workspace +...
Ajax Framework (fe_ajax)
06.08.08 - Easy way to get barrierfree AJAX features in your extension