Dealing with browser bugs in liferay themes

you have to deal with a browser bug, you can add browser prefix to a style to target a specific browser issue.The following code is from the custom.css file of the Liferay Classic theme:

For all other browser's you see the html tag using your browser's developer tools their it will create the class as per your browser's name use that class. like see example here.

.ie6 #wrapper {
width: 90%;
}
This style is for Internet Explorer 6 only. For a <div> block whose ID is wrapper,
its width is specified as relatively 90%.

.ie7 #wrapper {
width: 90%;
}
This style is for Internet Explorer 7 only.

.ie8 #wrapper {
width: 90%;
}
This style is for Internet Explorer 8 only.

.ie9 #wrapper {
width: 90%;
}
This style is for Internet Explorer 9 only.

.firefox #wrapper {
width: 90%;
}
This style is for Only firefox All version .

.chrome #wrapper {
width: 90%;
}
This style is for Only Google Chrome All version.

Liferay user avatar image in Liferay themes

If you want to use liferay user avatar image in theme added this line in portal.normal.vm file or any of your velocity micro(vm) files.

<img src="/image/user_male_portrait?img_id=$user.portraitId&amp;" width="30">

iPad theme in Liferay Theme 6.1

Liferay 6.1 iPad theme and jQuery tut

Liferay 6.1 iPad theme beta

Liferay 6.1 iPad theme is available for download now. Please let me know your feedback.

Preview Image

download now

Please feel free to comment or feedback.

Thank's
Original Post http://blog.wasimshaikh.com/2012/10/09/liferay-6-1-ipad-theme-beta/ 

Forget Password URL In Liferay Theme level

Step1: Add these lines in Portal_normal.vm files, where to want like inside your div or table

#set ($forgetpasswordURL = $portletURLFactory.create($request, "58", $page.getPlid(), "RENDER_PHASE"))
            $forgetpasswordURL.setPortletMode("view")
            $forgetpasswordURL.setWindowState("maximized")
            $forgetpasswordURL.setParameter("struts_action", "/login/forgot_password")
            $forgetpasswordURL.setParameter("", "")
                <a href="$forgetpasswordURL">FORGOT PASSWORD</a>

Step2: Write css in custom.css

Create Account URL In Liferay Theme level

Step1: Add these lines in Portal_normal.vm files, where to want like inside your div or table

#set ($CreateAccountURL = $portletURLFactory.create($request, "58", $page.getPlid(), "RENDER_PHASE"))
            $CreateAccountURL.setPortletMode("view")
            $CreateAccountURL.setWindowState("maximized")
            $CreateAccountURL.setParameter("struts_action", "/login/create_account")
            $CreateAccountURL.setParameter("", "")
                <a href="$CreateAccountURL">REGISTER</a><font color="#BBBBBB">|</font>

Step2: Write css to display in custom.css
 

Learn how to navigate in Liferay's user interface.

Learn how to navigate in Liferay's user interface.

Avoid tables for layout in liferay themes

Please try to avoid tables in your code. Its default make a mobile sites and responsive layouts.

• If you’re using tables for layout then you’re mixing presentation with content, so your bandwidth usage is higher than need be, as for every page your visitors view, they have to download the same presentational data again and again.

• Redesigns are a lot harder than they need to be. Since tables can only be laid out on screen one way, if you want to change the layout of a table site, you have to change your tables in every single one of your pages. Not a nice job. With a full CSS site, all you need do is change that one CSS file.

• Tables really don’t help accessibility for viewers with disabilities. Although your layout may look logical displayed on screen, the order in which it will be read by, say, screen reading software, may be very different. Many countries now have their own laws stating that websites must be accessible to all.

• Likewise, people visiting your site using PDAs, mobile phones, and the like do not have the screen space that your big flashy table layout demands. A well written CSS site will generally scale far better to smaller and larger screens than a comparable table layout will.

• Tables are just plain complicated to look at in HTML. Before you even get to any content inside them you’re at three levels of indentation.

• Tables can hurt search engine ratings. If you’re using a “classic” left hand navigation table, your navigation will be placed before your content in your HTML file. Because Search Engines generally place more importance on the things nearer the beginning of a page, the chances are your content will be largely ignored.

• Tables can take longer to display correctly than CSS. If you use Internet Explorer, you’ll have seen this many times when loading tabled sites. While everything on the page is downloading, the IE will keep rendering, bouncing the contents of the page back and forth until the download is complete and it knows where to place everything..

So, how should you write pages? With proper semantic markup, that’s how! Your markup shouldn’t be describing how to lay your content out on the page, just what the different parts of your document are. So paragraphs will be inside <p> tags, lists are in <ul> and <ol> tags, etc. For bits that your want to move around the page for your actual layout, use <div> tags.  

Get Theme image path in WCM Template - Liferay Themes

Create Structure and Template. More Detail. 

 

In your Template add this line :
#set ($Image_path = $request.get("theme-display").get("path-theme-images"))
In Image tag. The image path will go your-theme/image folder then you need set your image path

set your image path:
<img src= "$Image_path/common/add.png"/>

In Style as css:
background:url($Image_path/common/add.png);