sous forum en infobulle

[LADYQUEEN]

Bonjours , j'ai une petite question a vous poser .
J'aimerais savoir si c'est possible de mettre les sous forums en infobulle ?
Sur ce forum : http://www.vulnera-samento.com/forum quand on passe la souris sur la moulinette a gauche des description , une infobulle s'ouvre . j'aimerais avoir ça pour mes sous forums , est-ce possible ?

Merci d'avance de m'avoir lu .

[LADYQUEEN]

up ! ^-^

[kheino]

Salut LADYQUEEN,

Ah voilà un joli défi !

Peux-tu donner le template index_box (que tu as certainement modifié) ?
Et seulement le CSS qui y correspond ?

[LADYQUEEN]

Bonjour ,Merci de m'avoir répondu
Ma template index_box:

Spoiler:

mon CSS :

Spoiler:

[kheino]

B'soir,

C'est le boxon entre ton CSS et l'index_box !
Par exemple il y a un class="left" dans le CSS avec la même image que dans la description du template, mais pas de ce "class" dans le template...

Comme ce tuto est quelque peu compliqué, deux options :
- Soit je le fais avec mon template et mon CSS de base.
- Soit je le fais avec les tiens au moins rangés et épurés afin que je m'y retouve.

Alors ?

[kheino]

Etant très étourdie, j'ai (enfin) constaté qu'il ne s'agissait pas de sous-forum dans l'infobulle, mais de légende "nombre de sujet et message"...
En outre, c'est bien différent.
Toi tu le voudrais pour les sous-forums, ou alors pareil que ton exemple ?


PS : Je fais le tuto sur mon template et mon CSS.

[LADYQUEEN]

Bonjours FINAL-BLONDE .
Oui ce tuto a l'air très compliqué .
Ben je préférer que tu fasse le tuto avec mon CSS et ma template car ta pas le même css et template que moi .
Oui je voudrais pour les sous-forums (: s'il te plait .
Merci de ton aide .

[kheino]

Comme je te l'ai dit, ton template et ton CSS sont trop "à ranger" dans un premier temps pour s'y retrouver, or ce temps, je ne l'ai pas.
Tu as deux fois les mêmes images en fond pour le même identifiant, le texte de la description de forum dépasse de certains fond de forum, et des balises sont en rouge dans le template (c'est signe de mauvaise structure surtout dans ce template-ci)...

Par contre, j'ai fini avec le tuto et dans le doute, t'ai mis les deux, les titres de sous-forum et la légende.
Pas pour t'ennuyer, mais parce que la semaine prochaine et sur-prochaine, je serai à nouveau overloadée de cours.
De plus, c'est un template assez simple. Tu verras, tu trouveras assez vite de quoi il s'agit et d'où ça vient.

Avant tout, sauvegarde ton template ainsi que le CSS qui s'y réfère, dans le Bloc-notes ou Notepad (bien que tu l'aies aussi ici du coup).

Dans le template, repère la partie attribuée au "folder" (images du forum), qui chez toi est justement assez euh, "compliqué", c'est pourquoi je te donne la version par défaut adaptée au tuto:

Code:

<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
<table><tr><td align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td></tr>
<tr><td align="center" valign="middle">
<div class="bulle3" align="left"><img src="http://2img.net/i/fa/punbb/status_unread.png" alt="sub-forum" />
<div class="inbulle3 gensmall"><strong>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</strong><br /><br />
Nos Rigolos ont atteint un pic fièvreux de <strong>{catrow.forumrow.TOPICS}</strong> délires partagés et <strong>{catrow.forumrow.POSTS}</strong> de fou-rires bruyants.
</div>
</div>
</td></tr></table>
</td>

Vois déjà ce que ça donne (avec le CSS).

De ce bloc, tu peux quasiment tout enlever, sauf le corps de l'infobulle et la variable des sous-forums:

Code:

<div class="bulle3" align="left"><img src="http://2img.net/i/fa/punbb/status_unread.png" alt="sub-forum"/>
<div class="inbulle3 gensmall"><strong>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</strong><br /><br />
</div>
</div>

Dans le CSS, c'est aussi assez simple dès le moment où l'on a la super propriété du CSS3 "transition":

Spoiler:

Bien sûr que les paramètres d'apparence ne sont qu'à titre d'exemple, ainsi que le l'image.


Si tu as des questions dans la mise en place, de ce tuto, n'hésite pas et donne alors juste le bloc ou le tableau concerné du template et juste ce CSS si tu le modifies.
Néanmoins, installe déjà bien le tout avant de modifier le CSS.

[LADYQUEEN]

J'ose pas rangé ma template car j'y connait pas grand chose , je suis pas douée . J'ai pas envie de bousiller ma template .
J'ai repérer la partie "folder" du template : et j'ai mit ton code a la place "ligne "32à 39" " avec le css dans ma feuille de style . Et ça a enlever mon image du dernier messages .
Je sais pas ou mettre ton code .

[kheino]

Je comprends que tu ne t'y retrouves pas, parce que c'est vraiment le boxon.
Tu as des sauts de ligne en plein code, espace avec le point-virgule du style CSS, des "br" en tous genres, pas de séparation entre les blocs "structure", bref, c'est à toi de gérer au plus "propre" afin d'avoir au final un rendement "propre".

Je ne suis pas sûre, parce que je ne peux pas, modifier mon template de suite, étant sur un autre tuto, mais essaie avec ce template que je n'ai modifié que sur la partie des sous-forums chez toi:

Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"><tr>
<td valign="bottom">

<!-- BEGIN switch_user_logged_in -->
<!-- END switch_user_logged_in -->

<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>

<td class="gensmall" align="right" valign="bottom"></td>
</tr></table>

<!-- BEGIN catrow -->

<!-- BEGIN tablehead -->
<div class="table_head"><div class="secondarytitle">{catrow.tablehead.L_FORUM}</div></div>
<table class="forumline" width="78%" border="0" cellspacing="0" cellpadding="0">
<!-- END tablehead -->

<!-- BEGIN cathead -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->

<td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="80%">
<h{catrow.cathead.LEVEL} class="hierarchy"> <span class="cattitle">
<a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a> </span>
</h{catrow.cathead.LEVEL}>
</td>

<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"></td>
</tr>
<!-- END cathead -->

<!-- BEGIN forumrow -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
<!-- END inc -->
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="80%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink"> <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></span>
</h{catrow.forumrow.LEVEL}>
<span class="genmed">
<div style="background-image:url(http://files.getwebb.org/files/bf/31/f4/85f98aed0ef659848cfc1540b5b0003a95/source.png; width: 307px; height: 108px;">{catrow.forumrow.FORUM_DESC}</div>
</span>

<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->

<div class="bulle3" align="left"><img src="http://2img.net/i/fa/punbb/status_unread.png" alt="sub-forum"/>
<div class="inbulle3 gensmall"><strong>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</strong><br /><br />
</div></div>
</span>
</td>

<td class="row3 over" align="center" valign="middle" height="125" width="180%">
<div class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle"><div class="alignimg">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div></div><br />

<div class="lastposte"><span class="gensmall"><div class="texte">{catrow.forumrow.LAST_POST}</div></span></div><br />

<div class="color"><span class="gensmall"><b>{catrow.forumrow.TOPICS}</b> sujets <b>&</b> <b>{catrow.forumrow.POSTS}</b> messages</span><br /></div>
</td>
</tr>
<!-- END forumrow -->

<!-- BEGIN catfoot -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->

<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="
" height="1" width="1" /></td>
</tr>
<!-- END catfoot -->

<!-- BEGIN tablefoot -->
</table>
<img src="http://files.getwebb.org/files/0f/41/f2/00cfa84673ad65434575eb00800923c0f2/source.png" alt="" height="150" width="625" />
<!-- END tablefoot -->

<!-- END catrow -->

[LADYQUEEN]

J'ai mis ton template , ça me fait ça . va voir directement sur le forum .

[kheino]

Oui et... ???
A toi de personnaliser tout ça au mieux, je n'ai fait que te donner un exemple, et surtout le moyen de faire fonctionner l'infobulle.

Le seul souci que je constate, c'est que l'infobulle s'ouvre trop loin.
Pour y remédier, il suffit de réduire le
left: 34px; de l'infobulle ouverte:[quote].
Toutefois, cela dépend de la taille de l'image que tu utiliseras.

[LADYQUEEN]

merci beaucoup FINAL-BLONDE pour ton aide .

[kheino]

Je t'en prie.

Je t'ai mis de joulis effets du CSS3, mais encore, ce n'est que pour te montrer les possibilités.

A propos de ton template, tu devrais vraiment le corriger car je vois du texte qui dépasse d'un forum.
A titre d'indication, il faut éviter que des "span" contiennent des blocs comme "div", "p", "tabkle", "td", etc. Le "span" est une balise dite "inline".


Bonne continuation.

[LADYQUEEN]

Oui je vais essayer de le corriger .
J'ai une question vite fait a te poser ,
OU je change la taille de mes catégories ?

[kheino]

Je suppose que c'est ici :

.fondcat { background-image:url('http://files.getwebb.org/files/bf/31/f4/85f98aed0ef659848cfc1540b5b0003a95/source.png');
width: /*largeur de ton image*/ 350px; /*largeur de ton image*/
height: /*hauteur de ton image*/ 128px; /*hauteur de ton image*/
background-repeat: no-repeat; }

Les /*commentaires CSS*/ se mettent après le code.

Qui t'a codé tout ça ?

[LADYQUEEN]

C'est pas ici , j'ai changer pourtant la taille en pour-cent dans la configuration de mon forum .
Je trouve mes code sur des forum d'aide ou de graphisme .

[kheino]

Je trouve mes code sur des forum d'aide ou de graphisme .

LoL !


Non ce n'est pas dans la largeur générale du forum.

As-tu essayé dans ton template, ici :

Code:

<table class="forumline" width="78%" border="0" cellspacing="0" cellpadding="0">

[LADYQUEEN]

oui j'ai essayer et ça a rien changer .

[kheino]

Bonjour et merci pour le zentil "merci" ! (-:

As-tu mis la largeur du forum dans le CSS avec l'identifiant "bodylinewidth" ?
Quoique je ne pense pas que ce soit ça...

Que veux-tu faire exactement ? élargir la description des forums ?.
Auquel cas c'est l'image de fond qui fait office de dimensions et cette cellule :

Code:

<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="80%" height="50">

[LADYQUEEN]

bonjour , de rien (:
oui j'ai changée la largeur du forum avec le bodylinewidth et ça change rien .J'aimerais changer la taille des catégories du forum : ex ::

là mes catégorie sont de la taille 625 de largeur , j'aimerais les mettre a 485 de largeur .

[kheino]

Ah ok, mais si je ne m'abuse tu as des images en fond de catégorie ?
Essaie déjà de changer la largeur de ces images.

Si ce n'est pas ça, il faudra que tu donnes les liens des images, et le bodylinewidth...

[LADYQUEEN]

Oi j'ai des images en fond de categories , j'ai changer , regarde la premiere categorie "regles & co" .
J'ai changer dans ma template index_box :les nombre souligné et ça change rien du tout :

Code:

<table width="[u]100[/u]%" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr> <td valign="bottom"> <!-- BEGIN switch_user_logged_in -->
        <!-- END switch_user_logged_in --> <div class="nav"><a class="nav" href="{U_INDEX}">
        {L_INDEX}</a>{NAV_CAT_DESC}</div> </td> <td class="gensmall" align="right" valign="bottom">
        </td> </tr> </table><!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="table_head"><div class="secondarytitle"> {catrow.tablehead.L_FORUM}
      </div></div>
    <table class="forumline" width="[u]80[/u]%" border="0" cellspacing="0" cellpadding="0">
    <!-- END tablehead -->
    <!-- BEGIN cathead -->

et dans mon css j'ai changée ce nombre et ça a rien changer non plus :

Code:

/*Header de fond*/
body {
background-repeat: repeat;
background-attachment: scroll;
background-position: top left;
}

/*HEADER CODER A GAUCHE DU FORUM*/
.bodylinewidth
{  margin-left : 800px;margin-top : -1200px;
float:none;}
#pageheader { position : absolute; }

.bodylinewidth {
    width: [u]535[/u]px;
}


[kheino]

Quand je prends le temps de bien ranger ton template afin que l'on s'y retrouve mieux, j'apprécie moyennement que tu me redonnes le tout en berdol...
Je te propose de laisser le template comme fourni plus haut (avec tes modifications-images), encore une fois, sans avoir touché aux réglages, bien rangé uniquement (même pas vraiment corrigé), ceci jusqu'au "résolu" du sujet, ensuite tu peux tout remettre dans n'importe quel ordre si c'est ainsi que tu t'y retrouves (mais apparemment pas trop non plus).

En vérifiant et en mettant ton CSS source chez moi, je vois que la largeur du forum s'adapte au QEEL.
Aussi faut-il adapter la largeur du tableau-QEEL à celui de tes catégories. Comme se sont exactement deux templates qui se suivent dans la structure du forum, il faut les adapter séparément si tu modifies une des largeur (le tableau à 78%) indépendamment les catégories du bodylinewidth...

De surcroit, il y a une énormité dans cette cellule (que je n'ai pas vue parce qu'il fallait d'abord dépatouiller la jungle qu'est ton template):

<td class="row3 over" align="center" valign="middle" height="125" width="180%">

Toutefois, le souci de la largeur vient bel et bien du QEEL, donc du templateiindex_body.

[LADYQUEEN]

je sais c'est le bordel , je m'y retrouve pas . Je m'y connait pas en code dans les templates donc je préférE pas toucher et enlever des choses .
Je n'ai pas de qeel , je l'ai enlever .
j'ai changer le nombre "180" par un autre , rien bouge .
Merci de ton aide . PROBLÈME RÉSOLUT .