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

The theme can be installed directly during the installation of Contao itself as described in the Contao installation guide. The following steps are only necessary for a subsequent installation of the theme into an existing Contao installation.

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 don't install the needed extensions or don't use the right theme version for your Contao installation, you'll see the following error message "The import failed! Is the database structure up to date and is the template file compatible with your Contao version?"

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.

Please note: If you import the Contao website template the current content of your database will be replaced with the demo data.

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.

Are you having trouble installing?

Blank page, error message, theme isn't showing up? This interactive check list guides you step by step.

  • Followed the installation instruction step by step
  • Installed the required extensions before importing the template (important!)
  • Used the latest/right version of your theme (Download)
  • Used the latest/right version of Contao
  • Another installation attempt leads to the same problem?

Contact Support

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.

FAQ: Common Questions

The import failed! Is the database structure up to date and is the template file compatible with your Contao version?

Did you make sure that all needed extension are correctly installed, as explained in step one? Did you make sure to use the theme version that matches your Contao installation? Is your Contao installation untouched and you didn't install 3rd party extensions before trying to import the template?

Background: To import the demo data your Contao Installation must match the database structure. After importing the template, you can easily remove the extensions if you want to use different/custom solutions.

Is it possible to use my own extensions instead?

Yes, that's one of the major benefits of RockSolid Themes. You can choose the right tools for your project. Be it the customization or the extensions. We've developed a set of perfectly tailored extensions like the RockSolid Responsive Slider, Custom Content Elements and so on, but you don't have to use them. Everything can be un-installed seamlessly to make room for your own custom extension or another plugin.

Where can I find element X to make changes?

The RockSolid Frontend Helper makes it easy for you to find and edit elements with a single click.

Did you have difficulties following this instructions or did you spot a mistake? Please let us know by providing your feedback. Thank you!