Jump to content

How to make rtl.css overwrite any other css files?

Recommended Posts

How to make "rtl.css" overwrite any other css files on RTL languages?

Whenever i add some different styles to "rtl.css", other css files overwrite it and it has no effect..

Share this post

Link to post
Share on other sites
  • 1 month later...

Yes, I've found a solution.

I went in to my theme folder and edited header.tpl.


find your last loaded css file, it should be something like this:

<link href="{$css_dir}theme.css" rel="stylesheet" type="text/css" media="{$media}" />


I added this, after my that last css file:


{foreach from=$languages key=k item=language name="languages"}
 {if $language.iso_code == $lang_iso}
   {if $language.is_rtl == 1}
				    <link href="{$css_dir}rtl.css" rel="stylesheet" type="text/css" media="{$media}" />



What this will do, is check if the selected language is RTL, if it is, it will load your rtl.css after every other css file has been loaded, so it will overwrite every other rule.


You can also use !important in some cases, but it will not always work, so the 1st method is what i recommend.

Hope this helps, feel free to ask questions if this was not clear enough :)

  • Like 1

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More