[Terminé] Catégories en onglet

Lien du forum  : Clic

Codes et tutoriels cités :
Astuce Template par T_Time : Clic
Catégories onglets par Onyx : Clic

Schéma : Clic

Bonjour !

P'tit up ! :)

Nouveau UP ! :)

Up ! S'il vous plaiiiiit. x)

Bonjour !

J'ai toujours besoin d'aide pour cette personnalisation, merci !

Coucou Anselm :)

Je pense qu'une bonne première étape pourrait être d'installer sur ton forum le libre service d'Onyx ainsi que nous copier / coller ton template index_box après.
Ensuite on pourra voir ensemble comment rajouter l'élément supplémentaire !

Bonsoir !

Ok, j'ai fais ça. Mon Index_box est donc le suivant. :)

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall">{LAST_VISIT_DATE}<br />
 {CURRENT_TIME}<br />
 </span>
 <!-- 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">
 <!-- BEGIN switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
 <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
 <!-- END switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 </td>
 </tr>
</table>

<center><div id="cate_tout"><div id="conteneur_onglets">
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
 <td class="ongleto" ><div>Base de donnée</div></td>
 <td class="ongleto"><div>Construct</div></td>
 <td class="ongleto"><div>RPG Maker</div></td>
 <td class="ongleto"><div>UNITY</div></td>
 <td class="ongleto"><div>VOS JEUX</div></td>
 <td class="ongleto"><div>HÉBERGÉS</div></td>
<td class="ongleto"><div>COMMUNAUTÉ</div></td>
 <td class="ongleto" style="border-right: none;"><div>ZONE STAFF</div></td>
</tr></table>
</div>
<div id="conteneur_categories">
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="categorie"><table width="100%" border="0" cellspacing="0" cellpadding="0">
 <!-- END tablehead -->
 <!-- BEGIN cathead -->
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 <tr><td><table class="forum_bloc" width="100%" cellspacing="0" cellpadding="0"><tr>
 <td rowspan="2" class="forum_img_new" 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>
 <td class="forum_forumlink" valign="top">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                </td>
 <td rowspan="2" class="forum_desc" align="center" valign="middle">
 {catrow.forumrow.FORUM_DESC}
 </td></tr><tr>
 <td class="forum_sous" valign="bottom">
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 </td>
 </tr></table></td></tr>
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
</table></div>
<!-- END tablefoot --><!-- END catrow -->
  </div></div></center>

Merci de ta réponse !

Hello ♥

J'ai fait un petit truc rapidement vu que personne ne répondait >.<. Je n'ai pas mis d'explications donc tu en veux surtout n'hésite pas :)

Etape 1, on va faire en sorte que la description s'affiche tout le temps.

Dans le CSS on cherche ceci :

Code:

.desc_desc {
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -webkit-transition: all .5s;
    background-color: #2e3133;
    color: #D8DBE6;
    font-family: Times new roman;
    font-size: 13px;
    font-style: italic;
    height: 71px;
    overflow: auto;
    padding: 3px 0;
    position: absolute;
    right: 200px;
    text-align: justify;
    top: 0;
    transition: all .5s;
    width: 0;
    z-index: 1
}

.desc_infobulle:hover .desc_desc {
    height: 69px;
    padding: 3px;
    width: 400px
}

Et on le remplace par ceci :

Code:

.desc_desc {
    -webkit-transition: all .5s;
    background-color: #2e3133;
    color: #D8DBE6;
    font-family: Times new roman;
    font-size: 13px;
    font-style: italic;
    height: 69px;
    overflow: auto;
    padding: 3px;
    position: absolute;
    right: 200px;
    text-align: justify;
    top: 0;
    width: 400px;
    z-index: 1
}

Ensuite on passe à l'affiche au survol. Pour l'instant j'ai écrit "Statistiques", mais il suffira de remplacer par les bonnes variables dans le template index_box.

Dans le template on cherche :

Code:

<td rowspan="2" class="forum_desc" align="center" valign="middle">
{catrow.forumrow.FORUM_DESC}
</td>

On remplace par ceci :

Code:

<td rowspan="2" class="forum_desc" align="center" valign="middle">
<div class="forum_stat">Statistiques</div>
{catrow.forumrow.FORUM_DESC}
</td>

Comme d'hab, validation puis publication du template :p

Dans le CSS on ajoute ceci :

Code:

.forum_desc {
    position: relative;
}

.forum_stat {
    /* on positionne */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    
    background-color: rgba(255,255,255,0.6);
    padding-top: 20px;
    
    /* on cache*/
    opacity: 0;
    transition: all 400ms;
}

.forum_stat:hover {
    opacity: 1;
}

Normalement ça devrait te permettre de faire apparaitre "Statistique" au survol.


Si tout va bien, on passe à la suite pour ajouter les infos que tu veux au bon endroit :)

Bonjour !

Déjà, merci pour ton aide ! :)

Alors, j'ai tout mis (même si sur mon forum ça fait un truc bizarre au niveau des images tout ça). Remarque, c'est peut-être normal encore à ce stade je pense. ^^

Aussi j'suis pas contre une petite explication ! Si j'ai bien compris, tu as rajouté une class dans le template qui te permet de mettre un texte "sous" le hover. Pour que ça fonctionne, tu l'as mis dans la partie du code du template qui correspond à la description pour que ça s'y rattache ?

Bonsoir !

Petit Up pour savoir si tu as eus un petit peu de temps. :)

Bon week-end !

Hello ♥

Je passe en coup de vent juste pour régler le problème d'alignement des images >o<.

Il faut rajouter au CSS de .forum_desc une largeur width: 200px;

En effet .forum_desc est une cellule de tableau (balise td) du coup ça largeur changeait en fonction du contenu, j'avais zappé ><

Pour la suite je peux pas répondre tout de suite mais n'importe qui prendre la suite bien entendu :p

Il faut remplacer le Statistiques dans le code par les variables (^-^)

En voici quelques unes :

Code:

{catrow.forumrow.TOPICS}
{catrow.forumrow.POSTS}
{catrow.forumrow.LAST_POST}


Merci effectivement, c'mieux aligné là ! :)

Bonjour,

Je me permet de Upper ! Il me manque juste le nombre de messages et sujets ! Après, j'arrêtes de vous embêter avec ça ! :) Merci à vous et à bientôt.

Hello ♥

T'inquiète tu ne nous embêtes pas :p
J'avais juste un graand coup de flemme

Si on veut ajouter nos informations, on va les placer avec un position: absolute.

On prend cette partie là du CSS :

Code:

<td class="forum_forumlink" valign="top">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                </td>

Et on ajoute nos infos :)

Code:

 <td class="forum_forumlink" valign="top">
    <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
    <span class="forum-messages">Topics : {catrow.forumrow.TOPICS} - Posts : {catrow.forumrow.POSTS}</span>
</td>

On valide et on publie, et dans le CSS on met ceci :

Code:

/* pour pouvoir positionner ce qu il y a à l intérieur en fonction de cet endroit */
.forum_forumlink {
    position: relative;
}

.forum-messages {
    position: absolute;
    right: 10px;
    top: 10px;
}

Hésite pas à adapter le nom de classes (dans le html et le CSS) pour mettre des noms plus parlant si tu veux :)

Ahahaha ! J'comprends !

Merci c'est juste nickel ! :) On peut déplacer le topic maintenant. Merci encore Nihil pour ton aide !