Messages For upgrade Browsers in Liferay

This code will be help to
Step1. Add these lines in main.js under this path your_theme/docroot/_diff/js

// java Scipt for Massage upgrade Browsers this is effect < IE7
jQuery(document).ready(function(){
if (Liferay.Browser.isIe() && Liferay.Browser.getMajorVersion() < 7) {
document.getElementById("iepop").style.display='block';
}});

Step 2. Add these lines into portal_normal.vm under this path your_theme/docroot/_diff/templates. You could changes path and name as per your requirement.

<div id="iepop" style="display:none;">
<table>
<tr>
<td>
<span>
We no longer support your browser. Use a modern browser like <br>
And also latest Version of all browser like
<a href="http://www.opera.com"><img src="$images_folder/op.png" width="20px"/></a>
<a href="http://www.safari.com"><img src="$images_folder/sf.png" width="20px"/></a>
</span>
</td>
<td>
<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx"><img src="$images_folder/ie.png"/></a>
<a href="http://www.mozilla.com/en-US/"><img src="$images_folder/ff.png"/></a>
<a href="http://www.google.com/chrome"><img src="$images_folder/gc.png"/></a>
</td>
</tr>
</table>
</div>

Step 3. Add images under these path your_theme/docroot/_diff/images.

op.png
sf.png
ff.png
gc.png
ie.png

Step 4. Add these lines into custom.css under this path your_theme/docroot/_diff/css.

/************** Less Than ie6 browsers alert massage ************/
#iepop {
background:#297BCC;
height:50px;
width:100%;
}
#iepop span {
color:#FFF;
font-weight:bold;
font-size:13px;
}
#iepop span img {
width:20px;
}

Theme and layout in liferay

Create Theme and layout in one war.

1)Create a folder under plugins\themes\your-theme\docroot (e.g layout).
2)Add all the files Under your folder (e.g layout).
a.your_layout.tpl
b.your_layout.wap.tpl
c.your_layout.png
3)Add the files of your theme directly under the docroot/WEB-INF.
a.liferay-layout-templates.xml
4)Edit the file liferay-look-and-feel.xml present in the WEB-INF directory and add the following XML fragment.
<layout-templates>
<custom>
<layout-template id=" your_layout_Id" name=" your_layout_name">
<template-path>/layout/ your_layout.tpl</template-path>
<wap-template-path>/layout/your_layout.wap.tpl</wap-template-path>
<thumbnail-path>/layout/your_layout.png</thumbnail-path>
</layout-template>
</custom>
</layout-templates>
5)Then ant deploy from your theme level.

Apply Color Schemes in Liferay Theme

Apply Color Schemes in Our Theme

The technique documented here creates a "color scheme" that has the borders turned off, but preserves the other attributes of the theme, and does so with a single CSS source set (allowing for easier maintenance). It uses a CSS design pattern known as "CSS sub-class selectors." Note that this technique can be used for more than just borders. It can be used when you have several very small variations on a single theme, and you want to keep all of those variations in a single source file.

Step1. import the color scheme css in custom.css and write css for display the color schemes div

@import url(color_schemes/blue.css);
@import url(color_schemes/red.css);

/*------------color Schemes ------------*/
.color_schemes {
position:absolute;
text-align:right;
width:100%;
margin-top:65px;
}

Step2. Then in portal_normal.vm write this code

<div class="color_schemes">
<table border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle" title="change theme color">
<input type="image" src="$images_folder/color_schemes/red.png" onclick="body.className=value; setCookie('bgColor',value,60);" name="theme" value="red" id="red" width="10px" height="10px">
<input type="image" src="$images_folder/color_schemes/blue.png" onclick="body.className=value; setCookie('bgColor',value,60);" name="theme" value="blue" id="blue" width="10px" height="10px">
</td>
</tr>
</table>
</div>
Step3. Then deploy from your theme