Vista Combinata Vista Piatta Vista ad Albero
Discussioni [ Precedente | Successivo ]
toggle
Mohamed Farid Erouk
Right To Left Theme development
9 marzo 2008 7.50
Risposta

Mohamed Farid Erouk

Punteggio: New Member

Messaggi: 2

Data di Iscrizione: 9 marzo 2008

Messaggi recenti

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
Allegati: classic.zip (669,9k)
Amine Bousta
RE: Right To Left Theme development
23 luglio 2009 5.07
Risposta

Amine Bousta

Punteggio: Junior Member

Messaggi: 32

Data di Iscrizione: 2 agosto 2007

Messaggi recenti

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 :
1<html dir="#language ("lang.dir")" xmlns="http://www.w3.org/1999/xhtml">


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:

1#if ($locale.language == "ar")
2    #set ($rtlCssURL =  $themeDisplay.getTheme().getCssPath()+"/custom_rtl.css")   
3    #css($rtlCssURL)
4#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?

 1BODY {
 2    font-size:14px;
 3}
 4
 5#navigation li {
 6    float: right;
 7}
 8
 9.breadcrumbs li {
10    float:right;
11}
12
13.portlet-topper {
14    text-align:right;
15    float:right;
16    width:100%;       
17}
18
19.portlet-title {       
20    float:right;
21}



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 emoticon





A patch to put the company logo to the right :


1#banner h1.logo {   
2    float: right;       
3    margin: 25px;
4}
5
6#banner .logo a {
7    float: right;   
8}
lex catz
RE: Right To Left Theme development
11 aprile 2010 21.49
Risposta

lex catz

Punteggio: New Member

Messaggi: 3

Data di Iscrizione: 11 aprile 2010

Messaggi recenti

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 emoticon
krunal b soni
RE: Right To Left Theme development
12 aprile 2010 0.31
Risposta

krunal b soni

Punteggio: Junior Member

Messaggi: 28

Data di Iscrizione: 4 gennaio 2010

Messaggi recenti

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
RE: Right To Left Theme development
12 aprile 2010 3.56
Risposta

lex catz

Punteggio: New Member

Messaggi: 3

Data di Iscrizione: 11 aprile 2010

Messaggi recenti

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 emoticon
Bavithra Rajendran
RE: Right To Left Theme development
12 aprile 2010 4.22
Risposta

Bavithra Rajendran

LIFERAY STAFF

Punteggio: Regular Member

Messaggi: 123

Data di Iscrizione: 7 ottobre 2009

Messaggi recenti

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
RE: Right To Left Theme development
14 aprile 2010 0.20
Risposta

lex catz

Punteggio: New Member

Messaggi: 3

Data di Iscrizione: 11 aprile 2010

Messaggi recenti

thanks bavithra, ill try your suggestion and update my progress
Lori Bannon
RE: Right To Left Theme development
5 novembre 2010 12.55
Risposta

Lori Bannon

Punteggio: New Member

Messaggi: 2

Data di Iscrizione: 18 marzo 2009

Messaggi recenti

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 emoticon

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

Thanks ahead.
doods catz
RE: Right To Left Theme development
13 febbraio 2011 21.44
Risposta

doods catz

Punteggio: New Member

Messaggi: 7

Data di Iscrizione: 5 aprile 2010

Messaggi recenti

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
RE: Right To Left Theme development
13 febbraio 2011 22.51
Risposta

Bavithra Rajendran

LIFERAY STAFF

Punteggio: Regular Member

Messaggi: 123

Data di Iscrizione: 7 ottobre 2009

Messaggi recenti

Hi !

Try this in custom_common.css :

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

.site-beradcrumbs li{
float:right;
}

Thanks,
Bavithra Rajendran
Neetu Mishra
RE: Right To Left Theme development
23 aprile 2013 8.09
Risposta

Neetu Mishra

Punteggio: Junior Member

Messaggi: 76

Data di Iscrizione: 21 maggio 2012

Messaggi recenti

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:

 1<html class="#language("lang.dir")" dir="#language("lang.dir")" lang="$w3c_language_id">
 2
 3#if ($locale.language == "ar")
 4    <link type="text/css" href="$css_folder/custom-rtl.css" rel="stylesheet" />
 5#end
 6   
 7#if ($locale.language == "en")
 8    <link type="text/css" href="$css_folder/custom-ltr.css" rel="stylesheet" />
 9#end


It's working fine for meemoticon

Regards,
Neetu
Mahmoud A.
RE: Right To Left Theme development
20 luglio 2013 3.55
Risposta

Mahmoud A.

Punteggio: Junior Member

Messaggi: 31

Data di Iscrizione: 29 marzo 2009

Messaggi recenti

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
RE: Right To Left Theme development
24 agosto 2013 5.14
Risposta

Banafshe Bamdad

Punteggio: Junior Member

Messaggi: 56

Data di Iscrizione: 6 novembre 2007

Messaggi recenti

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
RE: Right To Left Theme development
26 agosto 2013 1.08
Risposta

Mohamadreza Mash'al

Punteggio: New Member

Messaggi: 1

Data di Iscrizione: 26 agosto 2013

Messaggi recenti

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