soucis avec le script Switcheroo, il fait disparaitre le @ tague

[Lilynufare]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : depuis l'installation du script
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,
Je rencontre un problème depuis ce week-end quand j'ai installé le Switcheroo sur le forum, le tag mentionner du profil n'apparait plus ((@) à coté du pseudo) et juste pour tester si c'est bien à cause de ça, j'ai supprimé ce script et le tag est revenu. Donc, je souhaiterai que le tag revienne dans le profil et avoir aussi le Switcheroo.

Merci de votre attention

Le script installé avec coche sur toutes les pages

Code:

(function() {
    new Switcheroo('#switcheroo', {
        logo: '', /* accepte html, permet d'afficher un logo qui retourne à l'accueil du forum */
        enableReorder: true, /* activer le drag&drop pour l'ordre des comptes (true/false) */
        updateAvatar: true, /* activer le clique droit pour charger un nouvel avatar (true/false) */
        customButtons: [], /* boutons personnalisés, explication plus bas */
        confirm: true, /* demande une confirmation avant le changement de compte */
        confirmMsg: 'Confirmer le Switcheroo de personnage ?', /* le message affiché lors de la confirmation */
        deleteIcon: '×', /* accepte html, icone pour supprimer un compte lié */
        addIcon: '+', /* accepte html, icone qui ouvre le formulaire de connexion et d'association */
        errorMsg: 'Une erreur est surviendue lors du Switcheroo.',
    });
})();

<script>
(function() {

    new Switcheroo('#switcheroo', {
        logo: '<img src="https://i.imgur.com/C01GNxF.png" />'
    });

})();
</script>
  
  customButtons: [
{
    tooltip: 'Bouton 1',
    classes: ['bouton1', 'bouton1rouge'],
    html: '<img src="http://imagebouton1.etc" />',
    before: false,
    action: '/t1-titre-du-topic'
},
{
    html: '<i class="material-icons">icon_au_choix<i/>',
    action: function(e, el) { }
}
]
    
    {
    tooltip: 'Se déconnecter',
    before: true,
    classes: ['logout'],
    html: '<i class="material-icons">icon_au_choix<i/>',
    action: function(e, el) {
        alert("À la prochaine ! o/");
        this.logout(e => monomer.reload());
    }
}

Code:



.switcheroo {
  color: var(--color-text);
  background-color: var(--color-bg);
  font-size: 16px;
}
.switcheroo[position="static"] {
  position: relative;
}
.switcheroo[position="top"] {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
.switcheroo[position="bottom"] {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
}
.switcheroo[direction="horizontal"] {
  width: 100%;
}
.switcheroo[direction="vertical"] {
  height: 100%;
}

.switcheroo__squircles {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  padding: var(--gap-size);
  gap: var(--gap-size);
}
.switcheroo[direction="horizontal"] .switcheroo__squircles {
  flex-direction: row;
}
.switcheroo[direction="vertical"] .switcheroo__squircles {
  flex-direction: column;
}

/* squircle */
.switcheroo[theme="discord"] .switcheroo__squircle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-squircle);
}
.switcheroo[theme="discord"] .switcheroo__squircle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  transition: border-radius 128ms var(--ease);
}
.switcheroo[theme="discord"] .switcheroo__squircle:hover {
  border-radius: 36%;
}
.switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle:before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--color-pill);
  position: absolute;
  border-radius: 4px;
  top: 50%;
  transform: translate(-100%, -50%) scale(0);
  transition: transform 128ms, opacity 64ms;
  pointer-events: none;
  opacity: 0;
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle:before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--color-pill);
  position: absolute;
  border-radius: 4px;
  left: 50%;
  transform: translate(-50%, -100%) scale(0);
  transition: transform 128ms, opacity 64ms;
  pointer-events: none;
  opacity: 0;
}
.switcheroo[theme="discord"] .switcheroo__squircle.active {
  border-radius: 36%;
  cursor: default;
}
.switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle:hover:before {
  opacity: 1;
  transform: translate(-100%, -50%) scale(0.5);
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle:hover:before {
  opacity: 1;
  transform: translate(-50%, -100%) scale(0.5);
}

.switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle.active:before {
  opacity: 1;
  transform: translate(-85%, -50%) scale(0.2);
  border-radius: 50%;
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle.active:before {
  opacity: 1;
  transform: translate(-50%, -85%) scale(0.2);
  border-radius: 50%;
}


/* tooltip */
.switcheroo__popper {
  background-color: var(--color-tooltip);
  padding: 0.68rem 1rem;
  position: absolute;
  width: -webkit-max-content;
  width: max-content;
  border-radius: 4px;
  z-index: 0;
  opacity: 0;
  transition: opacity 64ms var(--ease), transform 128ms var(--ease-bounce);
  pointer-events: none;
  color: #fff;
}
.switcheroo[direction="vertical"] .switcheroo__popper {
  left: 155%;
  top: 50%;
  transform-origin: left;
  transform: translateY(-50%) scale(0.98);
}
.switcheroo[direction="horizontal"] .switcheroo__popper {
  top: 155%;
  left: 50%;
  transform-origin: top;
  transform: translateX(-50%) scale(0.98);
}
.switcheroo__popper:before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: var(--color-tooltip);
  z-index: -1;
}
.switcheroo[direction="vertical"] .switcheroo__popper:before {
  left: -2px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}
.switcheroo[direction="horizontal"] .switcheroo__popper:before {
  left: 50%;
  top: -2px;
  transform: translateX(-50%) rotate(-45deg);
}

.switcheroo[direction="vertical"] .switcheroo__squircle:hover .switcheroo__popper {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.switcheroo[direction="horizontal"] .switcheroo__squircle:hover .switcheroo__popper {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.switcheroo__squircle:hover:before {
  opacity: 1;
  transform: translate(-100%, -50%) scale(0.5);
}

/* avatar */
.switcheroo[theme="discord"] .switcheroo__avatar {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
.switcheroo[theme="discord"] .switcheroo__avatar img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* divider */
.switcheroo[theme="discord"][direction="vertical"] .switcheroo__divider {
  width: 100%;
  height: 2px;
  background-color: var(--color-pill);
  border-radius: 1px;
  opacity: 0.06;
  transform: scale(0.8);
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__divider {
  width: 2px;
  background-color: var(--color-pill);
  border-radius: 1px;
  opacity: 0.06;
  transform: scale(0.8);
}
/* delete button */
.switcheroo[theme="discord"] .switcheroo__delete {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 16px;
  line-height: 14px;
  height: 16px;
  top: -2px;
  right: -2px;
  border-radius: 50%;
  background-color: var(--color-delete);
  transform: scale(0);
  opacity: 1;
  transition: transform 128ms var(--ease), opacity 64ms var(--ease);
  cursor: pointer;
  font-size: 13px;
}
.switcheroo[theme="discord"] .switcheroo__squircle:hover .switcheroo__delete {
  opacity: 1;
  transform: scale(1);
}
/* logo */
.switcheroo[theme="discord"] .switcheroo__logo {
}
.switcheroo[theme="discord"] .switcheroo__logo img {
  width: 32px;
}
.switcheroo[theme="discord"] .switcheroo__logo:hover {
  background-color: var(--color-accent);
}
/* buttons */
.switcheroo[theme="discord"] .switcheroo__squircle--button {
  transition: border-radius 128ms var(--ease);
  color: var(--color-button);
}
.switcheroo[theme="discord"] .switcheroo__squircle--button:hover {
  color: #fff;
  background-color: var(--color-button);
}
/* modal */
.switcheroo__form {
  padding: 48px;
}
.switcheroo__form-row {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin-bottom: 16px;
}
.switcheroo__form-label {
  margin-bottom: 8px;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--color-text) !important;
}
.switcheroo__form-input {
  padding: 6px !important;
  font-size: 16px !important;
  border-radius: 4px !important;
  width: 100% !important;
  border-bottom: 2px solid var(--color-accent) !important;
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  cursor: text !important;
}
.switcheroo__form-button {
  border-radius: 8px;
  padding: 8px;
  border: none;
  outline: none;
  box-shadow: none;
  text-transform: uppercase;
  font-size: 14px;
  align-self: flex-end;
  color: #fff;
  background-color: var(--color-accent);
}

.monomer-overlay {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: 0.2s opacity ease;
  background: rgba(0, 0, 0, 0.6);
}

.monomer-modal {
  position: fixed;
  z-index: 999;
  top: 50%;
  left: 50%;
  opacity: 0;
  width: 94%;
  padding: 24px 20px;
  transition: 0.2s opacity ease;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: var(--color-squircle);
  color: var(--color-text);
}

.monomer-modal.monomer-open.monomer-anchored {
  top: 20px;
  transform: translate(-50%, 0);
}

.monomer-modal.monomer-open {
  opacity: 1;
}

.monomer-overlay.monomer-open {
  opacity: 1;
}

.monomer-close {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  width: 24px;
  height: 24px;
  position: absolute;
  top: -5px;
  right: -5px;
  padding: 5px;
  cursor: pointer;
  color: #fff;
  border: 0;
  outline: none;
  background: var(--color-delete);
  border-radius: 50%;
  padding: 0;
}
.monomer-close:hover {
  opacity: 0.8;
}





[Toryudo]

Bonjour !
Pourriez-vous nous indiquer la procédure que vous avez suivie pour installer le script Switcheroo ?
Parce qu'à partir du moment où je vois un "<script>" qui se balade comme ça dans le script (ou plus généralement, n'importe quelle balise HTML qui se balade dans un script), quelque chose me dit que soit le tuto n'est pas bon, soit vous avez tout noté dans un script alors qu'il y avait une partie à mettre dans un script et une partie à mettre dans un Template !

Avec le lien que vous avez suivi, je pense qu'on pourra vous renseigner

[Lilynufare]

Bonsoir,

Je vous remercie de votre réponse, et ça m'a interpellée, j'ai du faire ça sans réfléchir en vrai et j'ai modifié. Mon problème est résolu, ça fonctionne super ! Merci beaucoup