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.

        • 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:


            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.

                • 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.