Navigation überspringen

Dieses Thema ist gelöst. Hier finden Sie eine Beschreibung des Problems und der Lösung.

Problem:
The client has created a page in German and translated it into English using WPML Translation Management. However, the custom CSS that works on the German page does not apply on the English page.
Solution:
First, ensure that all URLs in your database, including those for fonts and other resources, are updated from HTTP to HTTPS. This can be done using a search-and-replace operation in the database. Additionally, check the order in which the custom CSS is loaded. On the German page, the CSS loads after the tag, whereas on the English page, it loads before. This can be adjusted by deactivating the WPML editor on the affected page and using the Enfold editor directly for further adjustments. For more details on using different translation editors, visit https://wpml.org/documentation/translating-your-contents/using-different-translation-editors-for-different-pages/.

If this solution does not resolve your issue, or if it seems outdated or irrelevant to your specific case, we recommend opening a new support ticket. We also 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. For further assistance, please visit our support forum at https://wpml.org/forums/forum/english-support/.

Dies ist das technische Support-Forum für WPML – das mehrsprachige WordPress-Plugin.

Mitlesen können alle, doch nur WPML-Kunden können hier Fragen veröffentlichen. Das WPML-Team antwortet im Forum an 6 Tagen pro Woche, 22 Stunden am Tag.

Schlagwörter: 

Dieses Thema enthält 6 Antworten, hat 0 Stimmen.

Zuletzt aktualisiert von Marcel Vor 1 Woche, 6 Tage.

Assistiert von: Marcel.

Verfasser Beiträge
Februar 8, 2025 unter 7:15 pm #16683067

fabienneF-4

Hintergrund des Themas:
Ich habe folgende Unterseite erstellt: versteckter Link und mittels dem WPML Translation Managment diese Englisch Übersetzung angelegt: versteckter Link. Im deutschsprachigen original handelt ein Codeblock lokales CSS für diese Seite.

Die Symptome:
In der englischen Übersetzung wird der Block zwar dargestellt, greift aber nicht.

Fragen:

Februar 10, 2025 unter 4:48 pm #16688929

Marcel
Supporter

Sprachen: Englisch (English ) Deutsch (Deutsch )

Zeitzone: Europe/Madrid (GMT+01:00)

Hallo,

könnten Sie bitte den genauen CSS-Code posten? So kann ich im Quellcode der Seite prüfen, ob Klassen oder IDs möglicherweise durch die Übersetzung verändert wurden.

Viele Grüße
Marcel

Februar 10, 2025 unter 5:17 pm #16689064

fabienneF-4

h1, h2, h3, h4, h5, h6 {
font-family: 'Anton', sans-serif;
letter-spacing: 0.1em; /* Dynamischer Abstand zwischen den Buchstaben */
font-style: italic;
}

h1 {
font-size: 4em;}
h2 {
font-size: 3em;}
h3 {
font-size: 2em;}
h4 {
font-size: 1.5em;}
h5 {
font-size: 1.3em;}
h6 {
font-size: 1.1em;}

p {
font-family: 'Poppins', sans-serif;
}

/*----------------------------------------
// CSS - Pricing Table
//--------------------------------------*/

/* Heading */
#top .pricing-table li.avia-heading-row,
#top .pricing-table li.avia-heading-row .pricing-extra {
background-color: #000000!important;
color: #ffde59;
border-color: none;
}

#top .pricing-table li.avia-heading-row.empty-table-cell {
background-color: #ffde59!important;
border: none;
}

#top .pricing-table li:not(.avia-heading-row) {
color: #000000!important;
}

/* Icon box content background */
#top .iconbox .iconbox_content {
background: #ffde59;
margin: 2%;
/*border:none;*/
border-radius: 0;
}

.iconbox_top .iconbox_icon {
font-size: 50px;
line-height: 50px;
min-width: 50px;
min-height: 50px;
top: -50px;
padding: 1%;
}

/*----------------------------------------
// CSS - Fullwidth Submenu style - 2
//--------------------------------------*/

/* Submenu background */
.submenu-fightclub.av-submenu-container {
background-color: #ffde59;
border-color: #000;
}

/* Menu item style */
.submenu-fightclub.av-submenu-container .av-subnav-menu > li {
padding: 15px 0 !important;
}
.submenu-fightclub.av-submenu-container .av-subnav-menu > li > a {
color: #000;
background: none;
border-left-width: 0px !important;
font-family: Anton, sans-serif;
font-size: 2em;
font-spacing: 0.1em;
line-height: 1em;
border-radius: 0;
padding: 10px 15px !important;
cursor: pointer;
}

.mobile_menu_toggle {
color:#000!important;}

.page-id-89 .av_custom_color > p:nth-child(1) {
font-size: 2em;}

Februar 10, 2025 unter 5:32 pm #16689096

Marcel
Supporter

Sprachen: Englisch (English ) Deutsch (Deutsch )

Zeitzone: Europe/Madrid (GMT+01:00)

Danke für die Info. Der einzige Unterschied, den ich sehe, betrifft nur die Schriftart selbst. Ist dies korrekt? Die wird aus einem anderen Grund nicht geladen:

Mixed Content: The page at '<em><u>versteckter Link</u></em>' was loaded over HTTPS, but requested an insecure font '<em><u>versteckter Link</u></em>'. This request has been blocked; the content must be served over HTTPS.

Es wird somit geblockt, da das Request ohne SSL durchgeführt wird.

Viele Grüße
Marcel

Februar 10, 2025 unter 5:34 pm #16689101

fabienneF-4

Yeah but how can that be? Its the same font on the same server and the code works perfect in the german version but not in the english one? does wpml meed to dulplicate fonts?

Februar 10, 2025 unter 5:52 pm #16689116

fabienneF-4

Plus I dont even use that font in thet site.

Februar 10, 2025 unter 6:05 pm #16689150

Marcel
Supporter

Sprachen: Englisch (English ) Deutsch (Deutsch )

Zeitzone: Europe/Madrid (GMT+01:00)

Yeah, but how is that possible? It’s the same font, hosted on the same server, and the code works perfectly in the German version but not in the English one. Does WPML need to duplicate fonts?

No, the request is coming from your theme, not WPML. Somewhere, the call is still being made over HTTP instead of HTTPS. This is something you might want to check with Enfold support, as it affects not only fonts but also your site's favicon.

You can easily fix this by running a search-and-replace in the database to update any remaining HTTP URLs to HTTPS.

Plus I dont even use that font in thet site.

Yeah, it's actually the "Anton" font being used. The issue is that the custom CSS is loaded before the <body> tag starts. On the German page, however, it’s loaded after the <body> tag is active.

Compare the source code on
Line 56: view-source:versteckter Link

Line 46: view-source:versteckter Link

Do you use this function from Enfold versteckter Link?

You can also deactivate the WPML editor on the affected page and ensure that the CSS is correctly applied in the translated version. You can then open it then directly in the Enfold editor for further adjustments: https://wpml.org/documentation/translating-your-contents/using-different-translation-editors-for-different-pages/

Best Regards,
Marcel