Right to Left

liolio · #1 Apr 10, 2012, 01:57 AM

Hi again, so now rtl is my problem (!) Imilesw, thanks for the article , I followed the instructions and now my website is flipped over when hebrew is selected, except the title, tagline and menus ! some css issues probably, do you have any clue? many thanks...

lmilesw · #2 Apr 10, 2012, 05:53 AM

All I did for to find that article was a Google search. This is not an area I know a lot about. I just did another search on wordpress.org and found this plugin that may be of assistance but I have not tested it.

liolio · #3 Apr 10, 2012, 06:00 AM

Thanks, i'm gonna have a look at it... and let you know.

liolio · #4 Apr 10, 2012, 06:19 AM

Well, this plugin doesn't help...that doesn't change anything to the header and menu alignment...

juggledad · #5 Apr 10, 2012, 06:49 AM

not sure how the translation works, but if you put it in somewhere, couldn't you just spell the words backwards? clutzy but it may work...

liolio · #6 Apr 10, 2012, 11:02 AM

actually the hebrew title and menu is written rtl, so the spelling is correct. it s simply the alignment that remains on the left, instead of moving to the right. i wonder if there is any patch i can add directly into the css insert of atahualpa option for the header title and the menu, would be the easiest way to correct this...

juggledad · #7 Apr 10, 2012, 02:02 PM

Try this - add teh following to teh CSS Inserts

HTML Code:

body.rtl div#wrapper,
body.rtl div#body.rtl div#wrapper, {
     text-align: None;
}

btw you have some errors
1) '<a name="Top"></a>' is being added just before the </head> check ato->add HTML/CSS Inserts->HTML Inserts: Body Bottom
2) you have some invalid CSS in the CSS inserts see:

HTML Code:

div#menu1 {
border: 1px solid #ffffff; background: #ffffff;
padding-right: 15px;

}



<img src="/wp-content/themes/atahualpa/images/logo-site.gif" alt="My image" />


<img src="/wp-content/themes/atahualpa/images/button.jpg" alt="My image" />


/* HEADERS */

div#imagecontainer { 
background-position:center top;
background-repeat:no-repeat;
height:170px;
margin:0;
padding:0;
position:relative;
}

those two <img..> statements should not be there
3) you have multiple 'div#imagecontainer' inserts

liolio · #8 Apr 11, 2012, 01:55 AM

hi juggledad. i tried to correct the errors u mentioned ( i have to say that s my first website, i knew nothing about coding before, and still don't know almost anything ! i just "learned" from forums and so on...) so, i deleted the 2 img statements, apparently it s ok.
about : <a name="Top"></a> , i set this for some links "back to top" i put in few pages of the site.
i don t understand what is incorrect w this. and also i don t understand what u mean about the multiple div containers. to me, i need them cos i want different header images for almost each page.

also i set this patch u gave me :

body.rtl div#wrapper,
body.rtl div#body.rtl div#wrapper, {
text-align: None;
}

i don t know exactly where to put it correctly. for the moment my problem still the same...
sorry to be quiet dummy, but i hope i still learn a bit ! ; )

juggledad · #9 Apr 11, 2012, 04:52 AM

1) It looks to me like you put the '<a name="Top"></a>' in the 'HTML Inserts: Header' option. That would put it just before the </head>. You want to put it in the 'HTML Inserts: Body Top' option so it is inside the <body>...</body> tags to get it to work properly.

2) the 'div#imagecontainer' - I'm not talking about all the 'body.page-id-198 div#imagecontainer {', if you look at your CSS Inserts, the third thing is

HTML Code:

div#imagecontainer { 
background-position:center top;
background-repeat:no-repeat;
height:170px;
margin:0;
padding:0;
position:relative;
}

and the 12th item is

HTML Code:

/* HEADERS */

div#imagecontainer { 
background-position:center top;
background-repeat:no-repeat;
height:170px;
margin:0;
padding:0;
position:relative;
}

the selector ('div#imagecontainer') and all the rules are the same, so one is not needed so remove one of them. it will help performance (a very tiny tiny bit)

3) get rid of the

HTML Code:

body.rtl div#wrapper,
body.rtl div#body.rtl div#wrapper, {
text-align: None;
}

(boy where was my head and did I fat finger that) and use this instead

HTML Code:

body.rtl td#header {text-align: right;}

liolio · #10 Apr 11, 2012, 06:34 AM

; ) almost done... u can imagine, after having asked many people on forums, how i'm happy to see at least the title moving to the right !

now i just have to fix the margin, i tried this:

body.rtl td#header {
text-align: right;
margin-right: 50px;
}

or simply "text-margin", i simply improvised but it's not this !

also i need the same magic path for the menu. i want the text in the menu bar to flip over as well and the text in menu2 with alignment on the right as well...
simply : many, many thanks !

juggledad · #11 Apr 11, 2012, 07:08 AM

thi is where you need to leard how to use the firebug extension of firefox and teh 'examine' option. It allows you to look at an html element and see and change the CSS that applies to it.

for example, the blog title can be referenced with h1.blogtitle so you would use

HTML Code:

body.rtl h1.blogtitle {margin-right: 50px;}

I'll leave it to you to figure out the tag line CSS

liolio · #12 Apr 11, 2012, 10:55 AM

just great. now, hopefully my last question : for the menu i tried this :

body.rtl div.menu2 {
text-align: right;
}

but of course with no succes. And for "menu 1" i still need it to be simply flipped over ; it will remain centered like the menu bar in the english and french version...

juggledad · #13 Apr 11, 2012, 11:10 AM

are you using both %pages and %cats or just %page and is it %page-center or %pages or %page_right?

juggledad · #14 Apr 11, 2012, 11:14 AM

try

HTML Code:

body.rtl div#menu1 {
float: right;
}

liolio · #15 Apr 12, 2012, 01:56 AM

sorry juggledad but it doesn t work. i didn t explain myself correctly, actually i have in english this menu bar :

our vision / about us / the children / etc.

in the hebrew version i would like to have :

etc. / the children / about us / our vision

and still, for the menu2 (submenu) i tried text-align: right but it doesn't work...

liolio · #16 Apr 12, 2012, 02:02 AM

ps :

i just use %page-center

juggledad · #17 Apr 12, 2012, 05:28 AM

ok use %pages (this will put the menu on the left when not using RTL) and change the CSS Insert to

HTML Code:

body.rtl div#menu1 ul li {float: right;}

liolio · #18 Apr 12, 2012, 07:02 AM

ok, great, now the hebrew menu1 is flipped over, but... (!) now the menu2 in hebrew is a bit messy :

instead of something a bit prettiest ! :

again i improvised some stuff like this :

body.rtl ul#rmenu2 li.rMenu-expand ul.rMenu-ver li.page_item a{padding-right: 10px;}

body.rtl ul.rMenu li {display: inline; padding: 0px 7px 0px 7px;
}
but i bet there is something smarter...

juggledad · #19 Apr 12, 2012, 09:45 AM

you are going to have to look at the generated code of a page.

There are over 400 lines of CSS for the menus, you will probably have to search for all occurances of div#menu1 in the CSS and then reverse it's directions. It's time to roll up your sleeves and dig in and experiment

liolio · #20 Apr 12, 2012, 10:43 AM

ok juggledad, i guess with all your good advices i'm ready for the experiment... Many thanks for your great help ! best ; )