WordPress - Design - Comment puis-je changer les drapeaux du bouton ?

Dans cet article, vous verrez comment changer les drapeaux du bouton Weglot sur votre site Web.

1. Utilisez les options dans les paramètres de Weglot

Allez dans votre WordPress Dashboard > Weglot > Type of Flags:

Cliquez sur "Change country flags":

Vous pouvez maintenant choisir le drapeau que vous souhaitez remplacer.

2. Si le drapeau n'est pas disponible (voir point 1):

Sur votre navigateur web, faites un clic droit sur le drapeau puis sélectionnez "Inspecter l'élément". L'inspecteur doit s'afficher et surligner l'élément du drapeau dans le code.

Dans cet exemple, disons que le drapeau brésilien doit être changé pour le drapeau portugais :

Ouvrez l'élément < a > avec le tableau de gauche, vous devriez voir un pseudo-élément 'before'. Sélectionnez-le:

Copiez la règle CSS complète qui est affichée à droite, celle avec la propriété background-position :

Dans cet exemple pour le drapeau brésilien, le code copié est :

.wg-li.flag-1.pt a:before {     
    background-position: -993px 0; 
}

Collez ce code dans votre plugin WordPress admin > Weglot > "Override CSS" :

Maintenant, selon le type de drapeau choisi sur votre site Web et le drapeau que vous souhaitez appliquer, vous devrez remplacer le nombre de pixels par l'une des valeurs suivants :

Drapeaux "Rectangle Mat" :

Drapeau Nombre de px
Allemagne -2490
Brésil -6630
Hong Kong -3600
Mexique -4320
Portugal -1740
Royaume-uni -1920
États-unis -3570

Drapeaux "Rectangle Shiny" : 

Drapeau Nombre de px
Canada -1281
Portugais -5921
Royaume-uni -7777
États-unis -7841

Drapeaux "Circular" :

Drapeau Nombre de px
Canada -4224
Hébreu -1608
Mozambique -288
Royaume-uni -2520
États-unis -2712

Si vous souhaitez afficher un drapeau qui ne figure pas dans les tableaux ci-dessus, vous pouvez contacter notre équipe de support pour obtenir de l'aide !

 Vous devrez également ajouter "!important" pour que la règle personnalisée l'emporte sur les autres règles CSS. Par exemple :

.wg-li.flag-1.pt a:before {     
    background-position: -5921px 0!important; 
}

Une fois les modifications apportées, cliquez sur "Save Changes" :

Vous avez encore besoin d’aide? Contactez-nous Contactez-nous