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.

Tagged: 

This topic contains 5 replies, has 2 voices.

Last updated by Mihai Apetrei 5 months, 2 weeks ago.

Assigned support staff: Mihai Apetrei.

Author Posts
May 2, 2019 at 2:28 pm #3725621

rayannE

I am trying to: translate a form created in Elementor

Link to a page where the issue can be seen:

hidden link

I expected to see:

hidden link

Instead, I got:

Check out the difference in contact form at the bottom of the page. The text fields are not white anymore.

May 2, 2019 at 3:17 pm #3725885

Mihai Apetrei
Supporter

Languages: English (English )

Timezone: Europe/Bucharest (GMT+03:00)

Hi and thank you for contacting WPML Support!

I will be happy to help you with this.

From what I can see, the CSS that is being used at the moment is targeting a specific Elementor item class (.elementor-7541).

This is being used at the moment:

.elementor-7541 .elementor-element.elementor-element-c85a9af .elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper) {
    background-color: #fff;
}

Can you please try to use the code below instead and let me know if now the CSS is applied for both forms?

.elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper) {
    background-color: #fff;
}

Please let me know.

Kind regards,
Mihai Apetrei

May 2, 2019 at 7:28 pm #3728717

rayannE

Hi Mihai, thank you for your response.

Before I start digging in the CSS of the site, can we just take a look at the origin of the issue?

This elementor item is a template, so shouldn't WPML simply take over the style altogether? I would think that if it's not the case, then there's a coding incompatibility between WPML and Elementor Pro, no?

May 3, 2019 at 2:28 pm #3735301

Mihai Apetrei
Supporter

Languages: English (English )

Timezone: Europe/Bucharest (GMT+03:00)

Hi.

I am happy to see your questions.

From what I was able to see, the issue you are experiencing is the same as in this ticket, here:
https://wpml.org/forums/topic/problem-with-elementor-template-elementor-id-is-different-in-other-language/

The way CSS is applied on the site (on default or secondary language) really depends on how the CSS code is written inside the Elementor template.

It seems that the CSS added in the Elementor template at the moment is targeting a specific builder element CSS class (which is this part: ".elementor-7541"). When an A Elementor template is translated, it will not use the same CSS class for the same element, which should be the expected behavior so that is why it is currently not applying the same CSS in the translated page.

Practically, duplicating an Elementor template should migrate the same CSS properties but as long as the CSS class is different on the builder element version translated in a secondary language, the current CSS won't work because it is searching for the CSS class from the default language.

That is why I suggested changing the CSS in the Elementor template to a version where we exclude the condition to target a specific CSS class - this way, we should be able to apply the same CSS for both language versions for that same builder element.

I hope this explains things a bit more and brings a bit more clarity on the matter.

Please let me know if this helps.

Kind regards,
Mihai Apetrei

May 3, 2019 at 2:49 pm #3735691

rayannE

Ok Mihai, thank you. Can you then please just tell me, where I have to put this code? In the custom CSS fields of the original Elementor template?

May 3, 2019 at 8:31 pm #3737853

Mihai Apetrei
Supporter

Languages: English (English )

Timezone: Europe/Bucharest (GMT+03:00)

Hi.

I think you could add it like it is shown here:
hidden link

There are also other ways you could add the extra CSS and one of them would be by simply going to your WordPress dashboard > Appearance > Customize > Additional CSS > then save it.

Please let me know how it goes 🙂

Just a note that I won't be working on the weekend so I will be able to get back to you at the beginning of next week if you will answer me this weekend.

Kind regards,
Mihai