Skip Navigation

Home › Support › English Support › [Resolved] problem with CSS ID

[Resolved] problem with CSS ID

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 7 replies, has 3 voices.

Last updated by Long Nguyen 1 year, 8 months ago.

Assisted by: Long Nguyen.

Author Posts
September 29, 2023 at 4:22 pm #14489039

marieD-13

I set CSS ID to every section of my main page and to some lines in order to go directly to the section or a specific place in my page using the main menu.
For example:
hidden link
The CSS ID is Devise-traduction (you can see the picture enclosed).
In the Spanish version, I have to manually translate some CSS ID because they are not translated. They stay in french o they don't appear at all so, I have to add them manually.
In my example, I had to manually write in the CSS ID in the Spanish page "Lema-traduccion"
hidden link
However, other CSS ID work fine. For example, "Devis-gratuit" turn to "Presupuesto-gratuito" in the Spanish version
hidden link
hidden link
So, every time I update a translation to Spanish, then I have to manually access directly to the Spanish page and change or add some of the CSS ID.
Thank you in advance for your help.
Best regards

Seccion ID.png
October 2, 2023 at 7:39 am #14495025

Andrés
Supporter

Languages: English (English ) Spanish (Español ) French (Français )

Timezone: Europe/Paris (GMT+02:00)

Hello there,

Welcome to WPML support forum.

While one of my teammates takes care of your case I will provide you with the first debugging steps.

CSS ID's coming from Divi theme are not translatable by default. however, if you want to alter this behaviour, you may follow this forum ticket where another user add a XML in order to make section ID's transtable:
https://wpml.org/forums/topic/how-can-i-prevent-wpml-ate-from-translating-css-ids/#post-13467995

Let us know if it helps.
Andrés
October 2, 2023 at 9:05 am #14496223

marieD-13

Hi,
The link you sent me do the exact opposite of what I want to do. My problem is I don't see the CSS ID listed in the ATE editor so I can't not translate them and some of them don't even appear in the translated page, neither in French neither in Spanish.
October 3, 2023 at 8:53 am #14502571

Long Nguyen
WPML Supporter since 02/2022

Languages: English (English )

Timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Hi Marie,

I see you are using the CSS ID for the Divider module of Divi. The post data saved into the database has the shortcode:

[et_pb_divider _builder_version="4.21.0" _module_preset="default" module_id="divider-css-id" hover_enabled="0" sticky_enabled="0"][/et_pb_divider]

You can follow the documentation below to register the shortcode attribute for translation
https://wpml.org/documentation/translating-your-contents/page-builders/how-to-register-page-builder-modules-and-theme-options/

For example:

<wpml-config>
  <shortcodes>
    <shortcode>
      <tag>et_pb_divider</tag>
      <attributes>
        <attribute>module_id</attribute>
      </attributes>
    </shortcode>
  </shortcodes>
</wpml-config>

Then you can edit the post > Make a small change to the post content > Save changes > Update the translation to translate the CSS ID.

Look forward to your reply.
Thanks
October 3, 2023 at 11:10 am #14503701

marieD-13

Hello, It did the trick for the first 3 items because the link is effectively on the divider, but for the rest, 3 are modules/sections and the last one is a line, I could also use a sections. Please tell me the shortcode I should use. Do I paste it before the first one I just used.
Thank you in advance. Regards,

WP CSS ID.png
October 4, 2023 at 2:02 am #14509107

Long Nguyen
WPML Supporter since 02/2022

Languages: English (English )

Timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Hi,

For 3 modules, they are Call To Action module and the last one is the Row. You can try to use this custom XML configuration code to register the CSS ID for translation (including the divider module above):

<wpml-config>
  <shortcodes>
    <shortcode>
      <tag>et_pb_divider</tag>
      <attributes>
        <attribute>module_id</attribute>
      </attributes>
    </shortcode>
    <shortcode>
      <tag>et_pb_cta</tag>
      <attributes>
        <attribute>module_id</attribute>
      </attributes>
    </shortcode>
    <shortcode>
      <tag>et_pb_row</tag>
      <attributes>
        <attribute>module_id</attribute>
      </attributes>
    </shortcode>
  </shortcodes>
</wpml-config>

I hope I was helpful. Don't hesitate to ask if you find any problem along the way, I'll gladly help you.
October 4, 2023 at 1:22 pm #14513457

marieD-13

Hello, I am sorry to tell you that this messed up all my translated H2 tittles. They are in French now in the Spanish version. I can't find them in the editor to translate them again.
However my first problem seems to be solved.

titles messed up.png
October 5, 2023 at 1:21 am #14516099

Long Nguyen
WPML Supporter since 02/2022

Languages: English (English )

Timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Hi,

The heading on your site is the CTA module title and it looks like the custom XML configuration code that I shared overwritten the default XML configuration code. Please replace the code that registers the CTA above with this one and let me know how it goes.

<shortcode>
  <tag>et_pb_cta</tag>
  <attributes>
    <attribute>module_id</attribute>
    <attribute>title</attribute>
    <attribute>button_text</attribute>
    <attribute>title_phone</attribute>
    <attribute>title_tablet</attribute>
    <attribute>button_text_tablet</attribute>
    <attribute>button_text_phone</attribute>
    <attribute encoding="allow_html_tags">content_tablet</attribute>
    <attribute encoding="allow_html_tags">content_phone</attribute>
    <attribute type="link">button_url</attribute>
    <attribute type="link">link_option_url</attribute>
    <attribute type="media-url">background_image</attribute>
  </attributes>
</shortcode>

Look forward to your reply.
Thanks
October 5, 2023 at 5:01 am #14516327

marieD-13

Thank you very much, problem solved !!