Membres connectés récemment
[PHPBB3] Modifer les boutons : citer editer pour rollover
2 participants
Page 1 sur 1 • Partagez
- Version du forum :PHPBB3
- Templates modifiés :non
- Navigateur :Firefox
Bonjour,
Je n'arrive pas (évidement si j'y arrivais ..) à modifier les boutons :
Je sais que l'on peut le faire via Gestion des images .
Mais pas pour faire un rollover avec un bouton du genre :
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 ?
Je n'arrive pas (évidement si j'y arrivais ..) à modifier les boutons :
Je sais que l'on peut le faire via Gestion des images .
Mais pas pour faire un rollover avec un bouton du genre :
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 ?
Pour le "hover" pas de soucis j'ai -un peu- pratiqué tout çà , je faisais également usage de sprites 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 !
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 !
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:
Penser a cliquer sur le bouton
L'image que tu veux avoir au survol se trouve dans le script ici:
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
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
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
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 :
Image que j'ai ensuite converties en data -pour toutes ou presque.
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:
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:
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:
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 .
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 .
Ok, tout ça, sans javascript ?
Avec juste :
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.»
Avec juste :
- Code:
/*Bouton Citer*/
a[href$="mode=quote"]
/*Bouton Edit*/
a[href$="mode=editpost"]
/*Bouton supprimer*/
a[href$="mode=delete"]
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.»
YES !!! Cà Mmmaaaaarche !!
Alors voici le résultat :
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 :
Voici ce que çà donne sur ma css :
Il est très simple de tout basculer en data sans grosses modifications.
Alors, je n'ai qu'un mot à dire : MERCI !!
Sans compter que j'ai appris l’existence du sélecteur d'attribut !
Alors voici le résultat :
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 :
Il est très simple de tout basculer en data sans grosses modifications.
Alors, je n'ai qu'un mot à dire : MERCI !!
Sans compter que j'ai appris l’existence du sélecteur d'attribut !
Sujets similaires
» [PHPBB3]Afficher les boutons " éditer, citer, supprimer, etc ... " sous forme de texte
» [EDGE]Afficher les boutons éditer, citer, supprimer, etc ... sous forme de texte
» Cacher les boutons citer et multi-citation pour un membre spécifique
» [PHPBB3] Boutons nouveaux pour modérateurs
» [MODERNBB] Où sont passé les BBcode , comme pour citer
» [EDGE]Afficher les boutons éditer, citer, supprimer, etc ... sous forme de texte
» Cacher les boutons citer et multi-citation pour un membre spécifique
» [PHPBB3] Boutons nouveaux pour modérateurs
» [MODERNBB] Où sont passé les BBcode , comme pour citer
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum