Change Menu Direction From LTR to RTL - JF Architec Design - Joomla Templates

Welcome, Guest

TOPIC: Change Menu Direction From LTR to RTL

Change Menu Direction From LTR to RTL 03 Nov 2013 10:42 #3278

Hi,
thanks for the nice templates,

I have a question about how to change main menu direction in Architec-Design template.
I have made my site multilingual and for Persian language I need menu items to start showing from right of screen instead of left.
please tell me how can I do that?

Thanks in advance.

Reply Quote

Posts:6
MAK
Fresh Boarder
OFFLINE
Karma: 0

Re: Change Menu Direction From LTR to RTL 03 Nov 2013 12:31 #3280

I've managed to change the direction of "mainmenu" Module to Right-To-Left in css file of the template:

#jf-mainmenu ul li{
list-style:none;
float:left;
}

by changing the float value to "right" the menu items shows from right to left.

now I have this problem that I need a mainmenu with LTR direction for e.g. English language and another one for Persian language with RTL direction.

I've added "mainmenufa" with RTL direction in both css and php configuration files of template by doing copy and paste the mainmenu definitions; but it adds a module under the "mainmenu" module:

This image is hidden for guests. Please log in or register to see it.

I want it to be exactly on mainmenu module's position not under it. what can I do now?
any one can help?

Last Edit: 03 Nov 2013 13:04 by MAK.

Reply Quote

Posts:6
MAK
Fresh Boarder
OFFLINE
Karma: 0

Re: Change Menu Direction From LTR to RTL 04 Nov 2013 13:53 #3296

Hi,

you can try it so:

1. For your Persian language you can insert in the menu module a new menu class, for example "persianlang"
2. style it with css

 
.persianlang{direction:rtl;}

Last Edit: 04 Nov 2013 13:53 by m.freak.

Reply Quote

The following user(s) said Thank You: MAK

Posts:502
theres no place like joomfreak.com
m.freak
Platinum Boarder
OFFLINE
Karma: 0

Re: Change Menu Direction From LTR to RTL 05 Nov 2013 05:41 #3299

Thanks for your reply,

I have problem adding the class as you guided, I'm new to this.
could you guide me on how to create the class? does this create a new position in joomla that I can select in "Module manager" -> "persian menu" module? if not, how can I get it to use after?

this is my try, please don't laugh

:

in index.php file:

 
<!-- Main menu module -->
    <div id="jf-mainmenu">
      jdoc:include class="persianlang" type="modules" name="persianlang"
      jdoc:include type="modules" name="mainmenu"
    </div>

Excluded < and /> from jdoc lines...

and in Template.css file:

 
/*main menu */
#jf-mainmenu{
  clear:both;
  height:55px;
}
#jf-mainmenu ul{
  padding:0px;
  margin:0px;
}
#jf-mainmenu ul li{
  list-style:none;
  float:left;
}
#jf-mainmenu ul li a,#jf-mainmenu ul li a:visited{
  display:block;
  padding:0px 13px;
  height:55px;
  line-height:55px;
  font-size:18px;
  color:#aaaaaa;
  font-family:MidietSansMedium;
  text-transform:uppercase;
}
#jf-mainmenu ul li a:hover{
  color:#79bda8;
  text-decoration:none;
}
#jf-mainmenu ul li.current a{
  color:#79bd55;
  font-family:MidietSansBold !important;
}
 
/*main menu Persian */
.persianlang{direction:rtl;}

And by the way, my Joomla version is 2.5

Best Regards.

Last Edit: 06 Nov 2013 06:59 by MAK.

Reply Quote

Posts:6
MAK
Fresh Boarder
OFFLINE
Karma: 0

Re: Change Menu Direction From LTR to RTL 06 Nov 2013 12:25 #3311

 
<!-- Main menu module -->
    <div id="jf-mainmenu">
      jdoc:include class="persianlang" type="modules" name="persianlang"
      jdoc:include type="modules" name="mainmenu"
    </div>

no, no, no

create simple 2 menus (backoffice), one for persian and one for english or what ever... in the module of persian lang. you insert this new class:

This image is hidden for guests. Please log in or register to see it.

Reply Quote

The following user(s) said Thank You: MAK

Posts:502
theres no place like joomfreak.com
m.freak
Platinum Boarder
OFFLINE
Karma: 0

Re: Change Menu Direction From LTR to RTL 16 Nov 2013 11:19 #3391

Thanks for the reply,

so here's what I did:
1- created 2 menu modules, one English menu and another Persian menu.
2- in Persian menu's advanced options in class suffix field entered "persianlang".
3- edited the template's css file and inserted this:

 .persianlang{direction:rtl;}

but still both menus are floated from left of the menu position block:

This image is hidden for guests. Please log in or register to see it.

I came with an idea:
1- made a copy of the template and named it Persian template.
2- in new template's css file replaced all "#jf-mainmenu" in css file with "#jf-mainmenufa" and edited it as follows:

 #jf-mainmenufa ul li{
                list-style:none;
                float:right;

3- edited new template's master file (index.php) and changed all "mainmenu" to "mainmenufa".
4- Edited link definitions in new template's master file (index.php) to point to css files in new template folder:

 
baseurl ?>/templates/jfa_persian/css/template.css" type="text/css" />
baseurl ?>/templates/jfa_persian/css/midiet_sans/stylesheet.css" type="text/css" />

5- In template manager for new template assigned all Persian menus to Persian Template and selected Persian language as default for it.
6- changed position of Persian menu module to "mainmenufa".

and it did the trick:

This image is hidden for guests. Please log in or register to see it.

But does it slow my website? I like to do it as simple as you guided, but couldn't. what did I do wrong?
Thank you m.freak.

Last Edit: 16 Nov 2013 11:34 by MAK.

Reply Quote