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

[OfekA]

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

[virtulian]

hello any solution found?

[OfekA]

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}" />
		    {/if}
 {/if}
{/foreach}

 

 

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