Docs

[Eidderf]

Greetings master Jedi,

This padawan needs your help badly, as I’m going bald already because of the RTL issues that I’m facing with our Feature Box.

I was advised by my company to keep this matter discreet from the internet so I’m going to write the details of my concern in the next thread.

ISSUE # 1
This problem is how to properly display the:
.x-feature-box-connector
.x-feature-box-graphic i.circle

so that they display correctly in RTL view.

ISSUE # 2
My sidebar navigation in RTL can’t be displayed properly because of this class:

.rtl ul:not(.x-nav):not(.x-comments-list):not(.products), .rtl ol:not(.x-nav):not(.x-comments-list):not(.products)

Please help as I don’t know how override these settings. This css class is in the Integrity.css stylesheet.

ISSUE # 3
My breadcrum, again in RTL view, tends to reverse the order of the mother-child relationship. For example, what was supposed to be a mother becomes a child and vice-versa.

I have all of these 3 issues in detailed print screens in the next thread.

IMPORTANT! kindly refrain from referencing printscreens to your responses, if you need to, please make them PRIVATE as my company wants this to be discreet. Likewise, with your code solutions please refrain from mentioning our URL.

Thank you for your support master Jedi 🙂

Wordpress version: 4.5.3
X theme: 4.3.0
Cornerstone: 1.3.0

[Eidderf]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! The feature box is not yet RTL ready. To be able to temporarily resolve this issue, please edit your page in Cornerstone, go to the settings tab, Settings > Custom JS and insert the following custom js code

(function($){
  if ( $('body').hasClass('rtl') ) {
    $('.x-feature-box').each(function(){
      $(this).find('.x-feature-box-content').insertAfter( $(this).find('.x-feature-box-graphic') );
    });
  }
})(jQuery);

And then insert the following custom css in the settings tab, Settings > Custom CSS

.x-feature-box .x-feature-box-graphic-inner {
    margin-left: 20px;
}

#2] To resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.rtl .x-sidebar ul:not(.x-nav):not(.x-comments-list):not(.products), 
.rtl .x-sidebar ol:not(.x-nav):not(.x-comments-list):not(.products) {
    margin-right: 0;
}

#3] To resolve the breadcrumb issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

body.rtl .x-breadcrumbs span.current {
    float: left;
}

We would loved to know if this has work for you. Thank you.

[Eidderf]

Hello master Jedi,

I can see that the force is really very strong in you.

All of my 3 issues have been wiped out in one massive lightsaber slice. Thank you, it worked!

With endless gratitude,

Young padawan 🙂

[Rue Nel]

Hi There,

You’re welcome! We’re happy to help you out.
If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards,
X

[Eidderf]

This reply has been marked as private.

[Christopher]

Hi there,

Please add this code:

span.x-feature-box-connector.full {
    left: 7% !important;
}

Hope it helps.

[Eidderf]

This reply has been marked as private.

[Christopher]

Hi there,

Please add this :

.page-id-2726 span.x-feature-box-connector.full {
    left: 35px !important;
}

Hope it helps.

[Eidderf]

This reply has been marked as private.

[Rad]

Hi there,

1. Looks the same on my chrome and firefox. You can adjust the value of the CSS to your preferred alignment.

2. Try changing that CSS to this,

.page-id-2726:not(.rtl) span.x-feature-box-connector.full {
    left: 35px !important;
}
.page-id-2726.rtl span.x-feature-box-connector.full {
    right: 35px !important;
}

Hope this helps.

[Eidderf]

Hello master jedi,

Your code worked! Thank you, thank you so much 🙂

However, I do notice a sudden jump of the graphic icon (this is the blue circle icon) when I’m viewing the RTL version. The initial position of the blue circle is to left then immediately after that the blue circle moves quickly to the right side where it’s supposed to be. Any idea on how to fix this master jedi?

Thank you

[Rue Nel]

Hi There,

I made some changes in the customizer. I added this custom css:

.rtl .x-feature-box-graphic {
  opacity: 0;
  transition: opacity 0.5s easeOut;
}

And then I updated the JS code and use this instead:

(function($){
  $(document).ready(function(){
    if ( $('body').hasClass('rtl') ) {
       $('.x-feature-box').each(function(){
         $(this).find('.x-feature-box-content').insertAfter( $(this).find('.x-feature-box-graphic') );
				 $(this).find('.x-feature-box-graphic').css('opacity', '1');
       });
     }
  });
})(jQuery);

This should resolve the jumping icon. Hope this helps.

[Eidderf]

Greetings master jedi,

It worked! Thank you so much.

You’re the best 🙂

With endless gratitude,

Young padawan

[Rue Nel]

You’re welcome! We’re happy to help you out.
If you need anything else we can help you with, don’t hesitate to open another thread.

Cheers.

[Author]

Posts