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

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

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.

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

The dropzone is a configurable web content where you can drop your files and they will be saved to the document and media library.
-Repository id :
The Document Library Repository id.
 
-Folder Id : 
The Document Library Folder id.
 
Progress Bar
 
The progress bar is a configurable web content using the bootstrap progress bar plugin.
 
Colorbox gallery:

 

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

When creating a site using the instructions below:
 
1. Go to Control Panel > Sites > Sites 
2. Click add new site button and select ACE Theme 
3. Create site 
 
And adding a new site with ACE 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.
 

lr7

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.