Description d'un forum dans une "bulle"

[Azylis]

Bonjour à tous,

Avant toute chose, je tiens à préciser que je suis une petite novice au niveau de la personnalisation de mon forum. Certes j'ai lu les rubriques sur les templates, le CSS etc... mais n'ai pas encore appris à les manipuler. Donc ne vous étonnez pas si je vous demande des petites précisions par la suite, ou si je donne l'impression de ne rien comprendre du tout... ce sera peut être le cas >///>


J'ai repéré sur un forum un moyen très intéressant de mettre la description d'un lieu sans pour autant la mettre sous ou sur l'image d'illustration :

Sur cette image, il n'y a aucune descriptions de marquées, les images sont toutes belles, non cachées par des écritures. Mais dans ce cas, comment savoir à quoi correspond tout ces forums ?




Et bien il suffit en fait de passer sa souris sur le nom du lieux, et une petite bulle apparait avec tout ce que nous avons besoin de savoir !

C'est ce système là qui m'intéresse, sauf que je n'ai aucune idée de comment on fait, ou si cela a un nom, si je dois tripoter les CSS etc... car je l'ai trouvé par hasard. Mais je ne demande qu'à apprendre !
De ce fait, s'il y a certaines rubriques que je dois apprendre pour y parvenir, n'hésitez pas à me les dire : je ne veux pas avoir tout tout chaud direct dans le bec ! J'ai envie de comprendre ce que je fais ! (message subliminal : me donner une liste de codes à retranscrire directement ne m'aidera pas beaucoup, malheureusement ><) Surtout que je me doute que c'est en fait une application de plusieurs rubriques...

J'ai l'impression qu'il y a tellement de choses intéressantes et importantes à savoir sur ce forum d'aide que je m'y perds un peu !

Pour information, je suis sur phpBB3, mais j'ai comme l'impression que je vais devoir changer ^^"

Merci à tous ceux qui me répondrons, et bonnes fêtes de fin d'année !

[zz10]

Bonjour,

Exemple : http://zz10.forumactif.com/ (voir sur le premier forum "Astuces de zz10")

1- Mettez dans description (PA->général->catégories et forum) du forum ce code HTML :

Code:

<div class="desc_forum">La description du forum ici !</div>

2- Mettez ce code CSS dans PA->affichage->couleurs->css

Code:

dl.icon .desc_forum{
visibility:hidden;
background-color:#fff;
border:3px solid #000;
padding:5px;
}

dl.icon:hover .desc_forum{
visibility:visible;
}

cdt

[Azylis]

Oh merci ! Je pensais que se serait bien plus compliqué que ça !
En plus j'ai compris comment faire varier la couleur du fond, la taille du cadre, l'épaisseur des rebords et leur couleur.

Mais voilà, je trouve le rendu un peu trop "formel" :



Par exemple, j'aimerais que :
- les coins soient arrondis
- changer la couleur de l'écriture sans changer celle du forum tout entier
- changer la taille de l'écriture
- la mettre en gras
- faire en sorte que la "bulle" apparaisse non pas sous l'image (comme ici) mais sous le nom du lieu (comme sur les images de mon premier post).

Désolée si ça fait un peu exigeant tout ça : je ne sais même pas si c'est possible... >< Mais je suppose qu'il faut toucher au CSS ?

En tout cas, merci zz10 pour m'avoir appris la base de cette technique ! Manque plus que j'apprenne comment la personnaliser !

[zz10]

Code:

dl.icon .desc_forum{
position:absolute;
visibility:hidden;
background-color:#fff;
border:3px solid #000;
padding:5px;
color:#DDDDDD;
font-size:1.3em;
font-weight:bold;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
 
dl.icon:hover .desc_forum{
visibility:visible;
}

Les arrondis (ne fonctionnent pas sur IE inférieur à 9 ) :

Code:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

Couleur du texte :

Code:

color:#DDDDDD;

Taille du texte :

Code:

font-size:1.3em;

Texte en gras :

Code:

font-weight:bold;

cdt

[Azylis]

Et bien... je n'aurais pas pu espérer mieux !

Non seulement vous me donnez le code entier, mais en plus vous me le détaillez pour que je comprenne "quoi modifie quoi" ! Un énorme merci !

Néanmoins, je vais vous embêter une dernière fois (désolée!). En fait j'aimerais que la description n'apparaisse que lorsque la souris survole le nom du lieu (et uniquement le nom du lieu).
Ne voulant pas vous embêter davantage, j'ai essayé de chercher toute seule et donc de me creuser la tête. J'en suis arrivée aux conclusions suivantes :
+ C'est cette partie là que je devrais modifier :
"dl.icon:hover .desc_forum" et peut être même "dl.icon .desc_forum"
+ C'est le "hover" qui permet de faire en sorte que l'action ne se déroule qu'au passage de la souris
+ ".desc_forum" correspond à ma description du lieux.
+ "dl.icon" correspond à la catégorie toute entière (de l'image indiquant les nouveau messages à la case où il y a le nombre de messages). C'est parce que ce code est là que l'action se déroule dès que le curseur entre dans cette zone, et non pas juste sur le titre.


Or, en faisant des recherches, j'ai découvert que :
¤ le code correspondant à un lien c'est "A"
¤ qu'il y avait des balises mères et des balises filles. Mon lien (ici "plaine" qu'on ne voit pas bien sur l'image de mon précédent post) étant inclus dans la catégorie, j'en ai déduit que c'était la balise fille et que "dl.icon" était la balise mère
¤ pour qu'une règle s'applique qu'à la balise fille et non à la mère, il fallait utiliser le signe ">"


J'ai donc fait plusieurs tests, changeant la position de "A" (avant ou après "dl.icon"), avec ou sans ">", mettre ":hover" après "A" et non après "dl.icon" etc... mais rien de tout ça n'a marché. Je suppose qu'il y a quelque chose que je n'ai pas comprit, ou même pas vu du tout. En tout cas, au final, je me suis plus emmêlée les pinceaux qu'autre chose !

Je me tourne donc encore vers vous, désolée ><

[zz10]

Re,

Pour le coup c'est un poil plus compliqué car le block desc_forum n'est pas un élément fils du lien "nom de lieu". Il faut donc passer par le javascript

1- Retirez ce code de votre css :

Code:

dl.icon:hover .desc_forum{
visibility:visible;
}

2- Créez un javascript dans PA->module->javascript->nouveau (code à placer sur la page d'accueil et sur les sous-forums) :

Code:

$(function(){
   $("a.forumtitle").hover(
      function () {
         $(this).parents("dl.icon").find(".desc_forum").css("visibility","visible");
      },
      function () {
         $(this).parents("dl.icon").find(".desc_forum").css("visibility","hidden");
      }
   );
});

cdt

[Eukaipia]

Bonjour,

J'ai rein compriiiiiiiiiiiiiiiiiiis !! Vraiment, je n'y arrive pas... Dans mon forum, ça n'active rien du tout, ce code... Pourtant, j'ai tout bien mis...
On pourrait m'aider, svp ??

Merci d'avance !

[zz10]

Bous êtes en BB2, le code ci-dessus est pour BB3...

[Eukaipia]

Ha...
Je vous le dis, je suis plutôt douée pour les codes pour écrire des messages, mais pour modifier des forums, on peut toujours rêver...!!!

Et donc, quelqu'un a un code pour BB2, par hasard ?? Merci d'avance ! ^^'

Et merci, zz10 d'avoir répondu !!

[zz10]

Ha...
Je vous le dis, je suis plutôt douée pour les codes pour écrire des messages, mais pour modifier des forums, on peut toujours rêver...!!!

Et donc, quelqu'un a un code pour BB2, par hasard ?? Merci d'avance ! ^^'

Et merci, zz10 d'avoir répondu !!

Je regarderai cette aprem

[Eukaipia]

Oh merci beaucoup !!
C'est super sympa, vraiment merci ! Je reviendrait cet aprèm aussi !! Merci !! ^^

[zz10]

Oh merci beaucoup !!
C'est super sympa, vraiment merci ! Je reviendrait cet aprèm aussi !! Merci !! ^^

Votre css :

Code:

td .desc_forum{
position:absolute;
visibility:hidden;
background-color:#fff;
border:3px solid #000;
padding:5px;
color:#DDDDDD;
font-size:1.3em;
font-weight:bold;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

votre code javascript :

Code:

$(function(){
  $("a.forumlink").hover(
     function () {
       $(this).parents("td").find(".desc_forum").css("visibility","visible");
     },
     function () {
       $(this).parents("td").find(".desc_forum").css("visibility","hidden");
     }
  );
});

[Azylis]

Ah ! Je vois que je n'étais pas la seule à avoir ce petit soucis XD
Et ben, si il fallait toucher au java-script en plus, je n'étais pas prête d'y arriver toute seule... Oo

Et bien de mon coté, ça marche PAR-FAI-TE-MENT ! J'ai exactement le
résultat que je voulais, c'est génial ! Je ne l'ai appliqué pour
l'instant que sur une partie de mon forum mais je devrais pourvoir gérer seule le reste.


Merci beaucoup, énormément même, zz10 !

Par contre vu que quelqu'un d'autre se renseigne ici, je ne sais pas si je peux le mettre en "résolu"...

[Eukaipia]

Ooooooooh merciiiiiiiii !!
Super, merci énormément !!

CA MARCHE !! xD Je suis folle et pas douée... :/

Merci énormément, je n'y serais jamais arrivée seule (comme Azylis !! ).

Merci encore !

P.S.: merci Azylis d'avoir pensé à moi !! Tu epux mettre en résolu, maintenant !! ^^

[Azylis]

Ok !

Re-merci zz10 pour ton aide, et bonnes fêtes de fin d'année !