Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Languages & Translations (http://forum.bytesforall.com/forumdisplay.php?f=11)
-   -   Right to Left (http://forum.bytesforall.com/showthread.php?t=17268)

liolio Apr 10, 2012 12:57 AM

Right to Left
 
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 Apr 10, 2012 04: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 Apr 10, 2012 05:00 AM

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

liolio Apr 10, 2012 05:19 AM

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

juggledad Apr 10, 2012 05: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 Apr 10, 2012 10: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 Apr 10, 2012 01: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 Apr 11, 2012 12: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 Apr 11, 2012 03: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 Apr 11, 2012 05: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 Apr 11, 2012 06: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 Apr 11, 2012 09: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 Apr 11, 2012 10:10 AM

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

juggledad Apr 11, 2012 10:14 AM

try
HTML Code:

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


liolio Apr 12, 2012 12: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 Apr 12, 2012 01:02 AM

ps :

i just use %page-center

juggledad Apr 12, 2012 04: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 Apr 12, 2012 06:02 AM

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

http://s17.postimage.org/xfjj1pj8r/C...a_14_47_48.jpg

instead of something a bit prettiest ! :

http://s17.postimage.org/8oyg1mt9n/C...a_14_48_25.jpg

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 Apr 12, 2012 08: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 Apr 12, 2012 09:43 AM

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


All times are GMT -6. The time now is 09:48 AM.

Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.