Web Content Display


Atrek documentation

  • Created: Thu, 25 Aug 2016
  • latest Update: Tue, 26 Jun 2018
  • By: Khaoula


Deliverable are:

atrek-theme-6.2.x.0.war: The theme installation package. 

atrek-theme-src-6.2.x.0-ce-ee: The theme source code.

You can download the packages (or one of its older version) from our software catalog.  

User documentation

This section will allow you to start using the theme directly in your new website or an existing (For an existing one, please read carefully section Use the Webcontent templates)


To install the theme in your Liferay instance, you can either:

  • Hot deploy : Copy the theme war to <liferay installation>/deploy folder which will trigger the theme hot deployment.
  • Use the App Manager : The theme can be installed using the App Manager by going to Control Panel -> Apps ->  App manager and then clicking Install tab and then upload the war file. This will also trigger hot deployment. 

To be able to use the templates for Site and Webcontent that are shipped with the theme, you need to install the Resources Importer plugin. It can be downloaded and installed from the Control Panel -> Apps ->  Store

If you don't install the Resources Importer , the theme will stay in the deployment queue and will not complete deployment. You will see the following INFO message in Liferay Log: 


atrek-theme is still in queue because it is missing resources-importer-web. 

This is due to the dependancy on these two portets declared in the liferay-plugin-package.properties file of the theme


Apply the theme

If you installed Liferay themes before you can skip this session.

After installing the theme, you can apply it to your actual site pages by opening the page manager

When the popup opens, you have to select "Look and Feel" in the box left and select "Atrek" as a new theme as showed below and save to apply the changes.

Using the Site Template

The Site Template has the same pages as the themes Demo Site in Themeray. You can use it as a template for your new Site organization and adpat it to your need.

When creating the organization in the Control panel of Liferay through "Control Panel -> Users and Organizations -> Add".

On "Organization Site"  check the box "Create Site". For public pages select "Atrek Theme" as showed below and save.

Change the Theme Settings

As mentioned below, to change the theme settings you have to open the "Admin" dropdown in the Dockbar, click "pages", than select "Public pages" Changing the theme settings you can: 

  • Change the color scheme throught the gear capability in the frontend theme

Change the color scheme

Atrek ships with many different color schemes.Changing the color scheme is available with the gear capability



Display the  footer

widgets-footer-section-x-article-id field should contain the ID of the webcontent of the Footer ( FOOTER in the screenshot above). 

Use the Webcontent templates

Important notice: When you create an organization Site based on the theme as explained before, all the templates will be ready for use in your new Site pages. However, when you apply the theme to existing website, the templates (and their corresponding structures) will not be available for use. For this, you have to update your actual Site templates from the themes Site templates performing the following steps:

Please go to control panel  -> Site Templates -> atrek Theme   -> Content ->Web Content. After that please click  Configuration icon as marked in the screenshot below.

Please choose Export/Import and than click the save button. Please save the lar file and than close the Popup. After that please go back to your site and redo the same process to import the lar you exported. 

Important notice: You have to unsure that your portal language is set to en_Us on the moment of the import.

To use one of these templates, please create a new webcontent and click in the structure icon as showed below.

The following additional webcontent structures should showed.

Home Slider

Home slider is a configurable web content where you can set a custom slider section with text.


The feature section is a configurable web content where you can build feature section with the image,title and text.


Latest news

The latest news is a configurable web content where you can build news slider section with the ,title and text.


About us

About us is section is a configurable web content where you can build a section with the image,title and text.


Blog news


Footer links




After selecting the URL of the image that you want to display in the media gallery you have to added '.extension' in the end of URL to prevent any issue that occur when clicking images to expand the images do not display correctly , so the URL will be like this '/documents/10667/0/image-2/10ca90de-4d67-4fe2-81a9-9f454e8a94a0?t=1426756566000.jpg' with '.jpg' in the end.


Text image slider


Liferay 7

When creating a site using the instructions below:
1. Go to Control Panel > Sites > Sites 
2. Click add new site button and select Atrek Theme 
3. Create site 
And adding a new site with Atrek theme it will show an error message says "Your request failed to complete, please enter a unique name", don't be afraid you will find it in the sites list and its pages will works fine.


Technical documentation

This documentation will help you to further customize the theme (CSS, JS, Images etc...) or to get information necessary to simplify using it directly in your JSP (Html code) or Taglibs.