Contao Theme Tao Documentation

First: Install Contao

Use our Contao installation guide or the official Contao documentation and follow all instructions of the Contao Manager at /contao-manager.phar.php.

Then: Install your Theme

1. Step: Install the extensions

To import the template you need to install the following extensions first:

rocksolid-custom-elements, rocksolid-columns, rocksolid-icon-picker, rocksolid-slider and rocksolid-mega-menu

You can find the license key for premium extensions in your personal customer area in the downloads section.

To install the extensions open the Contao Manager at /contao-manager.phar.php and klick on Install Packages. Enter rocksolid-custom-elements in the search field, click Check & Install next to the extension and Apply Changes at the bottom of the viewport. After the package is installed, click on Install Tool to update the database. Please repeat this step for: rocksolid-columns, rocksolid-icon-picker, rocksolid-slider and rocksolid-mega-menu.

If you plan to use the Theme Assistant (make customizations without coding) and Frontend Helper (edit content directly), you can choose to install them in this step as well. If you want to install them please repeat the step for rocksolid-theme-assistant and rocksolid-frontend-helper.

2. Step: Download the theme and import it

Immediately after purchasing your theme you can download the theme package in your personal customer area.

Unpack the ZIP file and you'll see multiple folders and files. We'll only need the file tao.cto for now, you can find it in the contao subfolder.

Log into your back end and goto Layout › Themes click on Theme import in the upper right section. Choose the tao.cto in the file menu and click on Theme import. If no conflicts are detected click on Continue to complete the theme import.

Almost done: Import the website template (demo data)

Installing the demo data is perfect for new projects, since you'll get everything shown in the demo and can edit the content right away, additionally you'll see how everything is put together. On top of that all the for Contao typical connection between modules and content are already made for you.

If you website is already filled with content, that you can't transfer afterwards, skip this step.

If you're using Contao 4: To import the website template go back to the Contao installation tool under /contao/install. Open the section Import a template, select the tao/demo-website.sql and click on the button Import template. Now you can enter the credentials for your admin user and click on Create admin account.

For Contao 5 goto Layout › Themes in the back end and click on Theme import in the upper right section. Choose the tao.cto in the file menu and click on Theme import. Now under Import an example website select the file tao/demo-website.sql and the import type Full SQL import. Click Continue to complete the import of the demo data.

Adding a Google Maps API key

To use Google Maps in your theme you'll need to enter an API key. You can get a free key on https://developers.google.com. After receiving your key you can edit the maps modules and enter it in the field Google Maps API key.

Centered areas and background settings

The theme includes the content element Zentrierter Bereich (engl. centered area). You can use this element to wrap certain parts of full-width pages. Just create an element Zentrierter Bereich Anfang (engl. centered wrapper start) and Zentrierter Bereich Ende (engl. centered wrapper end) in an article and add your content in between.

Add the css class footer-bar to centered areas (as mentioned above) to activate the footer specific font and form styles.

The wrapper element allows you to define background images, positions, colors and effects – including a parallax effect and a background animation that is controlled by the users mouse movement.

If you want to display an HTML5 video in the background of a centered area, you should save them in the formats with the widest browser support. We recommend mp4/H.264 and webm/VP8. To set the background video, select both video files and the image you want to use the preview image.

CSS classes

You can add the CSS class tao-boxed to a page or a page layout to display the single page in the boxed version (Example). If you want to use the boxed look for the entire website you can activate it using the Theme Assistant.

You can deactivate animations by adding the class not-animated either on single elements, pages or layouts.

Use the class no-border to remove the borders around gallery, image and text elements.

To remove the responsive scaling of content images add the class no-resize to individual elements. If you want to deactivate responsive scaling for all content images you can disable it using the Theme Assistant.

CSS icon classes

You can add the icons to elements either by using the data-icon attribute or by adding a CSS class like icon-.... You can find a list of all available icons in the Tao Live-Demo. Additional information about the icon font can be found in our icon font tutorial.

Newsletter-Template

If you've purchased the theme including the newsletter template, please unpack the download package and copy all files and folders from the unpacked folder templates into the templates directory on your webspace.

Optional: If you haven't imported the demo data, please add a hidden page named "Newsletter Includes". Use this page to add a single article for every newsletter you create. Fill the article with the newsletter-specific custom content elements found in the category Newsletter.

After you've successfully added the content of your newsletter to the article create a new newsletter containing only the following HTML content {{insert_article::newsletter-1}}. Replace newsletter-1 with the alias of your article. Finally send a test message to verify if everything is displayed as expected.