Web Content Display
- Created: Thu, 25 Aug 2016
- latest Update: Tue, 26 Jun 2018
- By: Khaoula
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.
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
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.
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 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.
The latest news is a configurable web content where you can build news slider section with the ,title and text.
About us is section is a configurable web content where you can build a section with the image,title and text.
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
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.