Web Content Display

Inspire

Inspire Documentation

  • Created: Thu, 18 Jul 2013
  • latest Update: Mon, 10 Dec 2018
  • By: Khaoula

Deliverables

Deliverable are:

inspire-theme-6.1.1.1.war: The theme installation package. 

inspire-theme-src-6.1.1.1.zip: The theme source code.

ckeditor-hook-6.1.1.1.war: A Hook for the default Liferay web text editor (CKEditor) adding additional menu entries containing  usable styles from the theme. They can be used directly when creating Webcontent. 

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:

  • Copy the theme war to <liferay installation>/deploy folder which will trigger the theme hot deployment.
  • Use the Private Plugins Installer. This plugin doesn't ship with the standard Liferay installation (6.1 GA2 +) but can be directly downloaded from the themes private site (and also copied to the deploy folder) or installed from Liferay Marketplace. The theme can be installed using the Private Plugins Installer by going to Control Panel -> Plugins Installation and then clicking "Private Plugin Installer" 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 in the same way the Private Plugins Installer (Either directly downloaded from the themes private site or Marketplace).  

The contact form in the "Contact us" page of the Site templates needs Web Form portlet which also can be installed the same way as the former plugins. 

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

inspire-theme is still in queue because it is missing web-form-portlet.

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,web-form-portlet

 

If you have the module version 1.0 of the ressource importer plugin please update it to Our version or the version in the Marketplace , otherwise the import will not work correctly.

if you forgot to update the resources importer before deploying the theme you will get the following error message on the sliders:

 

The selected web content no longer exists.

 

To fix this problem you have to :

-delete the site template.

-update the resources importer with  the latest version  from liferay marketplace.

-redeploy 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 Manage page popup opens, you have to select "Public pages"  ( root of pages tree on the left side of popup )  you will see two panels "Current Theme" and "Available Themes" select inspire from "Available Themes" panel as showed below and hit 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  through "Portal -> Users and Organizations -> Add", on the tab  "Organization Site"  check  "Create Site". For public pages select "Beveld Theme" as showed on the screenshot below and save.

You can open the site pages by clicking the "Open Site pages" link.  You can than adapt the organization according to your needs. 

Note:  When opening the site pages, you may see all the languages codes in your header as showed below.

This is probably due to the fact that all the languages are per default enabled in Liferay. You will probably not need all the languages for your Site. To limit them you have to add the list of languages in the portal_ext.properties file, e.g.: 

locales=en_US,de_DE,es_ES,fr_FR

You can also disable the language switcher in the header as will be showed below. 

Change the Theme Settings

As mentioned below, to change the theme settings you have  to open "Manage page" popup by  clicking  "Manage" menu in the Dockbar, than "page", than select "Public pages" .On the "Current Theme" panel  you will find the "Settings" and  "Color Schemes" collapsible panels Where you can    : 

  • Change the color scheme
  • Display or hide the chat bar
  • Display the Footer (Widget Footer) and specify their Webcontent
  • Display the bottom footer
  • make the Dockbar transparent 
  • Show Portlet Borders by Default (Default Liferay setting)
  • Show the language Switcher

 

Change the color scheme

Inspire ships with 6 different color schemes. Selecting the Option button of the corresponding color scheme saving will switch the theme to the corresponding scheme.

Display or hide the chat bar

In the case you applied this theme to the private pages of the organization, the chat bar will show to every logged user. Disabling this option will also hide the chat bar for all the pages. 

Display the Footer (Widget Footer) and specify their Webcontent (display-widgets-footer)

The footer is composed of two areas, the widget footer containing footer relevant content like (e.g. Demo) Links or Social Media icons and the footer area in the bottom for Copyright  or Powered by links. Disabling this option will hide the widget footer.

widgets-footer-section-1-article-id field should contain the ID of the webcontent of the first Footer Section (SAMPLE FOOTER in the screenshot above)

widgets-footer-section-2-article-id field should contain the ID of the webcontent of the seconf Footer Section (FOOTER LINKS in the screenshot above)                                                

widgets-footer-section-4-article-id field should contain the ID of the webcontent of the second Footer Section. In this screenshot above, the links to site pages are showed. These links are showed automatically in the section you put the string "Site pages" in its widgets-footer-section- -article-id  field. 

widgets-footer-section-2-article-id field should contain the ID of the webcontent of the second Footer Section (FOOTER LINKS in the screenshot above). FOOTER-LINKS, FOOTER-SOCIAL and "Site pages" are the ids of a webcontent having templates that ship with the theme and are loaded with the Ressources Importer Plugin when the theme is deployed.

FOOTER-LINKS

to change the Links in the FOOTER-LINKS widget, just search for the webcontent with this ID (manage -> Site content -> Webcontet) and update the links defined in it.  

FOOTER-SOCIAL

To change the social media icons please open the Webcontent with the id FOOTER-SOCIAL. As showed in the screenshot above, you can show or hide a given social media icon when checking or unchecking the given social media checkbox. The Url field should contain to your  profile in the given social media website.

Display the bottom footer

to change the bottom footer you have to edit the html code below directly. Just copy it, edit it in a text editor and paste it back to the field. 

<div id="copyright" class="col-left"> <p>Inspire © 2013. All Rights Reserved.</p> </div>

<div id="credit"> <p>Powered by <a href="http://www.liferay.org">Liferay</a></p></div>

The default (Liferay) style of the dockbar may not fit to the theme and affect the look of the page. Make the dockbar transparent will adpat the style of the dockbar to the theme which will give a more homogenous view of the page.  

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 and open the Site Templates in the Portal section and click "Inspire Theme ->Open site template" and than in the dockbar click Manage->Site Content and than the entry "Web Content". After that please click the tab Templates and than the 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. Please click  in the dockbar of your site Manage -> Site Content-> Webcontent and than templates tab. Please click again the configure icon as before and choose Export/Import and this time import the lar.

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 template icon as showed below.

The following additional webcontent templates should showed.

 

TEXT-LINK-IMAGE-SLIDER

It is a sliding image with a Title and a subtitle. The slide show has extensive settings allowing you to adapt it to your need. Some of them are showed in the image below. 

Notice: If the control elements (e.g. Next Previous or Pagination) are not shown, please check if their corresponding settings are checked

MULTI-IMAGE-SLIDER

Carousel

Notice: Please make sure that the pagination setting is activated to show switching box and allow smooth page switch in the carousel slideshow

 

FIXED-TEXT-SLIDING-IMAGE

 

CKEditor Hook

Using the webcontent editor (CKEditor hook )

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. 

Deploying the theme from sources

Regarding redeploying the theme from sources, we had to separate CE from EE version and that's why we added the extension ce-ga2 to the built binaries. Liferay uses also 6.1.1 and 6.1.20 to differentiate between CE and EE (http://www.liferay.com/de/documentation/liferay-portal/6.1/user-guide/-/ai/editions-of-lifer-4). We were hesitating using this schema because it will cause some irritation to our customers. They will think that 6.1.20 is a newer version. Therefore when you deploy first the war and then deploy from the sources again you will not be able to update the theme because you will get an error stating that version 6.1.1.1-ce-ga2 is newer than version 6.1.1.1 therefore you have to update your liferay-plugin-package.properties and set module-incremental-version=1 to module-incremental-version=2.

Theme file structure

CSS

please visit the styles pages for a detailed overview of the the CSS styles.