Structure & Template with repeatable in liferay

Sample Repeatable filed in structure and template in web content portlet.

Step 1: Create a structure click Lunch editor its open a popup window paste this code.

<root>
  <dynamic-element name='text' type='text' index-type='' repeatable='true'>
    <dynamic-element name='image' type='image_gallery' index-type='' repeatable='false'></dynamic-element>
  </dynamic-element>
</root>

Step 2: Create a Template click Lunch editor its open a popup window paste this code.
#foreach($txt in $text.getSiblings())
       #foreach($img in $txt.getChildren())
                    <img src="$img.getData()" /> &nbsp; <span>$txt.getData()</span>
       #end
#end

Step 3:Use this structure and template in web content portlet., You will find the add button if you click the button the filed will repeat one. you could delete this filed as  click delete button to delete the filed.

Flash image Overlapping in liferay for IE and Chrome

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.

Details CSS in liferay Theme

By default, CSS styles in liferay can be found in folder /css. Bundle liferay with Classic theme means that css folder path: ~/tomcat-6.0.18/webapps/ROOT/html/themes/classic.

There are few css styles file. Main css (main.css) located all styling files from the lowest to highest (in term of priority) from top to bottom.

Let say, I want to add a new css file (e.g mystyle.css). I must import this file in main.css – add this new line @import url(mystyle.css); - the styles in this new file will overwrite all styles in other files above it. For a standard practice, custom.css has the highest priority.

Sometimes, new developer understood this thing but when doing some customization in custom.css nothing changes. Why? It is because the server not refers to that changes. When developer inspected the element using firebugs, the css style reference maybe main.css or base.css only. How to overcome this problem?

For development purpose only, developer must add new properties in portal-ext.properties (/webapps/ROOT/WEB-INF/classes). The properties are shows as the following.

## FOR DEVELOPMENT PURPOSE, NEED TO REMOVE
##AT PRODUCTIONS ##

## Set this property to true to load the theme's merged CSS files
##for faster loading for production.
## Set this property to false for easier debugging for development.
##You can also disable fast loading by setting the
## URL parameter "css_fast_load" to "0".

theme.css.fast.load=false

## Set this to flase to disable the display of CSS logging.

theme.images.fast.load=false

## Set this property to true to load the packed version of
##files listed in the properties "javascript.barebone.files" or

## "javascript.everything.files".

## Set this property to false for easier debugging for development.
##You can also disable fast loading by setting the
## URL parameter "js_fast_load" to "0".

javascript.fast.load=false

## Set this to true to enable the display of JavaScript logging.

javascript.log.enabled=true

## Setting it to false is useful during development if you need
##to make a lot of changes.

layout.template.cache.enabled=false

## Disable Liferay from opening a new browser window
##everytime start the server

browser.launcher.url=
##

## Last Modified

## Set this to true to check last modified date on server side CSS and

## JavaScript. On Development purpose just set it false

last.modified.check=false

## Enabling OpenOffice integration allows the
##Document Library portlet and the Wiki
##portlet to provide conversion functionality. This is tested with
## OpenOffice 2.3.x and 2.4. To start OpenOffice as a service,
##run the command:
openoffice.cache.enabled=false

## Set the Velocity resource managers. We extend the
##Velocity's default resource managers for better scalability.

velocity.engine.resource.manager.cache.enabled=false

## The cache filter will cache content. See ehcache.xml to modify the cache

## expiration time to live.

com.liferay.portal.servlet.filters.cache.CacheFilter=false

## The theme preview filter generates a preview of the currently applied

## theme that can be used by the Dreamweaver Theming plugin.
##This is disabled by default.
##Set the "themePreview" parameter to "1" in the URL to access

## the theme preview for any page. For example, a URL can be

## http://localhost:8080/web/guest?themePreview=1.

com.liferay.portal.servlet.filters.theme.ThemePreviewFilter=true

Disable border for all Portlet in liferay

liferay-look-and-feel.xml (tomcat\webapps\ROOT\WEB-INF)

Add the following setting in liferay-look-and-feel.xml for disabling border for all portlets by default.

<theme id="classic" name="classic">
       <settings>
            <setting key="portlet-setup-show-borders-default" value="false" />
        </settings>
</theme>


or

Portal-ext.properties (tomcat\webapps\ROOT\WEB-INF)

You can change it through property file also by adding this entry:

theme.portlet.decorate.default=false

Add portlets in Liferay theme Level

For Adding portlet in theme level., If we add portlet in theme it will display once our theme as selected. Here we are taking sign_in portlet.

Step1: Create your own theme and add portal_normal.vm file under /docroot/_diff/templates/portal_normal.vm.

Step2: Paste this code in header tag:

#set ($globCounterOfThemeDynamicPortletId = 1000)
#set ($locPortletId = "58_INSTANCE_" + $globCounterOfThemeDynamicPortletId)
#set ($globCounterOfThemeDynamicPortletId = $globCounterOfThemeDynamicPortletId + 1)
$theme.runtime($locPortletId, "", $velocityPortletPreferences.toString())

(Note: change your portlet Id in this line here we are taking 58 for login portlet., See all Liferay default Portlet Click Here #set ($locPortletId = "58_INSTANCE_" + $globCounterOfThemeDynamicPortletId) )


Step3: Wirte Css for your portlet in Custom.css file under /docroot/_diff/css/custom.css.