Des infobulles en guise de description des forums
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Des infobulles en guise de description des forums
Bonjour !
Pour parvenir là où j'en suis, je me suis aidée de Ce topic : je l'avais lancé quand j'étais encore en phpbb3. Or, me voilà maintenant en phpbb2, donc le code qu'on m'avait gentiment donné ne fonctionne plus, j'ai donc pris celui qu'on avait donné à Eukaipia. Il fonctionne à quelques détails près :
En effet, quand je passe mon curseur sur un seul titre de forum, ils apparaissent tous d'un coup ! Comment faire pour que seule la description du lien survolé apparaisse et pas les autres ?
Pour les codes, c'est les mêmes que dans le topic que j'ai cité, donc pas besoin de les remettre. En revanche, je précise que dans les descriptions je mets ça :
Merci d'avance ! ^^
Pour parvenir là où j'en suis, je me suis aidée de Ce topic : je l'avais lancé quand j'étais encore en phpbb3. Or, me voilà maintenant en phpbb2, donc le code qu'on m'avait gentiment donné ne fonctionne plus, j'ai donc pris celui qu'on avait donné à Eukaipia. Il fonctionne à quelques détails près :
En effet, quand je passe mon curseur sur un seul titre de forum, ils apparaissent tous d'un coup ! Comment faire pour que seule la description du lien survolé apparaisse et pas les autres ?
Pour les codes, c'est les mêmes que dans le topic que j'ai cité, donc pas besoin de les remettre. En revanche, je précise que dans les descriptions je mets ça :
- Code:
<div class="desc_forum">bloooooooooooooooooo</div>
Merci d'avance ! ^^
Dernière édition par Azylis le Mer 15 Mai 2013 - 17:26, édité 1 fois
Re: Des infobulles en guise de description des forums
Chaque forum doit avoir sa propre class.
Pour le CSS, au passage de la souris sur le titre d'un forum son action est valider pour tous les endroits où la class est spécifier; dans votre cas tous vos forums. Il faut donc que chaque titre ai sa propre class dans votre cas.
Solution : Modifiez votre code HTML et votre CSS pour pour que chaque forum ai sa propre class.
Pour le CSS, au passage de la souris sur le titre d'un forum son action est valider pour tous les endroits où la class est spécifier; dans votre cas tous vos forums. Il faut donc que chaque titre ai sa propre class dans votre cas.
Solution : Modifiez votre code HTML et votre CSS pour pour que chaque forum ai sa propre class.
Re: Des infobulles en guise de description des forums
Salut Azylis,
tu peux utiliser le plugin vtip .
Je t'explique :
Il y a un plugin Jquery qui permet au survol d'un titre d'afficher une infobulle personnalisable
dans un premier temps dans le plugin (image) :
Changes éventuellement l'image si besoin qui sera présente dans l'infobulle:
et la distance de l infobulle :
puis le reste dans la css .
Passons a la bibliothèque Jquery:
Modules/HTML&JAVASCRIPT/
Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite et surtout pour être
certain que le javascript fonctionne ne coche aucune case .
Colle tout ceci :
Pensez à cliquer sur le bouton
Repères le lien du script et insères le à la place de :TON LIEN.JS
On passe ensuite dans le template :index_box
Affichage/Templates/Général/index_box
Tout en bas du template après:
Colle en modifiant TON LIEN.JS par le lien mentionné dans la gestion des codes javascript
Pense a enregistrer les modifications en cliquant respectivement sur et
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Tout est bien expliqué pour l'apparence a donner:
Colle tout ceci:
Pense à valider les modifications en cliquant sur le bouton "Valider".
On arrive à la fin .
Il ne te reste plus qu'a déposer dans la description des forums ceci:
Et voilà , bon courage .
a++
tu peux utiliser le plugin vtip .
Je t'explique :
Il y a un plugin Jquery qui permet au survol d'un titre d'afficher une infobulle personnalisable
dans un premier temps dans le plugin (image) :
Changes éventuellement l'image si besoin qui sera présente dans l'infobulle:
- Code:
$('a#vtip #vtipArrow').attr("src", 'http://i83.servimg.com/u/f83/18/26/42/15/bubble10.png');
et la distance de l infobulle :
- Code:
this.xOffset = 40; // x distance sur la gauche de la bulle par rapport au curseur
this.yOffset = -20; // y distance sur la hauteur de la bulle par rapport au curseur
puis le reste dans la css .
Passons a la bibliothèque Jquery:
Modules/HTML&JAVASCRIPT/
Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite et surtout pour être
certain que le javascript fonctionne ne coche aucune case .
Colle tout ceci :
- Code:
/**
Vertigo Tip by www.vertigo-project.com
Requires jQuery
*/
this.vtip = function() {
this.xOffset = 40; // x distance sur la gauche de la bulle par rapport au curseur
this.yOffset = -20; // y distance sur la hauteur de la bulle par rapport au curseur
$(".vtip").unbind().hover(
function(e) {
this.t = this.title;
this.title = '';
this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset);
$('body').append( '<a id="vtip"><img id="vtipArrow" />' + this.t + '</a>' );
$('a#vtip #vtipArrow').attr("src", 'http://i83.servimg.com/u/f83/18/26/42/15/bubble10.png');
$('a#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow");
},
function() {
this.title = this.t;
$("a#vtip").fadeOut("slow").remove();
}
).mousemove(
function(e) {
this.top = (e.pageY + yOffset);
this.left = (e.pageX + xOffset);
$("a#vtip").css("top", this.top+"px").css("left", this.left+"px");
}
);
};
jQuery(document).ready(function($){vtip();})
Pensez à cliquer sur le bouton
Repères le lien du script et insères le à la place de :TON LIEN.JS
- Code:
<script src="TON LIEN.JS"></script>
On passe ensuite dans le template :index_box
Affichage/Templates/Général/index_box
Tout en bas du template après:
- Code:
<!-- END catrow -->
Colle en modifiant TON LIEN.JS par le lien mentionné dans la gestion des codes javascript
- Code:
<script src="TON LIEN.JS"></script>
Pense a enregistrer les modifications en cliquant respectivement sur et
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Tout est bien expliqué pour l'apparence a donner:
Colle tout ceci:
- Code:
/*Infobulle de la description des forums*/
/*Le titre*/
a.vtip
{
color:black;/*le texte de couleur noire*/
margin-left:5px;/*on decale le texte de 20px de la gauche*/
text-decoration:none !important;/*on supprime le soulignement*/
cursor:pointer;/*on donne un type de curseur */
}
/*L apparence de l infobulle*/
a#vtip
{
display: none;/*NE PAS CHANGER*/
position: absolute;/*NE PAS CHANGER*/
padding: 10px;/*on aura un espace de 10px sur l ensemble de l infobulle*/
font-size:10px;/*on donne une taille de police*/
background-color:darkred;/*la couleur de fond rouge de l infobulle*/
color:#ffffff;/*le texte de couleur blanc*/
border: 1px solid blue;/*la bordure avec une epaisseur de 1 px etant solid et des couleur bleue*/
-webkit-border-radius: 6px;/*les bordures arrondies pour les navigateurs recents*/
-moz-border-radius: 6px;
border-radius: 6px;
}
/*le positionnement de l image dans l infobulle*/
a#vtip #vtipArrow
{
position: absolute;/*NE PAS CHANGER*/
top: 0px;/*l image sort sur la hauteur*/
left:0px ;/*l image se deplace de la gauche*/
}
Pense à valider les modifications en cliquant sur le bouton "Valider".
On arrive à la fin .
Il ne te reste plus qu'a déposer dans la description des forums ceci:
- Code:
<a class="vtip"title="LE CONTENU DE L INFOBULLE">LE TITRE</a>
Et voilà , bon courage .
a++
Invité- Invité
Re: Des infobulles en guise de description des forums
MasDan => Merci de m'avoir répondu aussi vite ^^ Malheureusement la solution que tu me proposes est quasi ingérable : j'ai trop de forums et de sous forums, surtout que d'autres risquent d'arriver bientôt. Néanmoins je garde ta solution si toutes les autres ne fonctionnent pas ^^
Milouze14 : Une fois de plus tu viens à ma rescousse XD Par contre j'ai du faire une erreur quelque part car ça ne fonctionne pas ><
La partie JS :
Comme conseillé, le titre est explicite et aucune cases n'est cochée
Le code (j'ai fais un bête copier-coller donc normalement il est bon):
Le lien .js : que j'ai copier-collé dans....
La partie template :
.... mon index-BOX :
La partie CSS :
J'ai en fait repris les codes de mes anciennes infobulles :
Et la partie Finale :
Là je bloque un peu : le "Titre" dont tu parle, c'est quoi ?
Dans tous les cas, j'ai fais plusieurs essais :
Mais aucun ne fonctionne ><
J'ai du passer à coté de quelque chose, mais quoi ...?
Milouze14 : Une fois de plus tu viens à ma rescousse XD Par contre j'ai du faire une erreur quelque part car ça ne fonctionne pas ><
La partie JS :
Comme conseillé, le titre est explicite et aucune cases n'est cochée
Le code (j'ai fais un bête copier-coller donc normalement il est bon):
- Code:
/**
Vertigo Tip by www.vertigo-project.com
Requires jQuery
*/
this.vtip = function() {
this.xOffset = 40; // x distance sur la gauche de la bulle par rapport au curseur
this.yOffset = -20; // y distance sur la hauteur de la bulle par rapport au curseur
$(".vtip").unbind().hover(
function(e) {
this.t = this.title;
this.title = '';
this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset);
$('body').append( '<a id="vtip"><img id="vtipArrow" />' + this.t + '</a>' );
$('a#vtip #vtipArrow').attr("src", 'http://i83.servimg.com/u/f83/18/26/42/15/bubble10.png');
$('a#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow");
},
function() {
this.title = this.t;
$("a#vtip").fadeOut("slow").remove();
}
).mousemove(
function(e) {
this.top = (e.pageY + yOffset);
this.left = (e.pageX + xOffset);
$("a#vtip").css("top", this.top+"px").css("left", this.left+"px");
}
);
};
jQuery(document).ready(function($){vtip();})
Le lien .js : que j'ai copier-collé dans....
La partie template :
.... mon index-BOX :
- Code:
<!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
<script src="http://valhalla-test.lebonforum.com/12391.js"></script>
La partie CSS :
J'ai en fait repris les codes de mes anciennes infobulles :
- Code:
/*Infobulle de la description des forums*/
/*Le titre*/
a.vtip
{
color:black;/*le texte de couleur noire*/
margin-left:5px;/*on decale le texte de 20px de la gauche*/
text-decoration:none !important;/*on supprime le soulignement*/
cursor:pointer;/*on donne un type de curseur */
}
/*L apparence de l infobulle*/
a#vtip
{
display: none;/*NE PAS CHANGER*/
position: absolute;/*NE PAS CHANGER*/
padding: 10px;
font-size:10px;
font-weight:bold;
background-color:#000;
color:#fff;
border-width: 3px 2px;
border-style: solid;
border-color: #d7d7d7 #878787;
-webkit-border-radius: 10px 40px 10px 40px;
-moz-border-radius: 10px 40px 10px 40px;
border-radius: 10px 40px 10px 40px;
}
/*le positionnement de l image dans l infobulle*/
a#vtip #vtipArrow
{
position: absolute;/*NE PAS CHANGER*/
top: 0px;/*l image sort sur la hauteur*/
left:0px ;/*l image se déplace de la gauche*/
}
Et la partie Finale :
Là je bloque un peu : le "Titre" dont tu parle, c'est quoi ?
Dans tous les cas, j'ai fais plusieurs essais :
- Code:
<a class="vtip"title="Infobulle des lieux">Infobulle des lieux</a>
Au cas où le "titre" était le titre du J.S
- Code:
<a class="vtip"title="LE CONTENU DE L INFOBULLE">blooooooooooo</a>
- Code:
<a class="vtip"title="Présentation des membres">TITRE</a>
- Code:
<a class="vtip"title="News etc...">Panneau d'Annonces</a>
au cas où le titre soit le nom du forum
Mais aucun ne fonctionne ><
J'ai du passer à coté de quelque chose, mais quoi ...?
Re: Des infobulles en guise de description des forums
Salut Azylis ,
Edit: tu as déposé le code ici:
Tous les codes que tu as déposé sont bons et doivent être fonctionnels .
Attention si tu modifies le Plugin le lien du script changera .
Il faudra alors le modifier dans le template
a++
Edit: tu as déposé le code ici:
Tous les codes que tu as déposé sont bons et doivent être fonctionnels .
Attention si tu modifies le Plugin le lien du script changera .
Il faudra alors le modifier dans le template
a++
Invité- Invité
Re: Des infobulles en guise de description des forums
Oups, je n'avais pas vu que tu avais édité (heureusement que je suis allée jeter un coup d'oeil :p)
Je n'ai pas modifié le plugin, ou alors quand on modifie le CSS on modifie le plugin ? Oo (c'est la première fois que j'utilise du JQuery, donc je ne sais pas qu'est-ce qui influence quoi)
Et oui, j'ai bien déposé le code dans la description... (désolée, je ne comprends pas trop si tu as souligné une de mes erreurs que je n'ai pas compris, ou si ce n'est pas normal que ça ne marche pas ><)
Et j'ai bien vérifié, le lien .js est le même dans les templates, et ça ne fonctionne toujours pas ><
Je n'ai pas modifié le plugin, ou alors quand on modifie le CSS on modifie le plugin ? Oo (c'est la première fois que j'utilise du JQuery, donc je ne sais pas qu'est-ce qui influence quoi)
Et oui, j'ai bien déposé le code dans la description... (désolée, je ne comprends pas trop si tu as souligné une de mes erreurs que je n'ai pas compris, ou si ce n'est pas normal que ça ne marche pas ><)
Et j'ai bien vérifié, le lien .js est le même dans les templates, et ça ne fonctionne toujours pas ><
Re: Des infobulles en guise de description des forums
Salut Azylis ,
il n'y a que le lien du plugin qui changera si tu le modifies.
L'effet escompté fonctionne très bien si je me réfère à ton forum :
a++
il n'y a que le lien du plugin qui changera si tu le modifies.
L'effet escompté fonctionne très bien si je me réfère à ton forum :
a++
Invité- Invité
Re: Des infobulles en guise de description des forums
Ca y est, je viens de comprendre où il fallait mettre mon curseur pour voir apparaitre l'infobulle =o= Je m'échinais à le mettre sur le lien du forum ("coin admin" etc...) comme avant, du coup je ne risquai pas de la faire apparaitre ^^"
Du coup maintenant j'ai une petite question : est-il possible de faire en sorte que l'infobulle apparaisse lorsque le curseur est sur le lien du forum, au lieu de rajouter un 2e titre dans la description ? Parce qu'en fait chacune de mes descriptions sera remplie par une image, c'était pour ça qu'on avait choisit ce système : il n'y avait plus aucun texte dans les descriptions puisque tout était dit dans les infobulles.
Désolée, j'en demande encore plus alors que tu m'as déjà bien aidée ><
Edit : Ou alors si c'est pas possible, faire en sorte que l'infobulle apparaisse lorsque le curseur est sur l'illustration (mais je préfèrerais la première version si possible ><)
Du coup maintenant j'ai une petite question : est-il possible de faire en sorte que l'infobulle apparaisse lorsque le curseur est sur le lien du forum, au lieu de rajouter un 2e titre dans la description ? Parce qu'en fait chacune de mes descriptions sera remplie par une image, c'était pour ça qu'on avait choisit ce système : il n'y avait plus aucun texte dans les descriptions puisque tout était dit dans les infobulles.
Désolée, j'en demande encore plus alors que tu m'as déjà bien aidée ><
Edit : Ou alors si c'est pas possible, faire en sorte que l'infobulle apparaisse lorsque le curseur est sur l'illustration (mais je préfèrerais la première version si possible ><)
Re: Des infobulles en guise de description des forums
Re,
désolé pour le retard ; Job oblige .
Dans ton template :
Affichage/Templates/Général/index_box
Recherches ceci:
Recherches et supprimes ceci:
Pense a enregistrer les modifications en cliquant respectivement sur et
Dans la description de chaque forum, laisse seulement le texte brut
a++
désolé pour le retard ; Job oblige .
Dans ton template :
Affichage/Templates/Général/index_box
Recherches ceci:
- Code:
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
- Code:
<a href="{catrow.forumrow.U_VIEWFORUM}" class="vtip"title="{catrow.forumrow.FORUM_DESC}">{catrow.forumrow.FORUM_NAME}</a><br />
Recherches et supprimes ceci:
- Code:
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
Pense a enregistrer les modifications en cliquant respectivement sur et
Dans la description de chaque forum, laisse seulement le texte brut
a++
Invité- Invité
Re: Des infobulles en guise de description des forums
Il n'y a pas de problèmes, tu as une vie à coté ^^
Et mois je suis sincèrement désolée, mais ça ne fonctionne toujours pas ><
Je n'ai touché que le 1er forum :
- le texte en brut de la description devient le lien du forum, l'infobulle est vide, et le titre du forum prend la place de la description avec l'ajout d'un "> juste avant à chaque fois, il est lui aussi un lien du forum, et enfin les images pour illustrer les forums disparaissent ><
Et mois je suis sincèrement désolée, mais ça ne fonctionne toujours pas ><
Je n'ai touché que le 1er forum :
- le texte en brut de la description devient le lien du forum, l'infobulle est vide, et le titre du forum prend la place de la description avec l'ajout d'un "> juste avant à chaque fois, il est lui aussi un lien du forum, et enfin les images pour illustrer les forums disparaissent ><
Re: Des infobulles en guise de description des forums
Salut,
si tu avais lu mon message dans l'intégralité ...
Recherches et supprimes ceci:
a++
si tu avais lu mon message dans l'intégralité ...
Recherches et supprimes ceci:
- Code:
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
a++
Invité- Invité
Re: Des infobulles en guise de description des forums
Mais c'est ce que j'ai fait >< Regarde :
Re: Des infobulles en guise de description des forums
Re,
dans la description essayes de supprimer les guillemets qui entoure description :
a++
dans la description essayes de supprimer les guillemets qui entoure description :
Texte en brut, sans aucune balise, dans la case "description" du panneau d'administration
a++
Invité- Invité
Re: Des infobulles en guise de description des forums
Désolée, mais ça n'a rien changé ><
Sinon je me demandais, si on remonte le temps à l'étape où ça marchait mais rajoutais le titre dans la description, et qu'à la place de TITRE :
EDIT : J'ai fais quelques tests de mon coté pour essayer de te fournir le plus d'infos possible, j'espère que ça te sera utile >< :
Le rôle de l'illustration :
¤ Sans image d'illustration :
Ca marche bien :
¤ Avec une image d'illustration :
on retrouve le même problème :
Sinon je me demandais, si on remonte le temps à l'étape où ça marchait mais rajoutais le titre dans la description, et qu'à la place de TITRE :
- Code:
<a class="vtip"title="LE CONTENU DE L INFOBULLE">TITRE</a>
EDIT : J'ai fais quelques tests de mon coté pour essayer de te fournir le plus d'infos possible, j'espère que ça te sera utile >< :
Le rôle de l'illustration :
¤ Sans image d'illustration :
Ca marche bien :
¤ Avec une image d'illustration :
on retrouve le même problème :
Re: Des infobulles en guise de description des forums
Re,
on va remédier à ce léger soucis :
Dans la description laisse le texte puis à la fin de ce dernier ajoutes un saut de ligne:
Puis insères le lien de ton image dans le code ci-dessous:
Si tu as plusieurs images il faudra mettre ce code entre la balise center:
En espérant que ce sera bon cette fois ci .
a++
on va remédier à ce léger soucis :
Dans la description laisse le texte puis à la fin de ce dernier ajoutes un saut de ligne:
- Code:
<br />
Puis insères le lien de ton image dans le code ci-dessous:
- Code:
<img src="LE LIEN DE TON IMAGE"/>
Si tu as plusieurs images il faudra mettre ce code entre la balise center:
- Code:
<center>
<img src="LE LIEN DE TON IMAGE 1 "/>
<img src="LE LIEN DE TON IMAGE 2 "/>
<img src="LE LIEN DE TON IMAGE 3 "/>
</center>
En espérant que ce sera bon cette fois ci .
a++
Invité- Invité
Re: Des infobulles en guise de description des forums
Re...
... Et loupé ^^"
J'ai laissé la case "lien de l'image" vide, ^puis ai mis dans la description :
Et ça me fait ça :
Désolée... ce plugin n'est peut être pas fait pour être associé à des illus ? ><
Le plus frustrant dans l'affaire, c'est que je sais que c'est possible : http://dark-ages.forumactif.org/ et ce forum est bel et bien en phpbb2 XD
C'est à se cogner la tête contre son clavier (mais on va éviter, c'est trop fragile un clavier)
... Et loupé ^^"
J'ai laissé la case "lien de l'image" vide, ^puis ai mis dans la description :
- Code:
C'est un lieu d'entraide pour les membres, mais aussi les Invités.<br> Ici, on a beau être Hors RP, ce n'est pas non plus du flood : on y est mortellement sérieux ! è_é<br> (... comment ça on est pas impressionnants ? O.O)<br> Vous avez des questions ? Envie de faire un partenariat ? <br>Vous avez du mal à trouver des Avatars ou des Signatures ?<br> Vous voulez donner votre avis sur le fow ? Vous êtes les bienvenus !</br><img src="http://i81.servimg.com/u/f81/13/93/32/39/lieu10.png"/>
Et ça me fait ça :
Désolée... ce plugin n'est peut être pas fait pour être associé à des illus ? ><
Le plus frustrant dans l'affaire, c'est que je sais que c'est possible : http://dark-ages.forumactif.org/ et ce forum est bel et bien en phpbb2 XD
C'est à se cogner la tête contre son clavier (mais on va éviter, c'est trop fragile un clavier)
Re: Des infobulles en guise de description des forums
Re,
ok je te donne tout çà dans quelques minutes,
en attendant , tu peux supprimer le plugin Jquery dans la gestion des scripts et le lien à la fin du template
a++
ok je te donne tout çà dans quelques minutes,
en attendant , tu peux supprimer le plugin Jquery dans la gestion des scripts et le lien à la fin du template
a++
Invité- Invité
Re: Des infobulles en guise de description des forums
Re,
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Supprimes la C.S.S concernant les class vtip du plugin Jquery .
Ajoutes ceci ( il y a des commentaires pour une meilleure compréhension) :
Pense à valider les modifications en cliquant sur le bouton "Valider".
Dans le template :
Affichage/Templates/Général/index_box
Recherches et supprimes:
Remplace par:
Pense a enregistrer les modifications en cliquant respectivement sur et
Il faut savoir qu'il faudra absolument avoir une description sur chacun de tes forums sinon une infobulle
s'affichera avec un contenu vide.
a++
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Supprimes la C.S.S concernant les class vtip du plugin Jquery .
Ajoutes ceci ( il y a des commentaires pour une meilleure compréhension) :
- Code:
/*Infobulle de la description des forums*/
/*Le titre*/
a.M14_info
{
position:relative;
}
/*on cache l infobulle*/
a.M14_info span
{
display: none;
}
/*l apparence et la position de l infobulle*/
a.M14_info:hover span
{
display:inline;
position:absolute;
left:30px;/* position de l'infobulle depuis la gauche*/
top: -20px;/* position de l'infobulle depuis le haut*/
background-color:#141414;/* couleur de fond de l'infobulle */
color:#ffffff;/* couleur du texte de l'infobulle */
border: 1px solid #ffffff;/* couleur de la bordure de l'infobulle */
padding-left:5px; /* espace gauche de l'infobulle */
padding-right:5px; /* espace droit de l'infobulle */
padding-top:3px; /* espace du haut de l'infobulle */
padding-bottom:3px; /* espace du bas de l'infobulle */
min-width:150px;/* largeur minimale de l'infobulle */
min-height:30 px;/* hauteur minimale de l'infobulle */
-webkit-border-radius: 10px;/* bordures arrondis de 10px*/
-moz-border-radius: 10px;
border-radius: 10px;
}
Pense à valider les modifications en cliquant sur le bouton "Valider".
Dans le template :
Affichage/Templates/Général/index_box
Recherches et supprimes:
- Code:
<a href="{catrow.forumrow.U_VIEWFORUM}" class="vtip"title="{catrow.forumrow.FORUM_DESC}">{catrow.forumrow.FORUM_NAME}</a><br />
Remplace par:
- Code:
<a class="M14_info" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}<span>{catrow.forumrow.FORUM_DESC}</span></a> <br />
Pense a enregistrer les modifications en cliquant respectivement sur et
Il faut savoir qu'il faudra absolument avoir une description sur chacun de tes forums sinon une infobulle
s'affichera avec un contenu vide.
a++
Invité- Invité
Re: Des infobulles en guise de description des forums
Re ! Merci beaucoup pour tes efforts !
C'est presque parfait ! A une exception près : l'image d'illustration déménage dans l'infobulle ^^" (pourtant j'ai mis le lien dans la case "lien de l'image" et pas "description")
Et j'ai bien supprimé
On y est presque ! >.<
C'est presque parfait ! A une exception près : l'image d'illustration déménage dans l'infobulle ^^" (pourtant j'ai mis le lien dans la case "lien de l'image" et pas "description")
Et j'ai bien supprimé
- Code:
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
On y est presque ! >.<
Re: Des infobulles en guise de description des forums
Salut Azylis ,
retire le saut de ligne et ensuite les images pour les positionner à l'endroit initial :
Tout devrait rentrer dans l'ordre .
a++
retire le saut de ligne et ensuite les images pour les positionner à l'endroit initial :
Adresse de l'image :
Tout devrait rentrer dans l'ordre .
a++
Invité- Invité
Re: Des infobulles en guise de description des forums
Bonjour Milouze !
Tu parles du saut de ligne dans le template ? Si c'est ça je viens de l'enlever ça y est. Quant à l'adresse de l'image, je l'avais belle et bien mise dans la case "adresse de l'image", et ce pour tous les forums (je viens de vérifier).
Je viens d'actualiser, et elle est toujours dans l'infobulle ><
Tu parles du saut de ligne dans le template ? Si c'est ça je viens de l'enlever ça y est. Quant à l'adresse de l'image, je l'avais belle et bien mise dans la case "adresse de l'image", et ce pour tous les forums (je viens de vérifier).
Je viens d'actualiser, et elle est toujours dans l'infobulle ><
Re: Des infobulles en guise de description des forums
Re,
ah Grrrr , bon on va procéder autrement et je viens de tester çà fonctionne à merveille .
On va déposer 2 fois la même variable .
Dans le template:
recherches :
Remplace par:
Pense a enregistrer les modifications en cliquant respectivement sur et
Dans ta C.S.S
ajoutes ceci:
Dans la description de chaque forum:
Dans adresse de l'image : ne rien mettre
Dans description:
Ton texte puis le saut de ligne puis ton image entouré de P .
Ce qui donne:
a++
ah Grrrr , bon on va procéder autrement et je viens de tester çà fonctionne à merveille .
On va déposer 2 fois la même variable .
Dans le template:
recherches :
- Code:
<a class="M14_info" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}<span>{catrow.forumrow.FORUM_DESC}</span></a> <br />
Remplace par:
- Code:
<a class="M14_info" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}<span>{catrow.forumrow.FORUM_DESC}</span>
<div>{catrow.forumrow.FORUM_DESC}</div></a><br />
Pense a enregistrer les modifications en cliquant respectivement sur et
Dans ta C.S.S
ajoutes ceci:
- Code:
/*on supprime toutes sortes d images figurant dans l'infobulle*/
a.M14_info:hover span p
{
display:none ! important;
}
Dans la description de chaque forum:
Dans adresse de l'image : ne rien mettre
Dans description:
Ton texte puis le saut de ligne puis ton image entouré de P .
Ce qui donne:
- Code:
Ton texte
<br>
<p>
<img src="LE LIEN DE L IMAGE"/>
</p>
a++
Invité- Invité
Re: Des infobulles en guise de description des forums
Re,
Et bien tu as eu plus de chances que moi XD (pourtant j'ai suivis tes instructions à la lettre et ai vérifié 2 fois ><)
-> Toute la description (illustration comprise) est maintenant considérée comme le lien du forum => du coup je soupçonne que toute la description sera affectée si je rajoute du style aux liens de forums (agrandissement, changement de couleurs au passage de la sourire etc...)
-> ma description (texte) est donc à la fois dans mon infobulle ET dans la case de description ^^"
-> la case de description est devenue vachement haute alors que mon image ne l'est pas autant Oo (pourtant j'ai de nouveau enlevé le br dans les templates)
Je suis vraiment désolée, c'est loupé >//< (c'est là que je regrette qu'on ne puisse pas cliquer plusieurs fois sur le "merci" : le mériterais amplement ^^")
Et bien tu as eu plus de chances que moi XD (pourtant j'ai suivis tes instructions à la lettre et ai vérifié 2 fois ><)
-> Toute la description (illustration comprise) est maintenant considérée comme le lien du forum => du coup je soupçonne que toute la description sera affectée si je rajoute du style aux liens de forums (agrandissement, changement de couleurs au passage de la sourire etc...)
-> ma description (texte) est donc à la fois dans mon infobulle ET dans la case de description ^^"
-> la case de description est devenue vachement haute alors que mon image ne l'est pas autant Oo (pourtant j'ai de nouveau enlevé le br dans les templates)
Je suis vraiment désolée, c'est loupé >//< (c'est là que je regrette qu'on ne puisse pas cliquer plusieurs fois sur le "merci" : le mériterais amplement ^^")
Re: Des infobulles en guise de description des forums
Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou à faire un UP régulièrement ! Ce sujet est corbeillé (rappel de pourquoi), merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum. A bientôt sur ForumActif |
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Des infobulles en guise de description des forums
Voici la solution qui a été trouvée :
1) Créer le(s) J.S, il y a un pour chaque forum/sous forum (ça en fait du peuple !) :
2) Le CSS :
3) Dans les descriptions
Dans Forum => catégorie et forum =>modifier un forum, en laissant la case "adresse de l'image" vide, vous mettez dans la description :
Et voilà !
Merci Milouze pour cette solution : *3*
1) Créer le(s) J.S, il y a un pour chaque forum/sous forum (ça en fait du peuple !) :
- Code:
$(function() {
/* Ajoute une class a la description des forums */
$('img[src="http://i83.servimg.com/u/f83/18/26/42/15/empty17.gif"]').closest('tr').addClass('M14_forum_1');
});
2) Le CSS :
- Code:
/* Infobulles des descriptions*/
/* I] DESCRIPTIONS DES FORUMS*/
/* Description du 1er forum */
tr.M14_forum_1 .row1.over{
background-image:url(URL IMAGE);
background-repeat:no-repeat;
background-position:25% 50%;/*on déplace à gauche et centre en pourcentage*/
height:150px;/*hauteur de l'image*/
width:660px;/*largeur de l'image*/
}
/* Description du 2e forum */
tr.M14_forum_2 .row1.over{
background-image:url(URL IMAGE);
background-repeat:no-repeat;
background-position:25% 50%;
height:150px; /*hauteur image*/
width:660px; /*largeur image*/
}
/*II] Infobulle de la description des forums*/
/*Le titre*/
a.M14_info{
position:relative;
}
/*on cache l infobulle*/
a.M14_info span{
display: none;
}
/*l apparence et la position de l infobulle*/
a.M14_info:hover span{
display:block;
position:absolute;
left:0px;/* position de l'infobulle depuis la gauche : DON'T TOUCH !*/
top:15px;/* position de l'infobulle depuis le haut: DON'T TOUCH !*/
color:#09c;
background:#555E5D;
border: 1px solid #555E5D;
padding:10px;
width:250px;/* largeur de l'infobulle */
height:60px;/* hauteur de l'infobulle */
overflow-y:auto;
overflow-x:hidden;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
/* apparence au survol de l infobulle */
a.M14_info:hover span:hover{
color:#800000;
-webkit-box-shadow: 10px 10px 20px 5px #000000;
box-shadow: 10px 10px 20px 5px #000000;
}
Pour chaque forum commenté :
indique le lien de ton image et surtout la dimension de chacune
ensuite suivant leur dimension il faudra jouer avec le 25% ou 20% présent dans ta css
Si tu diminues la valeur l image viendra se coller a gauche,
si tu augmentes l image viendra se coller à droite.
3) Dans les descriptions
Dans Forum => catégorie et forum =>modifier un forum, en laissant la case "adresse de l'image" vide, vous mettez dans la description :
- Code:
Le texte du premier forum
<img src="http://i83.servimg.com/u/f83/18/26/42/15/empty11.gif"/>
Et voilà !
Merci Milouze pour cette solution : *3*
Sujets similaires
» Image de description des forums
» Cacher ou modifier les infobulles sur les liens de sous-forums
» Image en description des forums + sous forums
» Modifications des forums (Description)
» Description forum et sous forums en hover sous l'image de description
» Cacher ou modifier les infobulles sur les liens de sous-forums
» Image en description des forums + sous forums
» Modifications des forums (Description)
» Description forum et sous forums en hover sous l'image de description
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum