Icone pour cacher les widgets

[fedaykin44]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://castel-caladan.forumactif.org

Description du problème

Bonjour,
J'ai utilisé les codes suivant pour cacher les widgets
https://forum.forumactif.com/t290241-afficher-masquer-les-widgets-du-forum#2557882
Je voudrais, si possible, agrandir et déplacer l’icône dans la barre de navigation, ainsi que rajouter une phrase de survol
Si quelqu'un connais la solution, svp
Merci

[lilas]

Bonjour fedaykin44, tu fais mon bonheur avec toutes tes questions.

Tu peux augmenter la taille de l'image dans un logiciel de graphisme. Ou encore opter pour une image de ton choix.
L'image >>> Pour ma part, j'ai choisi des flèches plus inspirantes.

Ensuite, dans le css, modifier les height et width par les valeurs de la nouvelle image, y compris le no-repeat 0-13px
Diviser la valeur du height par 2 (ici, 26 - height réelle de l'image - divisée par 2 = 13)
J'espère que mon explication est compréhensible...
Pour le texte en bulle, j'en suis au même point que toi. J'attends une réponse éclairée...

#widget-arrows {
height: 13px;
}
.widget-arrow {
height: 13px;
width: 16px;
border-radius: 4px;
float: left;
cursor: pointer;
background: #f5ebf7 url(https://i.imgur.com/zVQMs.png) no-repeat 0 -13px;
}

Belle fin de journée le forum.

[fedaykin44]

Merci, c'est déjà un premier pas
Pour le placement, j'ai trouver avec le margin-top
Plus que la phrase et c'est bon

[lmc38510]

Plus que la phrase et c'est bon

Hello "fedaykin44" ... bonjour "lilas" ...

pour avoir un texte au survol de
Dans le javascript chercher :

Code:

<div class="widget-arrow is' + a + ' isopened"></div>

Essayez ceci :

Code:

<div class="widget-arrow is' + a + ' isopened" title="Votre Message iCi " ></div>

[lilas]

Bonjour Imc

Pour mon fofo, le bouton Masquer/Afficher a disparu...
Ci-dessous, mon bout de code:

Code:

var a = $(this).attr("id"), b = $('div class="widget-arrow is' + a + ' isopened" title="Cliquer pour Masquer ou Afficher le volet" ></div>;

[Invité]

bonsoir a vous toussss

marc , l'idée etait bonne mais mal placé dans le js

attention lilas tu est en phpbb2 et fedaykin44 tu est en phpbb3

voici se que j'ai reussi a avoir comme infos bulle



pour le java en phpbb3 >>

Code:

$(function() {
  var c = $("#left,#right"), d, e = function(a) {
    var a = a.direct ? 0 : 1E3, b = $(this).data("side");
    window.localStorage && localStorage[("none" == $("#" + b).css("display") ? "remove" : "set") + "Item"]("wid" + b, "1");
    $("#" + b).stop(!0, !0).animate({width:"toggle", height:"toggle", opacity:"toggle"}, a);
    $(this).toggleClass("isopened isclosed")
  };
  c.length && ($("#content-container").prepend(d = $('<div id="widget-arrows"  title="ouvrir/fermer les widgets"><div style="clear:both"></div></div>')), c.each(function() {
    $(this).find("script").remove();
    var a = $(this).attr("id"), b = $('<div class="widget-arrow is' + a + ' isopened"></div>');
    "right" == a && $("#content").prepend($("#right").css("padding", "0 10px")).css("margin-right", 0);
    b.data("side", a).appendTo(d).click(e);
    window.localStorage && "1" == localStorage.getItem("wid" + a) && b.trigger({type:"click", direct:!0})
  }))
});

la partie modifier et celle ci

Code:

<div id="widget-arrows"  title="ouvrir/fermer les widgets">

en phpbb2 le java et celui ci

Code:

$(function() {
  var c = $("#left,#right"), d, e = function() {
    var a = $(this).data("side");
    window.localStorage && localStorage[("none" == $("#" + a).parent().css("display") ? "remove" : "set") + "Item"]("wid" + a, "1");
    $("#" + a).parent().toggle();
    $(this).toggleClass("isopened isclosed")
  };
  c.length && ($("#content-container").prepend(d = $('<div id="widget-arrows" title="ouvrir/fermer les widgets"><div style="clear:both"></div></div>')), c.each(function() {
    var a = $(this).attr("id"), b = $('<div class="widget-arrow is' + a + ' isopened"></div>');
    b.data("side", a).appendTo(d).click(e);
    window.localStorage && "1" == localStorage.getItem("wid" + a) && b.trigger("click")
  }))
});

la partie modifier et celle ci

Code:

<div id="widget-arrows" title="ouvrir/fermer les widgets">

bonne nuit .

[lmc38510]

Excellent Chrystophe ...
comme l'affichage de l’icône est rattaché à la class => " .widget-arrow  " dans le CSS .... je pensais en toute logique que l'info lui était affecté ...

Bin non .. c'est à l'Id => #widget-arrow ....

comme quoi la logique et le JS non rien en commun

10/10 Mr R-max

[lilas]

attention lilas tu est en phpbb3 et fedaykin44 tu est en phpbb2

C'est l'inverse. Je suis sous phpBB2...

Quand je colle le JS tel que vous le donnez, le volet des Widgets disparait.
Quand je modifie la partie que vous suggérez avec le bout de code donné par Imc, le volet réapparait mais sans la petite image...

[Invité]

a oui , j'ai inverser les version de vous 2 (désoler) , prener donc le code en phpbb2 et fedaykin44 celui en phpbb3 ..

je vais éditer mon message défectueux , merci de la remarque

[lilas]

Hello Re-max,
J'ai pris le code pour phpBB2 et fait ce que je décris dans mon message précédent avec le résultat négatif que je mentionne.

[fedaykin44]

Heu... c'est peut-être idiot de demander, mais c'est dans quel template qu'il faut aller?

[lilas]

fedaykin44

C'est dans le JavaScript déjà créé pour Afficher/Masquer les Widgets...

[fedaykin44]

Je suis bête, je vais essayer...

[lilas]

Meuh non, tu n'es pas bête...
Je me suis aussi posé la question avant de réaliser qu'on avait qu'un JS pour ce widget...

[fedaykin44]

A force de faire des modifs par-ci par-la, je fini par me perdre un peut
En tout cas, pour moi ça marche nickel
Pour le code phpbb2, c'est bon?

[lilas]

Pour le code phpbb2, c'est bon?

Je ne sais pas car je ne voyais rien et j'ai supprimé le code.
J'ai fait les tests avec Internet Explorer 11 qui ne prend pas tout en compte, semble t'il.
Je vais refaire les manipulations dès que j'ai un peu de temps... sous Chrome et Firefox cette fois...

Bravo pour ta persévérance et merci à Imc et Re-max.

[fedaykin44]

Bon,je laisse le sujet ouvert pour que tu puisse continuer
Quand c'est ok pour toi, je le passerais en résolu
Et merci à Imc et Re-max

[lilas]

Gentille attention.
Belle fin de soirée à tous et toutes

[fedaykin44]

Je me suis avancé trop vite, l'icone apparais uniquement pour l'admin et pas pour les membres

[Invité]

l'icone apparais uniquement pour l'admin et pas pour les membres

hum comment cela peut se produire , sur mon forum de test même en invité je la voie.

[lilas]

Fonctionnel pour moi, incluant la bulle, avec le code de Re-Max pour phpBB2
tant sur Internet Explorer 11, Firefox et Chrome...

Merci les gars, vous êtes de zamours de patience !

[Invité]

tant sur Internet Explorer 11

non sans blague ça fonctionne aussi sur IE11 pour une foie ....

[lilas]

tant sur Internet Explorer 11

non sans blague ça fonctionne aussi sur IE11 pour une foie ....

Sans blague...
La madame est bien contente...

@ bientôt

[fedaykin44]

Non, chez moi il n'y a que l'admin qui vois l'icone

Cela dit j'ai un autre problème d'affichage et je me demande si c'est pas lié...

[Invité]

Regarde dans ton PA >module>widget>permission utilisateur.
Il me semble que c'est possible de bloquer l'affichage de ceux ci .

[fedaykin44]

C'était ça, la permission n'était pas la bonne, comme quoi...

[Invité]

ba oui ,comme quoi il faut un rien pour être embêter ,

[Chacha]

C'était ça, la permission n'était pas la bonne, comme quoi...

Bonjour, Afin de faciliter la gestion des problèmes, si le vôtre est résolu, pensez à : éditer votre premier message, cocher l'icône résolu et enregistrer Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton