The layout in Contao consists of a theme, templates, and the site structure (website pages based on theme and templates). This theme is known as a front end theme and viewable by the public and the members/users of your Contao CMS.  Back end themes are applicable only to your users, and can be loaded directly in the back end interface.  Both theme types can be obtained from the Contao.org website, or through a third party website.  The following tutorial explains how to obtain and then apply themes via the Contao CMS back end.

 

Adding a Theme in Contao

Finding a back end theme or front end theme to use for Contao and then installing is actually a pretty simple process when using th Contao interface.  The first set of instructions reviews how to load a back end theme and activate it for a user.  The second set of instructions describe how to load a front end theme that makes up the appearance of the public website for you Contao CMS.


Adding a New Back End Theme using the Extension Catalog

  1. Login to the Contao Back End Interface
  2. Scroll all the way down until you find the SYSTEM section of the Back End Modules.  Click on EXTENSION CATALOG in this section.  You will something similar to the following:

    Main Extension catalog screen

    IMPORTANT - please make sure to read the description of the themes you are viewing. The themes you will see here are for the Back End only. Click on the drop-down menu labeled CATEGORIES, then select THEMES.  Once you have specified THEME in the menu, click on the arrows configured in a circular pattern to refresh the page.  Note that if you click on the drop-down menu for TYPE, then you can also specify that the you show only the FREE themes.  You will need to click on the refresh icon in the top right hand corner to show the list with the new criteria. 

    The back end themes available direct from Contao can be installed immediately through the back end interface.  The extension catalog lists several free back end themes, but many Contao front end themes require payment with pricing based on the Euro.  The installation instructions for loading a front end theme are directly below this section (Loading Front End Themes).

  3. When you find the theme you like, simply click on icon in the top right hand corner of theme - when you hover over the icon it will display INSTALL.  When you click on that icon, you will see the following:

    Main installation screen for back end themes
    Click on CONTINUE at the bottom of the screen in order to continue the installation.
  4. When the installation completes you will see this screen:

    Install complete with extension manager

    Clicking continue will take you to the extension manager screen where you can run updates. 


  5. The last step in using a Back End theme is to simply go into the USER section of the Back End modules, navigate to BACK END THEME, then click on the drop-down menu to select your newly loaded theme. Here's what you'll see in the USER section:

    themes-backend-selection


  6. Once you have selected the theme, click on a SAVE option at the bottom of the screen to save your selection.

 

Loading a Front End Theme

A front end theme changes the web site appearance that your members/users and the general public will see.  Loading the front end theme requires that you have the installation files for the theme.  As opposed to a back end theme, the theme files for the front end interface are often downloaded from a specific source. You can obtain front end themes from the Contao.org website here: Contao Open Source CMS Themes. If you wish to obtain front end themes from other sources on the internet, you can run a search with a search engine like Google and find many other websites selling or giving themes away for Contao.  When you finally get the Contao Theme file, the extension for the file is ".cto"  - make sure that you see this, because the file typically will not work otherwise.  If the file is compressed, make sure to read the author's installation instructions for the theme.  If any specific files need to be directly loaded, please see Adding a File to the Contao CMS for further information.  Here are the steps for loading a front end theme:

  1. Login to the Contao Back End interface
  2. Scroll down the Back End modules list until you see THEMES.  Click on THEMES and you'll see the following:

    Main Front End Themes screen in Backend
    This interface lists the front end themes that are loaded by default - which in this case is the Music Academy theme. 


  3. Click on THEME IMPORT and then you'll see a screen requesting the .CTO file for the theme:

    Upload theme screen

    Select your file with the BROWSE button, then click on THEME IMPORT when you have specified the file.


  4. When the install is complete, you will see a final listing of the themes like this:

    Completed theme install

    Files for the theme are automatically imported into the website as per the Contao confirmation at the top of this screenshot.

As you can see the installation process for loading a theme is quick and simple.  You just need the files and the login access to the Contao back end to complete the installation for any compatible theme.  Remember that front end themes are for the public face of your website, but back end themes must loaded per user in order to be seen and used.

 

 

 

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve our Help Center:
Email Address
Optional, but our team may contact you for more information.
Did you find this article helpful?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!

Help Center Search

Current Customers

Email: support@WebHostingHub.com Ticket: Submit a Support Ticket
Call: 877-595-4HUB (4482)
757-416-6627 (Intl.)
Chat: Click To Chat Now

Ask the Community

Get help with your questions from our community of like-minded hosting users and Web Hosting Hub Staff.

Not a Customer?

Get web hosting from a company that is here to help.