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.

Nessun supporter è disponibile a lavorare oggi sul forum Italian. Sentitevi liberi di creare ticket e li gestiremo il prima possibile quando saremo online. Grazie per la comprensione.

Etichettato: 

This topic contains 15 risposte, has 2 voci.

Last updated by Vincenzo 5 mesi fa.

Assigned support staff: Vincenzo.

Autore Post
May 16, 2019 at 7:58 am #3822843

gianniT-3

Tell us what you are trying to do?
Ciao, sul mio sito sto cercando di modificare il menù con questo riferimento (che allego)

vorrei che la prima lingua del menù - la lingua corrente - quella visualizzata prima di aprire il menu a tendina sia accompagnata da un icona personalizzata
per le voci a tendina non ho bisogno del radio button, si può procedere con al normale selezione così come è ora sul sito.
SOno riuscita a cambiare anche le nomenclature lingue personalizzado la lingua originale attraverso le impostazioni.

come posso fare con l'icona?

il tema mi permette di aggiungere icone alle voci di menù, ma il selettore di lingua non compare tra le voci di menù in quanto viene gestito a parte.

Grazie

May 16, 2019 at 8:40 am #3823317

Vincenzo
Supporter

Languages: Inglese (English ) Italiano (Italiano )

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

Salve e grazie per aver contattato il supporto WPML!

Per risolvere, puoi aggiungere questo codice CSS:

span.wpml-ls-native {
    background-image: url(<em><u>hidden link</u></em>);
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 20px;
}

Non potendo vedere il sito online, non sono sicuro della prima riga, ma ti basta usare l'inspector del browser per individuare il CSS selector corretto da usare.

Fammi sapere se così risolvi o se hai bisogno di maggiori informazioni.

Grazie

Documentazione relativa:
https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/how-to-fix-styling-and-css-issues-for-the-language-switchers/

May 16, 2019 at 8:45 am #3823327

gianniT-3

Ciao Vincenzo, corretta la prima riga
scusa il mio sito online è visibile a hidden link
il tuo codice soddisf ain parte le mie eisigenze, in quanto vorrei che l'icona fosse presente solo sulla prima riga (lingua in uso) e non sulle altre che si vedono nel menu a tendina
l'icona delel essere solo sulla prima voce
abbiamo una modo per farlo?

May 16, 2019 at 8:58 am #3823405

Vincenzo
Supporter

Languages: Inglese (English ) Italiano (Italiano )

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

Ciao,

puoi provare ad utilizzare .wpml-ls-first-item invece di span.wpml-ls-native?

May 16, 2019 at 9:06 am #3823529

gianniT-3

in questo modo perdo completamente la modifica e torno allos tato iniziale
inoltre anche sul mobile (mi riferisco all'inserimento del primo codice che mi hai dato)
ho un po di problemi di visualizzaizone tra l'icona e la label

May 16, 2019 at 9:36 am #3823921

Vincenzo
Supporter

Languages: Inglese (English ) Italiano (Italiano )

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

Ciao,

per quanto riguarda la versione desktop, questo codice sembra funzionare:

.wpml-ls-first-item {
    background-image: url(<em><u>hidden link</u></em>);
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 20px !important;
}

Puoi verificare?

May 16, 2019 at 9:42 am #3824075

Vincenzo
Supporter

Languages: Inglese (English ) Italiano (Italiano )

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

Per la versione mobile, puoi provare:

li#mobile-menu-item-wpml-ls-28-en.menu-item-has-children {
    background-image: url(<em><u>hidden link</u></em>);
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 20px !important;
}
li#mobile-menu-item-wpml-ls-28-it.menu-item-has-children {
    background-image: url(<em><u>hidden link</u></em>);
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 20px !important;
}
May 16, 2019 at 9:43 am #3824085

gianniT-3

versione dekstop mi smebra ok! grazie
per il mobile invece mi puoi suggerire qualcosa?
con questa ultima modifica sul mobile ho perso ogni traccia di icona, il menu delle lingue composto solo dalla label da quel che vedo

May 16, 2019 at 9:49 am #3824285

gianniT-3

Ciao Vincenzo
ho verificato tutti e due i codici che mi hai mandato dekstop e monile
per il dekstop come ti dicevo tutto ok
per il mobile ancora problemi
allego delle immagini
l'icona è troppo spostata verso il margine sinistro e poi ha questo sfondo bianco che credo dipenda cmq dal css
in ogni caso ti spiego: l'icona(al click della prima label in evidenza) si estende lungo tutta l'altezza del menu a tendina, e prevedendo di avere più di due lingue questo non è corretto.
avrei bisogno rimanesse a fianco della lingua corrente

May 16, 2019 at 10:00 am #3824401

Vincenzo
Supporter

Languages: Inglese (English ) Italiano (Italiano )

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

Ciao,

prova così:

li#mobile-menu-item-wpml-ls-28-en.menu-item-has-children {
    background-image: url(//placehold.it/16x16);
    background-position: left top 0.3cm;
    background-repeat: no-repeat;
    padding-left: 20px !important;
    background-color: #515b69;
}
li#mobile-menu-item-wpml-ls-28-it.menu-item-has-children {
    background-image: url(//placehold.it/16x16);
    background-position: left top 0.3cm;
    background-repeat: no-repeat;
    padding-left: 20px !important;
    background-color: #515b69;
}

Per perfezionare il posizionamento, puoi vedere la documentazione CSS online.

Fammi sapere se così risolvi.

Grazie

Documentazione relativa:
- hidden link
- hidden link

May 16, 2019 at 10:11 am #3824489

gianniT-3

Ora il comportamento mi sembra corretto, provo a vedere di migliorare la visualizzazione ulteriormente con css
ti faccio sapere

grazie

May 16, 2019 at 10:22 am #3824547

gianniT-3

CIao Vincenzo
rispetto al primo codice relativo alla modifica dekstop
1
2
3
4
5
6
.wpml-ls-first-item {
background-image: url(hidden link);
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px !important;
}

ho notato il problema che allego in immagine
nella versione inglese del sito, l'icona del globo tende a seguire sempre al label italiano
e non rimane in sovrimpressione sul primo livello delle voci di menù
in sintesi in hidden link questo comportamento è corretto
ma in
hidden link appare il problema che vedi allegato

May 16, 2019 at 3:46 pm #3827701

gianniT-3

Ciao Vincenzo, non posso rimanere a lungo online con il problema che ti ho segnalato in precedenza.
Altrimenti devo rimuovere tutto, e tornare alla versione precedente (non gradita)
Ho bisogno che l icona del mondo si veda sempre accanto alla prima voce e che non rimanga ancorata alla label italiano
per favore ho ancora bisogno di supporto
Grazie

May 16, 2019 at 5:35 pm #3828413

Vincenzo
Supporter

Languages: Inglese (English ) Italiano (Italiano )

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

Ciao,

potresti rimuovere tutto il vecchio CSS e provare questo:

li#menu-item-wpml-ls-28-en.menu-item-has-children {
    background-image: url(<em><u>hidden link</u></em>);
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 20px !important;
}
li#menu-item-wpml-ls-28-it.menu-item-has-children {
    background-image: url(<em><u>hidden link</u></em>);
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 20px !important;
}
li#mobile-menu-item-wpml-ls-28-en.menu-item-has-children {
    background-image: url(//placehold.it/16x16);
    background-position: left top 0.3cm;
    background-repeat: no-repeat;
    padding-left: 20px !important;
    background-color: #515b69;
}
li#mobile-menu-item-wpml-ls-28-it.menu-item-has-children {
    background-image: url(//placehold.it/16x16);
    background-position: left top 0.3cm;
    background-repeat: no-repeat;
    padding-left: 20px !important;
    background-color: #515b69;
}
May 20, 2019 at 9:02 am #3845351

gianniT-3

Ciao Vincenzo, scusa ma ho avuto alcuni problemi ad accedere al vostro sito, nonostante facessi correttamente il login per visualizzare questo topic, il sito continuava a non a non riconoscermi al momento di inviare le risposte.
Ho raggiunto molti risultati con il codice che mi hai passato, devo ancora lavorare con css perchè ci sono problemi di visualizzazione che non riesco a risolvere e mi riservo di farti sapere qui