[Resolved] How to add the RTL Bootstrap Css file for RTL WPML Post only?

[Author]

Posts

[AtefR7377]

Hi,
I am using WPML, which is created by your company, to create a multilingual website.

As I am using Toolset Types, I need to use Bootstrap to style the elements..etc

Now the site has some languages that are LTR and one language that is RTL.

So i am left with this problem for the RTL posts:

- If I loaded the Bootstrap using the WP types, the posts will load in RTL, but the views elements will show LTR (refer to #1 on the attached image), and the Bootstrap sub-element (like the dropdown menus) show LTR, which is not good. (refer to #2 on the attached image)

- If I tried to load the bootstrap rtl css from this page using a function, all what i get is part of the function showing up the top of the page, (refer to the second screenshot i attached)

hidden link

Here is the function I created, but it didnt work at all:

add_action( 'wp_head','bootstrap_is_rtl', 0 );
function bootstrap_is_rtl() {
    ?>
if (ICL_LANGUAGE_CODE == 'ar') { 
<link rel="stylesheet" href="<em><u>hidden link</u></em>" integrity="sha384-P4uhUIGk/q1gaD/NdgkBIl3a6QywJjlsFJFk7SPRdruoGddvRVSwv5qFnvZ73cpz" crossorigin="anonymous">
}
    <?php
}

So what is the best way to work with Toolset Types + WPML and Bootstrap?

thanks in advance.

[Christian Cox]

Hi, Toolset loads Bootstrap 3 so I don't know if this CSS file for Bootstrap 4 will work. I found a different version for Bootstrap 3. Use the wp_enqueue_style API to enqueue this additional CSS file instead, something like this:

wp_enqueue_style( 'bootstrap-rtl', '//cdn.rawgit.com/morteza/bootstrap-rtl/v3.3.4/dist/css/bootstrap-rtl.min.css', array( 'toolset_bootstrap_styles' ));

[AtefR7377]

Hi Christian,

Thanks for the workaround.

I added the code and I thought that the system is working fine. Then a couple of days ago, I used the WordPress built in customizer to adjust the typography. Then I realized that the heading size is insensitive of changes.
So I set the h1 to 30px, yet it didn't change.

so I inspected the headin using the browser console, and found out that the h1 size of 2em is coming from bootstrap.

So i thought that this is an incompatibility with the Generatepress theme.
so I submitted this support ticket to thm:

hidden link

However, even when I choose the option that Toolset is not to load Bootstrap, the heading size doesn't change!!

Then I thought of removing the code you gave me. when I did so, the heading size showed at the correct 30px.

When I put it back, the bootstrap effect came back.

basically the bootstrap code hijacks the site and injects its css.

So I still need a WPML + Toolset + Bootstrap compatible solution, please 🙁

thnaks.
Atef

[Christian Cox]

You might have to override Bootstrap's styles using more specific CSS, and it may not be possible to do that from the Customizer. It may require some code in the Additional CSS panel. If you can show me in the browser what you want to change, I might be able to offer an override.

[AtefR7377]

Hi Christian,

the only way that i know of, to override this, is to keep adding !important.
so basically i need to style everything manually then keep adding !important.

like this:

h1 {
	font-size: 1.5em !important;
}

But my question is: why do I need to go through this, while I am using the system specified by "on the Go systems".
the WPML is multilingual and supports RTL, the Toolset type is developed by the same company and supports WPML and RTL.
Toolset uses Bootstrap in styling.

so why not fix this problem at a development level? why leave the users to use workarounds? I think that you guys are so capable and experienced. you are the best support team I ever dealt with. so this should not be an issue for you to solve.

can you please highlight this to the developers?

in the meantime, can you please advise if you have a better idea than the !important?

thanks,

[Christian Cox]

the only way that i know of, to override this, is to keep adding !important.
so basically i need to style everything manually then keep adding !important.
The !important operator should be avoided, and CSS specificity should be used instead of !important if possible.
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
https://css-tricks.com/specifics-on-css-specificity/

So something like...

.single-cpt h1 {
  
}

...is more specific than...

h1 {

}

so why not fix this problem at a development level?
The main problem is that Bootstrap, a popular UI library, is not fully RTL-compatible. In my opinion this is a problem that should be resolved in the Bootstrap library, which is not made by OnTheGoSystems. Other 3rd-party plugins exist to supplement the library with RTL fixes, but we do not incorporate those in our software. We integrate Bootstrap as-is, and any extras must be loaded manually.