Pixelpress

Pixelpress Documentation

• Created: Fri, 27 Sep 2013
• latest Update: Fri, 27 Sep 2013
• By: Adel Frad

Deliverables

Deliverable are:

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

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

Notice: In this section, screenshots from another theme (Beveled) are used. Installation, usage and theme file structure is the same for all our themes (This may change later with the new updates: vaadin Subtheme and the E-Commerce  extension). The technical section is however different (especially CSS). We are doing our best to finish it as soon as possible. Please ask for help whenever you need it. You can even ask for chat session with one of our guys if needed. 

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 installatio>/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: 

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

You can remove this dependancy from the theme source and deploy it again (TODO Link ). In this case, the Site and Webcontent templates will not be available.

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 popoup opens, you have to select "Look and Feel" in the box left and select "Beveled" 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 the box "Create Site". For public pages select "Beveld 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 show the search Porltet

Change the color scheme

Beveled 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>Beveled © 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).

Show the search Porltet

The same for the search portlet as for the language switcher. This option will also 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 and open the Site Templates in the Portal section and click "Beveled 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.

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