This thread is resolved. Here is a description of the problem and solution.
Problem:
If you're experiencing issues where the post format and structure break after translating into a right-to-left (RTL) language, it might be due to missing CSS files in the RTL stylesheet.
Solution:
We recommend checking if your theme's RTL CSS file (style-rtl.css) includes all necessary CSS files. In a case we investigated, adding the following imports to the style-rtl.css resolved the issue:
@import "fonts/font.css"; @import "css/normalize.css"; @import "css/alone-main.css";
Please ensure to back up your site before making these changes. Additionally, it would be beneficial to contact the theme author to include these CSS files in the theme's RTL stylesheet to prevent similar issues.
If this solution does not apply to your case, or if it seems outdated, we highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If further assistance is needed, please open a new support ticket at WPML support forum.
This is the technical support forum for WPML - the multilingual WordPress plugin.
Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.
Our next available supporter will start replying to tickets in about 6.01 hours from now. Thank you for your understanding.
This topic contains 4 replies, has 2 voices.
Last updated by baselH-2 1 month, 1 week ago.
Assisted by: Noman.
 baselH-2 |
|
 Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00) |
Hi, Thank you for contacting WPML Support. This type of issue usually happens when the CSS is not loaded properly on your site. So, I’ve viewed the source of the page and found out that the English site is loading the style.css file which is importing the 3 other CSS files as you can see in the attached screenshot. And in the Arabic language it is loading the style-rtl.css file which doesn't include any other CSS file in it which seems necessary as you can see in the attached screenshot. Usually, the theme includes style.css files in all languages and overrides the CSS using the RTL CSS file in RTL languages. I suspect this is the reason for this issue. I’m going to replicate this issue at WP fresh site and will get back to you with an update soon. Thank you   |
|
Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00) |
- I’ve followed the below steps in order to reproduce this issue at fresh WP site: 1. Installed/activated the Aone theme. So, this experiment states that the Alone theme doesn’t support RTL layout or it somehow missed thost three CSS files which should be included. - To fix this issue, I’ve opened the style-rtl.css file and added those missing CSS files which exist in the LTR languages but not RTL languages and the issue is gone. @import "fonts/font.css"; @import "css/normalize.css"; @import "css/alone-main.css"; You may also follow the same steps after taking a backup on your site. - I suggest you please ask the Alone theme author about this issue and ask them to include the fix in the theme files so that it will work fine in RTL layout. Here is the fresh WP site auto login URL: Here is the style-rtl.css file which I updated: Please let me know if this resolves the issue or if you need further assistance with this issue. Thank you     |
|
baselH-2 |
I have followed the same steps as you suggested and inserted the required 3 line code in alone theme stylertl file but the issue still remains. I am attaching image. Kindly check and let me know if i have done something wrong here? Thanks  |
|
baselH-2 |
I have inserted the code you provided in stylertl.css but in arabic version it is still not importing the css files that we want for stylertl.css. Attaching Screenshot.  |
|
baselH-2 |
This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.