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 this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Did you find this article helpful?

Comments

n/a Points
2014-06-19 5:14 pm

Hi.I've downloaded and imported k0001 theme for contao 3.x version.It's imported and installed successfully, but in the fron end it didn't appear. My previous theme musical_academy stayed no changing.Please what I did wrong? My Contao cms version is 3.0.6. I installed it on my localhost machine.Thank you very much.Please help me

Staff
2,342 Points
2014-06-19 5:35 pm
To clarify, are you having trouble seeing it on the front end of your site, or it appearing within your admin panel to activate it?
n/a Points
2014-06-20 10:01 am

After import I got the messages:

File k0001_contao_3_x.cto uploaded successfully.

Theme "k0001_contao_3_x.cto" has been imported.It makes me to be sure that I installed the theme correctly.I did everything like in your article and my contao didn't ask me to activate the theme.Also please tell how to create a new customer template from psd and to .cto archive.No information in internet.Thank you

 

Staff
2,342 Points
2014-06-20 3:22 pm
You wouldn't be able to simply convert a PSD to a CTO template file. To do so, you would need to take the content of the PSD and fully code the template with HTML, CSS, and PHP which can greatly vary depending on how you design it. I recommend taking a look at the Contao documentation on themes to learn how to create one.

Regarding the theme installation issue, could you clarify what version of Contao you are using?
n/a Points
2014-06-20 4:57 pm

Thank you very much. It helped me. In back end in Themes list I found a button Change a structure.But I used a default theme musical academy and 3.0.6 version, beacuse it has deafult theme. When I tried to use 3.2.2 I saw that there there is no default theme and I could not install free ones from your site.Please give more information about default front end theme free contao versions (3.2.2) and where and how it can be used.Thank you very much

Staff
17,314 Points
2014-06-21 12:45 am
Hello Alexander,

I revisited Contao (as I haven't looked at it in quite awhile), and your observations and problems are definitely an issue, especially for new Contao users. I will need to update my own documentation, as it is based on an older version. The free theme that I could get easily before no longer seems to be readily available. For now, try going to this theme developer: Rock Solid Themes. They appear to have a good theme, and they also have a good product for actually modifying/creating themes. I will be researching the update Contao version and I will update the content once I enough information and a good understanding of it. Apologies for the current issues!

Kindest regards,
Arnel C.
n/a Points
2014-06-20 3:51 pm

So, I already understood that creating a new custom front end template from A to Z in Contao is impossible.I also understood, that it's better and easier to modify existing theme. For example musical academy.It is possible editing fe_page.html5 file. So. Ok. It looks it can work.I saw in the code of the file these lines:

<?php if ($this->right): ?><aside id="right"><div class="inside"><?php echo $this->right; ?> </div></aside><?php endif; ?>

It also looks fine. If the RIGHT column is not empty it should be shown.Ok, but in the select box "Display in" there is no a right column. I tried to add it in the settings, but it doesn't appear.The version of my Contao is 3.0.6. May be tomorrow I'll send you a link to my site in a real ip.Thank you very much 

n/a Points
2014-06-20 4:09 pm

Yes, In the theme Muzical Academy I wanted to add a right column. :) How can I do it?Thank you very much

Staff
12,339 Points
2014-06-20 4:23 pm
Hello Alexander,

Thank you for your question. We are happy to help, but will need a little more time to look into this. We will respond once we have a helpful answer.

If you have any further questions, feel free to post them below.
Thank you,

-John-Paul
Staff
17,314 Points
2014-06-20 11:13 pm
Hello Alexander,

According to this post in the Contao forums, it is possible to have more than one column in the themes. The post states:


Q1. Investigate custom layout sections, defined in Global Configuration in Settings, and applied in Page Layouts.
Q2. configured in Page Layouts (under Themes...the square page icon).... and applied to each page in Site Structure.



I hope that helps answer your question!

Regards,
Arnel C.

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
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!
Need More Help?

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.
}