Right To Left Theme development

[Mohamed Farid Locatelli, módosítva 16 év-val korábban]

Dear Developers

i interest to develop a theme that support Right To Left (RTL) Languages, as well as Arabic, Persian, Urdu or even Hebrew.
i start working with Basic Theme and make a velocity file such as when u chose Arabic it convert to the RTL version of the theme,
but well as the theme is rely under the CSS files, it need kind of designer and CSS art wok knowledge, so i suggest to start a project here to have as start a RTL version of Basic Theme ...

i ll attache my work here so it will be helpfull to have all work together, let collaborate to make Liferay more usable to RTL users

[Amine Bousta, módosítva 14 év-val korábban]

Hello Mohamed

I was working on this this morning and had some interesting results.

I'm working on the classic theme of the 5.3 Liferay version.
I want to be able to display a page in a LTR as well as in a RTL manner depending on the current language.

First of all, check if you're declaring correctly the direction of the HTML tag in your portal_normal.vm template :

Then let's create a css file that will be dedicated to RTL issues. Let's say : "custom_rtl.css" in your css folder.
As classic themes are mostly designed for LTR, RTL styles will be exceptions that are going to override default styles.

Now we can insert in portal_normal.vm a velocity statement that will load the custom_rtl.css depending on your current language.
At the end of the "head" section of your portal_normal.vm, copy/paste this:

#if ($locale.language == "ar")
	#set ($rtlCssURL =  $themeDisplay.getTheme().getCssPath()+"/custom_rtl.css")	
	#css($rtlCssURL)
#end

With this code, if you switch from english to arabic custom_rtl.css rules will be loaded and override default css rules. (be sure you paste this at the end of the head section)

As you can see, the statement's condition is "locale.language=="ar"".
But there are other languages that are RTL.
But I did not figure out how to get the direction of the current language in Velocity. If you have a clue....
If you want to consider Hebrew and Persian you can add OR operators but it would be better to get the language direction directly.


I just did very few fixes in custom_rtl.css in order to display the menu from RTL, the breadcrumb from RTL and portlets titles from RTL. I decided as well to display fonts bigger because I find that default character size for arabic is too small, don't you?

BODY {
	font-size:14px;
}

#navigation li {
	float: right;
}

.breadcrumbs li {
	float:right;
}

.portlet-topper {
	text-align:right;
	float:right;
	width:100%;		
}

.portlet-title {		
	float:right;
}

Now I have to figure out how to move breadcrumbs and menu icons into the right and I think that it will be a good first version.
Please let us know if you find other css fixes for this issue



[EDIT]

A patch to put the company logo to the right :

#banner h1.logo {	
	float: right;		
	margin: 25px;
}

#banner .logo a {
	float: right;	
}

[lex catz, módosítva 14 év-val korábban]

hello there guys, I'm a newbie in using liferay, just want to ask is how do I get the dock to go to the right side if I'm going to use it for other language.

I already created a custom css for it but I cant manage to get the dock to go to the right side.

Thanks and advance

[krunal b soni, módosítva 14 év-val korábban]

Hi lex,

put this code in to your custom.css to show it on the right

.js .lfr-dock.interactive-mode {
right: 0px;
}

check for exact css class for dock.

Regards,
Krunal Soni

[lex catz, módosítva 14 év-val korábban]

thanks for the reply krunal, but when I tried the code you specify, it only stretch the dock from left to right.

I was wondering which of code in the navigation css should I change if I want to move the dock from the other side LTR.

Thanks

[Bavithra Rajendran, módosítva 14 év-val korábban]

Hi !

You can set the position of dock in .js .interactive-mode h2{} by giving the values like,

.js .interactive-mode h2{
right:20%;
}

Or else you can also set the values directly in the dock.vm file which is,

<div class="lfr-dock interactive-mode lfr-component" style="cursor:pointer; position:absolute; z-index-10; right:20%; top:3%">

Thanks,
Bavithra Rajendran

[lex catz, módosítva 14 év-val korábban]

thanks bavithra, ill try your suggestion and update my progress

[Lori Bannon, módosítva 13 év-val korábban]

Hi Amine,

I have tried your suggestion:

#if ($locale.language == "ar")
#set ($rtlCssURL = $themeDisplay.getTheme().getCssPath()+"/custom_ar.css")
#css($rtlCssURL)
#end

#if ($locale.language == "fr")
#set ($rtlCssURL = $themeDisplay.getTheme().getCssPath()+"/custom_fr.css")
#css($rtlCssURL)
#end

and I can't get it to work. I made sure to put it just before the bottom head tag </head> and checked and double checked dir language... I also put the $rtlCssURL in the content area of the portal_normal.vm file and it shows that it is getting the correct path (/css/custom_ar.css) depending on which locale I switch to... I even tried using an #include in the body as well as changing the path to $fullCssPath... what else am I missing?? No matter what I try I can't get it to work. I even added @import url(custom.css); into the main.css file.

I also did a search for #css and can't find much

I sure hope you are still around because I could sure use your help

Thanks ahead.

[doods catz, módosítva 13 év-val korábban]

hello guys, just want to know if somebody already got the breadcrumbs from going to rtl?
I use the code above to float it to the right but the direction is still lrt.

[Bavithra Rajendran, módosítva 13 év-val korábban]

Hi !

Try this in custom_common.css :

.site-breadcrumbs ul{
float:right;
width:100%;
}

.site-beradcrumbs li{
float:right;
}

Thanks,
Bavithra Rajendran

[Neetu Mishra, módosítva 11 év-val korábban]

Lori Bannon:

#if ($locale.language == "ar")
#set ($rtlCssURL = $themeDisplay.getTheme().getCssPath()+"/custom_ar.css")
#css($rtlCssURL)
#end

#if ($locale.language == "fr")
#set ($rtlCssURL = $themeDisplay.getTheme().getCssPath()+"/custom_fr.css")
#css($rtlCssURL)
#end

and I can't get it to work. I made sure to put it just before the bottom head tag </head> and checked and double checked dir language... I also put the $rtlCssURL in the content area of the portal_normal.vm file and it shows that it is getting the correct path (/css/custom_ar.css) depending on which locale I switch to... I even tried using an #include in the body as well as changing the path to $fullCssPath... what else am I missing?? No matter what I try I can't get it to work. I even added @import url(custom.css); into the main.css file.
.

Hi Lori,

Try this:

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

It's working fine for me

Regards,
Neetu

[Mahmoud Alimohamadi, módosítva 10 év-val korábban]

There is a hook that makes Liferay bi-directional, ie. when selecting a right to left language (Persian for example), Liferay UI is totally displayed in RTL.

Bi-Directional support for Liferay

http://www.liferay.com/marketplace/-/mp/application/25287454

[Banafshe Bamdad, módosítva 10 év-val korábban]

Dear Mr. Alimohamadi,

Thank you for your great Hook.

Am I right? If I want to add a new theme to Liferay, at first I should add an entry in «/LIFERAY_HOME//tomcat-7.0.27/webapps/ROOT/WEB-INF/liferay-look-and-feel.xml» file, and then add the theme package in «/LIFERAY_HOME//tomcat-7.0.27/webapps/ROOT/html/themes» and «/bidi-hook/custom_jsps/html/themes». Then modify files in «/bidi-hook/custom_jsps/html/themes». I mean, my new theme can not be a seprate "Liferay Theme Poject" that is created by «liferay-plugins-sdk/eclipse»

Thanks in advance

[Mohamadreza Mash'al, módosítva 10 év-val korábban]

hi Mahmoud,
Thanks for sharing your great work with us. In the screenshots I see your calendar shows Persian dates. Do you have a fix for that also? and would you mind sharing that too?
Thanks a lot