Default Theme variables 6.1 in Liferay Theme

These are the default Liferay 6 theme variables defined in init.vm.I was searching but did not get any link ,so I hope this will help lot of people also around  the globe. If anything goes  wrong, pls make a comment and also try to add something that will help people around us.

## ———- Common variables ———- ##

$theme_display
$portlet_display
$theme_timestamp
$theme_settings
$css_class
$layout
$page_group
$liferay_toggle_controls
$liferay_dockbar_pinned
$css_folder
$images_folder
$javascript_folder
$templates_folder
$full_css_path
$full_templates_path
$css_main_file
$js_main_file
$company_id
$company_name
$company_logo
$company_logo_height
$company_logo_width
$company_url
$user_id
$is_default_user
$user_first_name
$user_middle_name
$user_last_name
$user_name
$is_male
$is_female
$user_birthday
$user_email_address
$language_id
$w3c_language_id
$time_zone
$user_greeting
$user_comments
$user_login_ip
$user_last_login_ip
$is_signed_in
$group_id

## ———- URLs ———- ##
$show_add_content
$add_content_text
$add_content_url
$layout_text
$layout_url
$show_control_panel
$control_panel_text
$control_panel_url
$show_home
$home_text
$home_url
$show_my_account
$my_account_text
$my_account_url
$show_page_settings
$page_settings_text
$page_settings_url
$show_sign_in
$sign_in_text
$sign_in_url
$show_sign_out
$sign_out_text
$sign_out_url
$show_toggle_controls
$toggle_controls_text
$toggle_controls_url
$update_available_url

## ———- Page ———- ##

$the_title
$selectable
$is_maximized
$is_freeform
$page_javascript_1
$page_javascript_2
$page_javascript_3
$layout
$page = $layout
$is_first_child
$is_first_parent
$the_title
$is_portlet_page
$all_portlets
$column_1_portlets
$column_2_portlets
$column_3_portlets
$column_4_portlets
$column_5_portlets
$maximized_portlet_id
$typeSettingsProperties
$page_javascript_1
$page_javascript_2
$page_javascript_3
$community_name
$css_class
$my_places_portlet_url
$community_default_public_url
$community_default_private_url
$community_default_url
$the_title
$layouts
$pages

## ———- Navigation ———- ##
$nav_items
$has_navigation

## ———- Staging ———- ##
$show_staging
$staging_text

 ## ———- My places ———- ##
$show_my_places
$my_places_text

## ———- Includes ———- ##
$dir_include
$bottom_include
$bottom_ext_include
$content_include
$top_head_include
$top_messages_include

## ———- Date ———- ##
$date
$current_time
$the_year

Flash image Overlapping problem in Browers - Liferay Theme

Have you faced this problem lately where you tried to add a flash file and it overlaps in IE Browser ?

When you face a browser compatibility issues, especially the overlapping of images, you use CSS property z-index for positioning the element on top of another. It could either be an <img> tag or a simple <div> tag. But using the same doesn't work when you have a flash file running. The flash images overlap any element you have in the HTML page and cannot be tackled with Z-index.

For example if when you use IE browsers or Google Chrome browser, the flash image overlaps the menu bar.

 
You can resolve this problem by using the following method

Make the following changes in your template and then make a call from the embed tag.

<param name="wmode" value="transparent">

For example :

<object >
    <param name="movie" value="$video.data"></param>
   <param name="wmode" value="transparent"></param>
   <embed  src="$video.data"  wmode="transparent" type="application/x-shockwave-flash" allowscriptaccess="always">
</embed>
</object>

Now here's how it looks after following the above steps.

Disable browser's Save Password functionality - Liferay Theme

Whenever we use <input type="password"> in our page, the website tells the browser that it is a password field. And when we  provide input for that field and submit the page browser automatically provides one option to remember that password.

Most recent versions of web browsers prompt us to save usernames and passwords for various sites on the Internet. This feature can be useful, but can also put our  money and personal information at risk if we are not careful.

So I finally got a solution to disable it programmatically. This eliminates the need to disable it explicitly on the browser. A small change in the form tag does the trick

<form id="formName" action="login.cgi" method="post" autocomplete="off">

If we add autocomplete="off" in form tag the browser will never offer to remember passwords. This is the easiest and simplest way to disable  Password storage prompts and prevent form data from being cached in session history.

Adding Google Translator in a Liferay Theme

People always prefer their native language for their convence. To browse a website with a feature of tranlsation is what most of them would like. Liferay provides a feature where in we can have our portal in different languages. This is achieved using  Language-ext.properties file.

But there are few drawbacks in using the above.
The  drawbacks are :
1.This requires a customisation in all the Language_xx.properties file. (For eg. If we want 30 languages option then 30 Language_xx.properties files need to be customised).

2.Even after doing so the entire portal is not changed to the language selected,only the variables mentioned in the  Language_xx.properties file are changed and anything from database is not changed.

So here is the convenient solution of having your portal in different languages by integrating the Google's API in two simple steps

Step1:

Copy and paste the below snippet code in the "portal_normal.vm" file

<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Step 2:
We can further change the position of the translate tab. To change the display mode in Horizontal, change the layout to
  layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL

For Bottom-right Position:
   floatPosition: google.translate.TranslateElement.FloatPosition.BOTTOM_RIGHT

For Bottom-left Position:
   floatPosition: google.translate.TranslateElement.FloatPosition.BOTTOM_LEFT

and so on..

To use the the Google's translator only in the selected sections of a website, we can use the below code

<script>
function googleSectionalElementInit() {

new google.translate.SectionalElement({

sectionalNodeClassName: 'goog-trans-section',

controlNodeClassName: 'goog-trans-control',

background: '#99ff99'

}, 'google_sectional_element');

}
</script>

<script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=auto"></script>

Add an element with a class name “goog-trans-section”  and a child element with class name “goog-trans-control”. On clicking the parent element, the contents within the child element will be translated.

Note: We can further customise the look and feel of the Google translator toolbar by strictly maintaining the Google trademark and logos.

The following are the merits and demerits of Liferay's translation and other translation APIs (eg. Google Translator)

Liferay's Translation
 Merits
 1.Its looks professional
 2.Performance will not be affected.
 3.Translation of the content will be controlled by ourselves.

Demerits
 1.It will not translate Dynamic contents
 2.Static contents need to be mentioned in properties files manually
 3.The number of properties file increases as a number of language increases
 4.For CMS (i.e Web content and page navigations) we need to create articles in the respective languages seperately


Google and others Translation tools :
 Merits
 1.No need of any properties file changes
 2.Dynamic content as well as static content will be translated in the respective languages
 3.For Web content and page navigations need not create articles in different languages
 4.Imlementation is easy.

De Merits
 1.Performance issue.
 2.The translation control is handled by third party
 3.We need to adhere to the terms & condition of the third party
 4.We don't have control over any issues that are caused by the third party applications .