Background of the issue:
I'm currently trying to learn how this plugin works on staging, before beginning work on our live site. I've made a translation of the original English page (hidden link) to Norwegian (hidden link). I then edited the English original using Beaver Builder page builder, where I added a new row with a new header, followed by updating the translation of the new content.
Symptoms:
The new translated text is added to the translated page, but design does not follow the original. Background color of the rows is not the same, and the font color is not the same, so I can't even read it because it is blending into the background (same color).
Questions:
Why is the design not following the original after updating the translation?
How can I ensure the background and font colors match the original design?
Languages: English (English )German (Deutsch )French (Français )
Timezone: Europe/Zagreb (GMT+01:00)
Could you please import one of these pages here: hidden link
You can use the import/export tool if needed: hidden link
After importing, check if the CSS issue still occurs (by changing something in the original and updating the translation).
If the issue doesn't happen there, please test the following on your site:
1. Deactivate Other Plugins
- Keep only WPML plugins and Beaver Builder active.
- This will help identify if there's a conflict with another plugin.
2. Switch to a Default Theme
- Activate a default WordPress theme like Twenty Twenty.
- This will determine if the theme is causing the issue.
3. Disable All Caching
- Turn off any caching plugins.
- Clear the cache via Beaver Builder’s troubleshooting tool and your caching plugins.
4. Check File Permissions and Server Logs
- CSS files should be stored here: wp-content/uploads/bb-plugin/cache.
- Please check that the server has permission to write to this directory.
- If needed, check the server logs for any permission-related errors that might explain why manual input is required to update these files.
Let me know what you find after running these tests.
I imported a page and repeated the process from yesterday:
1. Add translated version
2. Added new content to the page using beaver builder on original (english).
3. Updated the translation (german)
4. Visited the updated translated page. This added the new content, but again the styling such as background color, font color etc. don't follow.
See comparison here, last section with the button is the new one:
English original: hidden link
German translation: hidden link
I have note cleared any cache yet, in case you want to look into it first.
Languages: English (English )German (Deutsch )French (Français )
Timezone: Europe/Zagreb (GMT+01:00)
Thank you very much for performing the test!
I can see that only after clearing the CSS cache it works properly: hidden link
In my opinion as well, this should happen automatically.
This has been escalated to our Compatibility team and may take some debugging time, I'll get back to you as soon as I have any news or questions for you
