After converting

If you have got our converted data, follow these instructions to complete your project:

Make a second full backup of your files and database
Import the SQL file (e.g. with PHPMyAdmin)
Upload the mask.json file into the /typo3conf/ folder
Install the newest Mask version
Test the TYPO3-backend. You see all contentelements and can edit them in all languages. On multilanguage websites particularly take care of elements with columns and containers.
Finish the TYPO3 upgrade (Extensionupgrades, ...)
Include the Mask TypoScript Template (Template -> root page -> Edit the whole Template record -> Include). Take care, that you include one of css_styled_content or fluid_styled_content before the Mask Template
Adapt your TypoScript setup (see below)
Adapt the HTML of your pagetemplates and contentelements (see below)

If you need support or don't want to do this by yourself, get in contact to us and we send you an offer for this job. The price depends on the projects size.

Perfect your project

Move your Backend-Layouts from page 0 to a page or folder. Simply use the list module for this task.
Tune your Backend-Layouts. Arrange columns and give them good names.
Add the column 9999 to your Backend-Layouts, if you want to see the not used elements of TemplaVoila.
Use the Mask-Backend-Module to adjust further settings in detail.
Create Backend-Previews for each content element. Almost copying the HTML from /content/ to /backend/ does a good job.

Adapt TypoScript

Change the TemplaVoila's PAGE object to the following:

page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
    file.stdWrap.cObject = CASE
    file.stdWrap.cObject {
        key.data = levelfield:-1, backend_layout_next_level, slide
        key.override.field = backend_layout
        2 = TEXT
        2.value = fileadmin/templates/subpage.html
        default = TEXT
        default.value = fileadmin/templates/index.html
    }
}

Take care, that '2' stands for the Backend-Layout with uid 2. Adapt the uid and path to the HTML file for your needs and add more lines for each Backend-Layout.

After this, don't forget to include HTML header lines, if TemplaVoila did the job. A few examples are:

page.includeCSS.myfile = fileadmin/css/myfile.css
page.includeJS.jquery = fileadmin/js/jquery.js
page.headerData.50 = TEXT
page.headerData.50.value (
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
)

Adapt HTML

Create a HTML file for each Backend-Layout and copy the HTML code from the TemplaVoila's HTML Template into it. Of course, you can also use and adapt the old TemplaVoila HTML Templates directly.
Change all HTML tags, of which were mapped in TemplaVoila, to Fluid Tags. In page templates you have almost TypoScript or contentcolumns. Replace all of both types with:

<f:cObject typoscriptObjectPath="lib.field_menu" />

Use the same lib.xxx as in Templavoila and all wors fine out of the box.
For contentcolumns use lib.content0, where 0 stands for the colPos in the Backend-Layout.

Create the following TypoScript lines for each contentcolumn:

lib.content0 < styles.content.get
lib.content0.select.where = colPos=0

Do nearly the same workflow for contentelements. Create a HTML Template for each contentelement in the folder /fileadmin/templates/content/. Use the elements key as filename (have a look to the Mask Backend-Module).

Now migrate the TemplaVoila's HTML Template with the Fluid Tags into this files. You will find all the needed Fluid-Tags in the Mask Backend-Module.

Tipp: If you have the old TemplaVoila project still running, look at the TemplaVoila's Backend-Module and edit the Template. Hoover above the coloured HTML-icons and see what is mapped. Replace this HTML with the new Fluid Tag and you are almost done.