Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[PHPBB3] Modifer les boutons : citer editer pour rollover


2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Mimosas
Mimosas
https://adventura-cc.forumactif.com/

MessageMimosas Jeu 13 Mai 2021 - 8:49

  • Version du forum :
    PHPBB3
  • Templates modifiés :
    non
  • Navigateur :
    Firefox
Bonjour,

Je n'arrive pas (évidement si j'y arrivais ..) à modifier les boutons :
[PHPBB3] Modifer les boutons : citer editer pour rollover Les-ci10

Je sais que l'on peut le faire via Gestion des images . 
Mais pas pour faire un rollover avec un bouton du genre :
[PHPBB3] Modifer les boutons : citer editer pour rollover Citer_10
[PHPBB3] Modifer les boutons : citer editer pour rollover Citer_11

Bon encore que citation multiple c'est particulier, mais : Citer et Editer, je ne trouve pas.

J'ai beau placer : .i_icon_quote ou .i_icon_edit et le :hover avec les arguments correctes dans mon css cà bronche pas !
Il doit y avoir un java à créer car pas moyen de lui faire avaler.

Le rollover fonctionne sur les autres boutons (nouveau/répondre..) mais là je bloque.
Une idée ?


Dernière édition par Mimosas le Sam 15 Mai 2021 - 3:22, édité 1 fois
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 13 Mai 2021 - 10:57

Hello Mimosas,

as tu des images (a part le citation multiple) a me fournir pour le hover que je fasses des essais.

Autre point important,
afin d'avoir un résultat parfait, il est impératif que les images soient identiques en dimensions Merci .
Mimosas
Mimosas
https://adventura-cc.forumactif.com/

MessageMimosas Jeu 13 Mai 2021 - 11:22

Pour le "hover" pas de soucis j'ai -un peu- pratiqué tout çà , je faisais également usage de sprites   regardeplusbas  alors oui: de la rigueur.
Pour les modèles ils sont : >ICI<

Pour ma part ce ne sont pas les "zimages" qui me turlupinent mais la difficulté pour modifier un théme avec forum actif.
J'étais plus à l'aise avec phpBB que je "travaillais" en local ---> avant.
Mais bon on va faire avec !
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 13 Mai 2021 - 11:26

Merci,
mais je veux que les images qui vont être affichées au survol pas celles
déposées dans ton P.A.
Comme le bouton Multicitation par exemple

On pourra le faire que par du Javascript Mimosas


Test ce script pour voir:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Cocher Sur les sujets


Déposer ceci:

Code:

$(function(){
$('img[alt="Sélectionner/Désélectionner multi-citation"]').each(function(){
var $this=$(this);
var multi=$this.attr('src');
$this.hover(function(){
//le lien de image du bouton multicitation au survol entre les " "
var multiover="https://i.servimg.com/u/f20/20/11/87/27/cita_m10.png";
$this.attr('src',multiover);
},function(){
$this.attr('src',multi);});});});

Penser a cliquer sur le bouton Valid



L'image que tu veux avoir au survol se trouve dans le script ici:

Code:

//le lien de image du bouton multicitation au survol entre les " "
var multiover="https://i.servimg.com/u/f20/20/11/87/27/cita_m10.png";

Donc si tu en veux une autre, il faudra supprimer le lien de l image ici:
https://i.servimg.com/u/f20/20/11/87/27/cita_m10.png

Et remplacer par celle que tu souhaites clin oeil




Mimosas
Mimosas
https://adventura-cc.forumactif.com/

MessageMimosas Jeu 13 Mai 2021 - 15:11

Salut,

Tu me demande les images et, je te les aient jointes en .zip
Pour être plus précis, voici ma procédure :
Je n'ai aucune images dans mon PA si ce n'est:  https://2img.net/i/fa/empty.gif le petit transparent de 1pxX1px.
Toutes sont sur le css :
Code:
.i_reply {
    width: 140px;
    height: 32px;
    background: url('adresse de mon image.png') no-repeat;
}
.i_reply:hover {
    width: 140px;
    height: 32px;
    background: url('adresse de mon image');
}

Image que j'ai ensuite converties en data -pour toutes ou presque.

Code:
.i_reply:hover {
    width: 109px;
    height: 25px;
    background: url(data:image/png;base64,iVBORw0K.... blablabla...CC) no-repeat;}

Voilà mon but:

Faire un rollover exclusivement en data pour la bonne raison que :
1) j'ai perdue pas mal d'image chez "servimg" lors d"une de leurs intervention.
Et que pour moi le data reste une solution plus simple à corriger que le sprite (mon avis).

Donc pas d'image dans le PA:
[PHPBB3] Modifer les boutons : citer editer pour rollover Nopa_610


Dernière édition par Mimosas le Sam 15 Mai 2021 - 3:22, édité 1 fois
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 13 Mai 2021 - 17:23

Ah ben merci pour le complément d'information, je ne pouvais pas le savoir que tu n'avais aucune
image dans ton P.A.
Je ne suis pas devin .
Bref,
la css ainsi devrait fonctionner:
Code:
a[href$="mode=quote"] img.i_icon_quote
{
    width: 140px!important;
    height: 32px;
    background: url('https://i.servimg.com/u/f20/20/11/87/27/citer10.png') no-repeat;
}


a[href$="mode=quote"]:hover img.i_icon_quote
{
    width: 140px!important;
    height: 32px;
    background: url('https://i.servimg.com/u/f20/20/11/87/27/citer210.png') no-repeat;
}

Il faut jouer avec le lien précédent l'image et surtout garder bien en tête que les images sont prioritaires sur l'action.

Car l'image réponse sera toujours identique même si le sujet est verrouiller par exemple .

Mimosas
Mimosas
https://adventura-cc.forumactif.com/

MessageMimosas Jeu 13 Mai 2021 - 18:34

Ok, tout ça, sans javascript ?
Avec juste :
Code:

/*Bouton Citer*/
a[href$="mode=quote"]
/*Bouton Edit*/
a[href$="mode=editpost"]
/*Bouton supprimer*/
a[href$="mode=delete"]
etc ... placé devant ?
Pour le :  img.i_icon_quote {  ---> j'suis moins sur j'ai fait mes rollover avec juste un : .i_post:hover {
je verrais cà .

ah ,Et le fameux + : !important (du css3 ??) ; mais pourquoi sur la largeur ..

Je testerais demain car là ce soir: «j'ai apéro.»
Mimosas
Mimosas
https://adventura-cc.forumactif.com/

MessageMimosas Ven 14 Mai 2021 - 5:15

super  YES !!! Cà Mmmaaaaarche !!
Merci pour l'aide
Alors voici le résultat :
[PHPBB3] Modifer les boutons : citer editer pour rollover Result10

Et la méthode pour phpbb3

PA - Affichage - Gestion des images - Mode Avancé -  sélectionner :  Boutons (si c'est des boutons)
Remplacez-la ou les images par :  https://2img.net/i/fa/empty.gif une image transparente de 1px par 1px.
➞ ENREGITRER

Puis sur la même page cliquer sur Couleur - onglet : Feuille de css
Noter qu'il est indispensable de connaitre le "mode" ainsi que la "class" de votre image cliquable. Un simple clic droit dans votre navigateur suffit - Examiner l'Élément ces informations obtenues;

Ajouter à la css :
Code:
   a[href$="mode=LE MODE"] .i_icon_quote «««« LA CLASSE
    {
        width: 140px; «««««« la largeur de votre image
        height: 32px; «««««« la hauteur de votre image
        background: url('L'adresse de votre image') no-repeat;
    }


    a[href$="mode=LE MODE"]:hover .i_icon_quote «««« le rollover et LA CLASSE
    {
        width: 140px; «««««« la largeur de votre image
        height: 32px; «««««« la hauteur de votre image
        background: url('L'adresse de votre image') no-repeat;
    }

Voici ce que çà donne sur ma css :
[PHPBB3] Modifer les boutons : citer editer pour rollover Img_du10

Il est très simple de tout basculer en data sans grosses modifications.
[PHPBB3] Modifer les boutons : citer editer pour rollover Img_du11

Alors, je n'ai qu'un mot à dire : MERCI !!
Sans compter que j'ai appris l’existence du sélecteur d'attribut !
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Ven 14 Mai 2021 - 6:27

De rien Mimosas clin oeil ,

merci pour le petit tutoriel qui servira peut être à un membre de la communauté.


Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Ven 14 Mai 2021 - 19:26


Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum