Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #979838

    My site is in RTL, but the direction of texts in LayerSlider is left-to-right and they are left aligned.
    For example <span style=”direction:rtl; display:inline-block;”>تست test آزمايش</span> is displayed as <span style=”direction:ltr; display:inline-block;”>تست test آزمايش</span>.

    I am using the latest version of Enfold (version 4.4.1). It is worth to mention that I also tested in Enfold 3.8 and it was working fine in 3.8.


    my html code did not work in the above post, but I think you know what I meant.


    Also, all other contents of the pages that contain a slider (even outside the slider) are in LTR. As soon as I remove the slider from those pages, the issue is fixed. So it seems that some CSS rules that belong to LayerSlider mess with the page content.
    I investigated a bit and it seems to be the following from enfold/config-layerslider/LayerSlider/static/css/layerslider.css

    	html .ls-container,
    	body .ls-container,
    	#ls-global .ls-container,
    	html .ls-container .ls-slide-transition-wrapper,
    	body .ls-container .ls-slide-transition-wrapper,
    	#ls-global .ls-container .ls-slide-transition-wrapper,
    	html .ls-container .ls-slide-transition-wrapper *,
    	body .ls-container .ls-slide-transition-wrapper *,
    	#ls-global .ls-container .ls-slide-transition-wrapper *,
    	html .ls-container .ls-bottom-nav-wrapper,
    	body .ls-container .ls-bottom-nav-wrapper,
    	#ls-global .ls-container .ls-bottom-nav-wrapper,
    	html .ls-container .ls-bottom-nav-wrapper *,
    	body .ls-container .ls-bottom-nav-wrapper *,
    	#ls-global .ls-container .ls-bottom-nav-wrapper *,
    	html .ls-container .ls-bottom-nav-wrapper span *,
    	body .ls-container .ls-bottom-nav-wrapper span *,
    	#ls-global .ls-container .ls-bottom-nav-wrapper span *,
    	html .ls-direction-fix,
    	body .ls-direction-fix,
    	#ls-global .ls-direction-fix {
    		direction: ltr !important;

    I had to add the following to the quick css:

    .rtl .ls-layers p,
    .rtl .ls-layers a,
    .rtl .ls-layers h1,
    .rtl .ls-layers h2,
    .rtl .ls-layers h3 {
    	direction: rtl;


    Is the ticket solved and closing it?

    Best regards,


    I don’t believe that it is solved. what I did was just a workaround. But I think this is an issue that needs to be addressed in the following updates.



    Thanks for the update.

    Where can we see the issue? Please create a test page and provide the login details in the private field. We would like to inspect it. Did you activate the theme’s css/js compression from the Performance panel?

    Best regards,


    Sorry for the late response. The website was not live so I could not post a url to that.
    I have uploaded it somewhere so you can see that. The url is in the private content section
    As you can see there are 2 pages in the menu bar.

    In the first page (the homepage), I have used the advanced layout builder to insert a layerslider. The second slide has some texts and you can see they are being displayed in ltr.

    In the second page, I used shortcode to insert the layerslider. You can see that in this page, not only the texts in the second slide are in ltr, but also the slider has messed up the rest of the page content and made them ltr too!

    • This reply was modified 2 years, 2 months ago by  rezaies.

    The theme’s css/js compression is enabled, but enable or disabling that has no effect.



    Thanks for the update.

    The front page with the slider is “rtl”. You can’t use the layer slider shortcodes by default. How did you enable it? Please insert the slider using the designated element in the advance layout builder .

    Best regards,


    I didn’t do anything to enable that. Just installed wordpress and enfold and inserted the shortcode and it worked.
    Apart from the shortcode problem, even using the advanced layout builder to insert the slider is not perfect. You can see that I used layout builder to insert a slider in the homepage, but the texts in the slider are not in RTL.


    Just to elaborate on my previous post.
    The slider in frontpage is NOT in RTL.
    I’m sure you know that right-to-left direction is totally different from right alignment.
    Please check the front page again. I added some text under the slider to show how it should look like.



    I see. I didn’t notice that. The layout becomes “rtl” once I’ve added your css code — with slight modification. We’ll forward it to the team.

    .rtl .ls-layers * {
    	direction: rtl;

    Best regards,

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.