Very useful Liferay theme snippets

Creating Liferay themes require some practice in compare to another CMS, but once you follow guidelines and have some experience its simple process. Here is the list of some Interesting Liferay themes Snippets.

1. Different themes for Different languages.

Some time single portal will have different languages , and require different themes  for Right to Left and Left to Right language. Using simple minor css changes.

/* for left to right language */
.ltr ul li {
float: left;
}

/* for right to left language */
.rtl  ul li {
float: right;
}

Including css file specific to local in portal-normal.vm, which can have background Images as well.

#if($locale == "RTL")
<link rel="stylesheet" href="$css_folder/rtl-custom.css" type="text/css" />
#else if($locale == "LTR")
<link rel="stylesheet" href="$css_folder/ltr-custom.css" type="text/css" />
#end

Source: → http://www.liferay.com/community/forums/-/message_boards/category/4624761


2. Sign in and Sign out link

We can have url for sign in and sign out link on same location using condition in portal-normal.vm

#if(!$is_signed_in)
  <a href="$sign_in_url">Sign In</a>
#else
  <a href="$sign_out_url">Sign Out</a></li>
#end

3. Adding class to body if dockbar is visible.

In some theme body background Image is used so when dockbar is visible , there is some position issue for back ground. We can achieve this using simple code below.

#if ($permissionChecker.isOmniadmin())
    <body class="$css_class logged-in">
#else
    <body class="$css_class">
#end
#if ($permissionChecker.isOmniadmin())
    #dockbar()
#end

Dont remove default class “$css_class” just add any new class in this example logged-in class added. Below style will apply only when dockbar is visible.

body.logged-in{
 padding-top:0px;
 background-position: 0px 12px;
} 

4. Debug un-minfied CSS or JS.

Liferay by default minify the CSS and JS to reduce the HTTP requests. While debug we can only view main.css file which have all the css.

We can use Liferay developer mode to disable minified css and js. Another quick trick is add “css_fast_load=0” or “js_fast_load=0” to your url.

http://localhost:808/web/guest/?css_fast_load=0

Source: → http://liferaytips.tumblr.com/post/11401820924/debug-with-un-minified-css-or-javascript-code-in

5-10 Coming soon..


For more Liferay UI stuff you can download this book from Amazon

 

  • http://blog.wasimshaikh.com Wasim Shaikh

    Post your comments here

  • Selva kumar

    Could you tell me how to show popup using portal_pop_up.vm file?

  • http://www.onlinepromocodes.in/JetAirways.com/ JetAirways Promo Codes

    Thanks for providing all the themes. it is very useful.

  • http://www.onlinepromocodes.in/JetAirways.com/ JetAirways Promo Codes

    Thanks for providing all the themes. it is very useful.

  • Mat

    can’t wait for items 5 to 10 !

  • Czeezy

    Hi, on a similar theme, I would like to move the “sign in” prompt from my my public page to a secondary page i.e. keep it hidden from view, accessible only by those who know it’s location.
    Is this possible to do?
    Home page – Currently has “sign in”
    Secret Page – > Would like to move sign in to here

    • http://blog.wasimshaikh.com Wasim Shaikh

      Yes, It can be done. you can post your question here http://forum.liferay.org/ to get answer with details from Liferay staff or Sr. Developers.

  • Mike

    Many thanks for the help to add custom class to body.