Liferay Themes, Liferay, Lifeay UI, Lifeay Font-end: February 2012

Friday, February 3, 2012

Create Custom control panel theme in Liferay theme





 

  
  


   

    

    <elseif>

                   
    <equals arg1="${theme.parent}" arg2="control_panel"
    />

                   
    <then>

                       
    <copy todir="docroot" overwrite="true">

                           
    <fileset

                               
    dir="${app.server.portal.dir}/html/themes/control_panel"

                               
    excludes="_diffs/**,templates/**"

                           
    />

                       
    </copy>

                        <copy todir="docroot/templates" overwrite="true">

                           
    <fileset

                               
    dir="${app.server.portal.dir}/html/themes/control_panel/templates"

                               
    includes="*.${theme.type}"

                           
    />

                       
    </copy>

                   
    </then>
    </elseif>







 
 



Step 1: Create theme 


       
Step 2:Add these lines in build-common-theme.xml





































 

  
  


   

    

<?xml version="1.0"?>

    <!DOCTYPE project>

    

    <project name="acs2-theme" basedir="."
    default="deploy">

        <import file="../build-common-theme.xml"
    />

    

        <property name="theme.parent" value="control_panel"
    />

    </project>


   


 
 

Step 3:Change the value _unstyle to control_panel
















Step 4: Now do ant deploy for your theme level

Different styles based on languages in Liferay Themes.

If you need different languages in your portal and also different theme based your language

Step 1 : Add languages portlet in banner. Using runtime in portal-normal.vm

Step 2: Write the css for align the languages portlet

Step 3: Add these lines in portal_normal.vm


#if($locale == "RTL")
<link rel="stylesheet" href="$css_folder/rtl-custom.css" type="text/css"></link>
#else if($locale == "LTR")
<link rel="stylesheet" href="$css_folder/ltr-custom.css" type="text/css"></link>
#end
Step 4
rtl-custom.css,lrt-custom.css these both files having css related to body of theme. these files would place on css folder of your theme.

You need to apply css on body something as below 


body {
    background:url("../images/bg/body.jpg") repeat-x scroll left 90px #EEEEEE;
    font-size:10px;
    font-family:verdana,sans-serif;
    margin:0;
    padding:0;
}
Another Ways :
Step 1: we could also add class in body tag it will create css based on your language. Or if you want use any place in VM files you could add this ${locale.toString()} in the class.

 Step 2: You need to apply css like this, based on the your language the class will create in the body. Just you need to call the parent class and your class. Here i am using different style padding style for navigation

.de_DE .navigation li a {
padding: 0px 10px;
}

Pages

Friday, February 3, 2012

Create Custom control panel theme in Liferay theme

Different styles based on languages in Liferay Themes.