Des infobulles en guise de description des forums

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

Résolu Des infobulles en guise de description des forums

Message par Azylis le Mer 1 Mai 2013 - 4:07

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 :
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

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par MasDan le Mer 1 Mai 2013 - 4:24

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.

MasDan
*****

Masculin
Messages : 856
Inscrit(e) le : 24/05/2011

http://projetaum2.forumactif.com/
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Milouze14 le Mer 1 Mai 2013 - 8:57

Salut Azylis,

tu peux utiliser le plugin vtip Wink .
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 Wink .

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 Wink .

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 Very Happy .


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 Wink .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Azylis le Mer 1 Mai 2013 - 17:18

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):
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>
J'ai ensuite bel et bien enregistré et publié.


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 ...?

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Milouze14 le Mer 1 Mai 2013 - 17:25

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 Wink


a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Azylis le Mer 1 Mai 2013 - 17:34

Merci ! Razz

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Azylis le Mer 1 Mai 2013 - 22:24

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 ><

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Milouze14 le Jeu 2 Mai 2013 - 7:24

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 Wink :




a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Azylis le Jeu 2 Mai 2013 - 13:49

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 ><)

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Milouze14 le Jeu 2 Mai 2013 - 19:29

Re,

désolé pour le retard ; Job oblige Very Happy .

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 />
Remplaces par ceci:
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 Wink



a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Azylis le Ven 3 Mai 2013 - 0:39

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 ><




Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Milouze14 le Ven 3 Mai 2013 - 3:34

Salut,
si tu avais lu mon message dans l'intégralité Rolling Eyes ...

Recherches et supprimes ceci:

Code:
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Azylis le Ven 3 Mai 2013 - 8:50

Mais c'est ce que j'ai fait >< Regarde :


Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Milouze14 le Ven 3 Mai 2013 - 15:21

Re,
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++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Azylis le Ven 3 Mai 2013 - 15:45

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 :
Code:
<a class="vtip"title="LE CONTENU DE L INFOBULLE">TITRE</a>
on mettait le code HTML servant à inclure une image, tu crois que l'infobulle apparaitrait au survole de cette l'image ? (bien sûr, je laisserais alors la case "adresse de l'image" vide pour ne pas en avoir deux) Ca pourrait être une pirouette pour contourner le problème, non ? (comme tu m'as déjà vraiment bien aidée, ça m'embête de te tenir la jambe comme ç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 :

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Milouze14 le Ven 3 Mai 2013 - 17:54

Re,

on va remédier à ce léger soucis Wink :

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 Very Happy .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Azylis le Ven 3 Mai 2013 - 18:13

Re...

... 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"/>
(j'ai un peu jouer avec les br pour voir si l'infobulle s'adaptait à la taille du texte)

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 drunken (mais on va éviter, c'est trop fragile un clavier)

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Milouze14 le Ven 3 Mai 2013 - 19:14

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 Wink

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Milouze14 le Ven 3 Mai 2013 - 19:52

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 Wink .

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++






Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Azylis le Ven 3 Mai 2013 - 20:30

Re ! Merci beaucoup pour tes efforts ! Angel

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>
Une fois de plus

On y est presque ! >.<

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Milouze14 le Sam 4 Mai 2013 - 5:27

Salut Azylis ,

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 Wink .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Azylis le Sam 4 Mai 2013 - 5:46

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 ><

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Milouze14 le Sam 4 Mai 2013 - 6:33

Re,

ah Grrrr Very Happy , bon on va procéder autrement et je viens de tester çà fonctionne à merveille Very Happy .
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++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Azylis le Sam 4 Mai 2013 - 23:41

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 ^^")

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Matriochka le Dim 12 Mai 2013 - 11:22

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 ! Wink

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 Smile

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Des infobulles en guise de description des forums

Message par Azylis le Mer 15 Mai 2013 - 17:24

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 !) :
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');
        });
Pour le 2e forum on remplace tout simplement "M14_forum_1" par "M14_forum_2", et ainsi de suite.

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;
        }
Là où il y a "DON'T TOUCH", ce sont des valeurs qu'on ne doit surtout pas modifier. Après, à vous de personnaliser vos infobulles ^^
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*

Azylis
**

Féminin
Messages : 75
Inscrit(e) le : 12/11/2010

http://valhalla.tonempire.net/forum.htm
Azylis a été remercié(e) par l'auteur de ce sujet.

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


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