Set site and language to RTL
GitHub una issues 983
I have created a language module to Hebrew and change CSS file from common.css to common.rtl.css (inc. style)
How do i change my site to RTL and make it recognize common.rtl.css indead of common.css
-
HTML is like that: <html lang="he">
-
1. Make sure that you've set `Direction` field to 'RTL' in`sys_localization_languages` table for your language.
2. Add rtl.css to your template and write any css rules there to fix RTL positioning.
-
Thanks. this i how it's done.
-
It's not working, i cleared cache and everything but the CSS are still refering to .css instead of .rtl.css
-
Hello Hodor!
Alex answered how to proper enable RTL in your site and add own rtl.css file to template. But common.css file is the system css file so it's strongly recommend not to rename / remove it. You may redeclare rules from there but in your own file (common.css for example in new template are fine too). Here is the list of system CSS files which should be in UNA site always:
'common.css',
'default.less',
'general.css',
'icons.css',
'colors.css',
'forms.css',
'media-desktop.css',
'media-tablet.css',
'media-phone.css',
'media-print.css',With the best regards, Leonid
-
Hello LeonidS!
I know about the system files, i worked this way in dolphin with a custom script. every CSS was referd to rtl.css if exist. I did not channged or removed common.css at all, i just duplicated and renamed it to common.rtl.css and did some changes inside e.g. align: right instead of align: left that's it. Either way i dupilicated all css files and renamed them to rtl.css include the files you mentioned above.
-
Any updates?
-
There is no css/common.rtl.css, css/general.rtl.css, etc files, there is only one file css/rtl.css where you need to place all the fixes for RTL language.
-
OK i understand now. I've created css/rtl.css and it's loaded into HTML but the file is empty, i double checked that i have saved rtl.css but it's still empty. another thing is (but i am not sure about it) that the order of the CSS should be that rtl.css load last to override the original CSS i see now that it's located in the beginning without using Gzip/cache ,maybe with Gzip/cache it's behave different, i don't know...
-
Hello!
As AlexT answered from 30th of December you should fill this file with own content about RTL positioning. Like:
bx-main.rtl {
direction: rtl;
}This file is connected after all system css files which i mentioned before ('media-print.css').
With the best regards, Leonid
-
I dont think that alex said that. He said to add rtl.css with fixes which i did and it came out empty
-
Try to clear CSS cache, or disable it completely.
Also please specify full path to rtl.css file ?
To override system CSS you can add more complex rule, so it will have more priority, for example if system rule is looking like this:
.system-css {
border:1px solid red;
}then your rule with more priority should look like this:
html .system-css {
border:1px solid green;
} -
OK, finally it's loading after empty+disabling cache. Instead of adding more complex rules we can add a fix in una @ github that will load rtl.css last. There are a lot of rules and going thru all of them is messy. A temporary working solution is to add the link to rtl.css in Designer>Injection->Head injection this will add (copy) after all css files.
-
You can do it this way as well if you think it's easier for you.
-
As i said it's temporary solution, when i switch back to English its keep rtl.css there. Please consider re-ordering the CSS's
-
I think that the more consistent and bullet proof way is to add more complex rules, because some modules CSS files could loaded before rtl.css file and rules from rtl.css will not be applied again.
You are free to use your own way of adding custom CSS rules for RTL language or use build-in rtl.css and add a bit more complex rules there.
-
Exploring Option A) Studio - Polyglot
Cant we just set direction by using studio's polyglot?
and code direction rtl (to change into arabic script) in the translation box for russian language.
This way we could just use the russian polyglot and input the rtl code in the translation box for each component. (assuming its possible) If so please provide the appropriate syntax. whatever I tried didnt work.
Exploring Option B) Creating RTL CSS
There is so much fragmented comment about this in this discussion and I thought it would be wise to ask one of the experts to wrap up the discussion relating to this matter by making a post with clear instructions and specifications regarding 1)the content of the rtl.css file 2)the exact location of where it needs to be placed in the una folder 3) all the additional changes required to other files (such as common.css or anything else).
1) rtl content:
Do I just create a .css file from notepad with the following content?:
bx-main.rtl {
direction: rtl;
}For a multilingual site what else do I have to add? I dont want to to be rtl when the site language is english but when its arabic I will need it to be rtl. So please also advise on where to add the switch for changing from rtl to ltr and vice versa.
2)Is this were we have to place the css file in the una folder? (where common , favorite, and others are?)/public_html/template/css
3) What are the required changes to common and other css?
Whoever decides to respond to either one of these please provide complete instructions (more than what I need) so any elementary user would be able to take care of this problem by reviewing the single post.
Afterwards it is also advisable to delete all the previous posts and to keep the final post.