Contao Theme Tao Documentation
First: Install Contao
Follow the official installation guide to install Contao. Follow all instructions provided by the Contao install tool /contao/install.
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 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.
In case you don't want to use the extensions we ship with our themes, you can easily uninstall them afterwards. To remove the Custom Element please follow the uninstall instructions.
2. Step: Download the theme and import it
Immediately after purchasing your theme you'll receive the download link for your package tao-contao.zip. If it takes the email longer than 15 minutes to arrive, please check your spam folder. Additionally you can download your theme anytime through 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.
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.
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
- Template import (demo data): Your Contao installation is unchanged?
- Another installation attempt leads to the same problem?
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.
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.
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
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!