Web Content Display
- Created: Thu, 18 Jul 2013
- latest Update: Mon, 10 Dec 2018
- By: Khaoula
inspire-theme-220.127.116.11.war: The theme installation package.
inspire-theme-src-18.104.22.168.zip: The theme source code.
ckeditor-hook-22.214.171.124.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.
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:
- 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
if you forgot to update the resources importer before deploying the theme you will get the following error message on the sliders:
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.:
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.
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.
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
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.
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.
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.
Using the webcontent editor (CKEditor hook )
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 126.96.36.199-ce-ga2 is newer than version 188.8.131.52 therefore you have to update your liferay-plugin-package.properties and set module-incremental-version=1 to module-incremental-version=2.
Theme file structure
please visit the styles pages for a detailed overview of the the CSS styles.