Web Content Display
Ace
Ace Documentation
- Created: Wed, 10 Aug 2016
- latest Update: Fri, 30 Nov 2018
- By: Khaoula
Deliverables
Deliverable are:
ace-theme-6.2.x.0.war: The theme installation package.
ace-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)
Installation
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:
ace-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
required-deployment-contexts=resources-importer-web
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 "Ace" 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 "Ace 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
- Display the side bar shortcuts
- Display the footer
- Show the language Switcher
Change the color scheme
ace ships with 4 different color schemes. Selecting the Option button of the corresponding color scheme saving will switch the theme to the corresponding scheme.
Display the footer
footer-section-1-article-id field should contain the ID of the webcontent of the Footer ( FOOTER in the screenshot above).
Show the language Switcher
The language switcher is basically the "language switcher" Liferay portlet that is emended in the theme. This option will allow to show it in the top left of all the pages without the need to create a special page layout for it.

Use the Webcontent templates
Please go to control panel -> Site Templates -> ace 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.
Faq
The faq is a configurable web content where you can build your site faq section.
Accordion
Build a web content using the bootstrap accordion plugin with the accordion web content template.
Tabs
Build a web content using the bootstrap tabs plugin with the tabs web content template.
-tabs left :
Dropzone



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 on the Gallery page 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.
Liferay 7
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.
CSS
please visit the shortcodes pages for a detailed overview of the the CSS styles.
JS
please visit the shortcodes pages for a detailed overview of the the Java script and Jquery.