GuppY CMS Portail WEB php gratuit sans BDD

  Accueil  BloggY  Nouvelles  Télécharger  Liens  Livre d'or  Forum
Forum - Sujet n°131615

Sujet n°131615 Style texte changement de langue
    - par smr78 le 14/08/2022 @ 18:40

Bonsoir,

Je cherche à diminuer la taille de police pour le texte affiché lorsque l'on survole le bord du drapeau de langue, par exemple, lorsque le drapeau français est affiché, le texte est : Le site sera traduit dans la langue secondaire :en

J'ai noté le script qui gère ce texte :

mais je n'arrive pas à repérer dans le code Html des noeuds autour de ce script, dans quel noeud ce texte s'affiche, et donc je ne sais pas modifier son style.

Au minimum, je cherche quelle feuille de style et à quelle ligne je dois faire la modification de police.

Merci beaucoup par avance



Réponse n° 1
    - par smr78 le 18/08/2022 @ 11:10

Bonjour,

J'ai progressé dans mes tests et vu que c'est le script

$(document).ready(function(){           $('.menuiconflag').popover({             title:"Langue",             content:"Le site sera traduit dans la langue secondaire: en",             trigger:"hover",             placement:"auto",             html:true           });         });

qui déclenche l'affichage du texte en question, lorsque l'on survole le drapeau :

En fait, grâce à ce site :

https://getbootstrap.com/docs/5.0/components/popovers/

je vois que le script déclenche un popover et le positionne. Sur le site popovers, je note que l'on peut utiliser des paramètres pour styler le popover :

$popover-font-size

$popover-max-width etc

Je voudrais donc savoir quel est le fichier qui contient le script ci-dessus, et comment lui ajouter les paramètres de largeur, taille de police etc.

Merci par avance



Réponse n° 2
    - par linuxmr le 19/08/2022 @ 10:30

Bonjour,

il serait bien de cliquer "<>" au niveau de l'éditeur de texte pour ajouter le code.

Maintenant, il faut ajouter dans le styleplus.css de la skin concernée ceci, il faut personnaliser les couleurs, la font et la taille

.popover {
    color: #404040 !important;
    background-color: #FFFFFF !important;
    border-radius: 6px !important;
}
.popover-header {
    color: #000000 !important;
    background-color: #DCD9E0 !important;
    font: normal 14px Verdana, "Bitstream Vera Sans", sans-serif !important;
}
.popover-body {
    color: #404040 !important;
    background-color: green !important;
    font: normal 18px Verdana, "Bitstream Vera Sans", sans-serif !important;
    border-radius: 0 0 6px 6px !important;

Bonne journée.

Linuxmr



Réponse n° 3
    - par smr78 le 19/08/2022 @ 17:34

Bonjour,

pardon pour le "<>" dans l'éditeur du texte ; petit manque dans votre message, il faut terminer la dernière règle par un }

Merci pour votre message qui m'a conduit vers la solution qui me convient ; je cherchais en vain avec le style du lien menuiconflag, en fait le lanceur du message qui apparaît, est bien le popover, et pas besoin de savoir où il est, les règles css que vous donnez, se chargeront de le trouver.

Voici ce que j'ai écrit pour diminuer les polices et la grandeur du message :

.popover {
    position:relative;
    top:0px !important;
    left:-10px !important;
    color: #404040 !important;
    height:25px;
    background-color: lightgrey !important;
    border-radius: 6px !important;
}
.popover-header {
    position:relative;
    top:-10px !important;
    left:0px !important;
    color: #000000 !important;
    font: normal 10px Verdana, "Bitstream Vera Sans", sans-serif !important;
}
.popover-body {
    position:relative;
    top:-20px !important;
    left:0px !important;
    color: #000000 !important;
    background-color: lightgrey !important;
    font: normal 10px Verdana, "Bitstream Vera Sans", sans-serif !important;
    border-radius: 0 0 6px 6px !important;
}

Mille fois mercis



Réponse n° 4
    - par linuxmr le 19/08/2022 @ 20:14

Cette possibilité de popover est gérée par le plugin de jquery

Le positionnement est mis en auto dans son appel, il ne sert à rien de mettre ces lignes

position:relative;
top:-20px !important;
left:0px !important;

En plus, l"affichage est tronqué d'apres mes tests



Réponse n° 5
    - par linuxmr le 19/08/2022 @ 20:20

Re,

un oubli de préciser aussi

La ligne conter contenant Border-radius également



Retour à la liste des sujets
Haut

© 2005-2026

Document généré en 0.01 seconde