Bizray

Bizray Documentation

• Created: Sun, 16 Mar 2014
• latest Update: Tue, 26 Jun 2018
• By: Khaoula

Deliverables

Deliverable are:

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

bizray-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: 

bizray-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 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 popup opens, you have to select "Look and Feel" in the box left and select "Bizray" 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 "Portal -> Users and Organizations -> Add", please "Organization Site"  check the box "Create Site". For public pages select "Bizray Theme" as showed below ans 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 to have to go to click the "Manage" menu in the Dockbar, than "page", than select "Public pages" Changing the theme settings 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
• And set the header to fixed position or not

Change the color scheme

bizray 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>bizray © 2012. 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.  

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. You have also, through the combo box, to choose the appearance of the language, flags, language (Long or shortcode), or as drop down (language + flag).

Set the header to fixed position or not

You can set the header to fixed or not  throught this option . 

Use the Webcontent templates

Please go to control panel and open the Site Templates in the Portal section and click "bizray 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.

Portfolio

The portfolio is a configurable web content where you can add images and define an open on new tab link and a see on fancy box link.

Home Slider

Home slider  introduce camera slider plugin  into Liferay by implementing it as a highly configurable web content where you can adjust all the plugin parameters by using liferay web content display portlet. Visit the plugin site for more info about slider paramaters.

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. 

MULTI-IMAGE-SLIDER

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.

JS

Images

Templates

Hook

Ressources-importer

5.2 integration

Now bizray is compatible with Liferay 5.2.x. It will not contain all the features than with Liferay 6.1 or 6.2 but you will have the majority of the features witch is real good advances for Liferay 5.2.x.

Delivrables

Delivravles are :

bizray-theme-5.2.3.1.war: The theme installation package. 

bizray-theme-src-5.2.3.1.zip: The theme source code.

bizray-content.portlet.lar: contain all the webcontent compatible with liferay 5.2.x (sliders, portfolio...), because this liferay version didn't contain resources importer plugin the webcontent need to be imported manually.

User Documentation

in this part we will focus in the thems changes between the 6.1 and the 5.2 version, so if any information is not montionned in this part it means there no change and you can follow the previous part of the documentation to get what you need.

No Site Template

like we said before the resources importer didn't exist before Liferay 6 so in the 5.2 version there is no resources importer and no site template, the portal admin have to create the website from the begening after applaying the theme.

After apply the theme

after you apply the bizray theme to your site, only css effects can be seen no sliders, portfolio, footer all need to be imported and configured by the admin.

Import the theme content

to import the bizray content go to control panel-->web content-->export/import

then select the "bizray-content.portlet.lar" file and submit the form.

now you should have all the bizray content and it can be configured and added in the site pages like discriibed in previous section of the documentation.

Theme settings

the theme settings in liferay 5.2 are not advanced like we have seen in liferay 6, there is no ui where you can change the settings values and the only way to change them is to change their values in the "liferay-look-and-feel.xml" file under "docroot/WEB-INF" folder in the source package and the rest is same then liferay 6.

all you have to do is to change the theme-settings value then deploy the theme.

You can see many kind of theme settings in the xml file :

• Boolean settings : accept only boolean value (true/false).
• String settings : accept defined text value.
• ID settings : accept web content id.

Boolean settings:

In general these settings allow you the show or not some features like showing header bar or showing the language choice...

String settings:

<setting key="language-displayStyle" value="Flags"></setting>

this is an example that you can find in the xml file, this setting is responsible on the display style of the language choice, for example value="Flags" will display the language choice on this way: 

the only accepted value for this setting are (Flags, Drop Down, Long Text), you have to respect the case sensitive.

ID setting

if you want to change the text on the red square you have to change the setting value by the content id you want to show.

you can add a web content id as value of this type of setting it also accept text if the content you want to show is a simple text with no html tags, only "Site pages" is predefined text to show the site pages in footer.

Issues

while the deploiement you may get some exception, nothing to warray about we try to fix for next updates :

09:52:22,041 INFO  [ThemeHotDeployListener:90] Registering themes for bizray-theme