Nouvelle disposition pour mes catégories et forum.

[Luluwebmaster]

Bonjour a tous !

Voila je voudrais réaliser un schema comme ceci pour les catégorie et forum :



Je pense que cela est faisable dans les templates, mais je ne connais pas le code a mettre et ou le mettre

Merci d'avance.

cordialement

[Luluwebmaster]

Up !

[Anzu]

Bonjour,

Il faut effectivement passer par les templates. Affichage > Templates > Général > Index box
Il y a déjà pas mal de sujets qui traitent de la modification de l'affichage des catégories. Commencez par faire des recherches et essayez par vous même, on ne donnera pas de code tout prêt.

Cordialement.

[Luluwebmaster]

Bonjour, déjà fais beaucoup de recherches ....
Se serais sympa de m'en faire un s'il vous plait

[Anzu]

Comme dit plus haut, on ne vous donnera pas de code tout prêt à installer ..
Surtout que vous ne cherchez même pas à apprendre ou à comprendre. Je veux bien vous aider à obtenir cette affichage, en vous expliquant étape par étape, mais il faut y mettre de la bonne volonté

Pour commencer, savez vous faire un tableau ?

Cordialement.

[Luluwebmaster]

je ne sais pas vraiment faire non ....

je ne suis pas un pro ... :s

[Anzu]

Il n'y a pas besoin d'être un "pro" pour savoir faire des tableaux

Pour faire simple:

• Un tableau est formé par des "lignes" & des "cases"
• Les balises

Code:

<table> </table>

"encadrent" toujours le tableau.
• Juste après la balise

Code:

<table>

, il y aura la balise

Code:

<tr>

(ligne), suivie par la balise

Code:

<td>

(case)

• Le contenu (texte, image, etc), se trouvera entre les balises

Code:

<td>

• Les balises doivent toujours se fermer.
Ex:

Code:

<table><tr><td>Bonjour</td></tr></table>

Exemple 1

Contenu A

Contenu B

=> Ce tableau, très simple, contient une ligne et deux cases(ou "colonnes" si cela vous parle +).
Le code aura donc cette forme:

Code:

<table><tr><td></td><td></td></tr></table>

Exemple 2

Contenu 1	Contenu 2
	Contenu 3

=> Ce tableau contient deux lignes et deux cases.
Le code aura donc cette forme:

Code:

<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>

En rajoutant du contenu:

Exemple

Code:

<table><tr><td>Contenu A</td><td>Contenu B</td></tr><tr><td>Contenu C</td><td>Contenu D</td></tr></table>

Résultat:

Contenu A	Contenu B
Contenu C	Contenu D

Est-ce que vous suivez ?

[hevan]

Je viens m'initié dans ce post et je dis bravo Anzu me voilà vraiment moins bête, je vais tester le bazzar comme on dit
Et c'est très clair

[Anzu]

Hevan: Aucun souci

Dernier petit élément qui vous permettra d'arriver à la structure souhaitée.

- Colspan => Pour "fusionner" des cases/colonnes
- Rowspan => Pour "fusionner" des lignes.

• Colspan ou Rowspan, ce bout de code se trouvera toujours dans votre td et le code ressemblera à ceci:

Code:

<table><tr><td colspan="2">Contenu A</td></tr><tr><td>Contenu B</td><td>Contenu C</td></tr></table>

=> toujours sous cette forme: td colspan="Un chiffre" ou td rowspan="un chiffre" (le chiffre indique le nombre de cases qui vont "fusionner".

En image, pour mieux comprendre =>

Contenu A
Contenu B	Contenu C

Code:

<table><tr><td colspan="2">Contenu A</td></tr><tr><td>Contenu B</td><td>Contenu C</td></tr></table>

ou encore:

Contenu A	Contenu B
	Contenu C

Code:

<table><tr><td rowspan="2">Contenu A</td><td>Contenu B</td></tr><tr><td>centerContenu C</td></tr></table>

Maintenant que vous connaissez les bases, vous allez pouvoir établir la structure du schéma donné dans votre premier message qui est: https://servimg.com/view/17458266/192


Essayez de "visualiser" votre schéma sous forme de "tableau" en imaginant des lignes & des cases/colonnes.
Vous devriez y arriver

[Luluwebmaster]

Bonjour, ok
mais après je dois placer le code ou exactement ?
J'ai fais ça :

Code:



<style>
.contenuetableaucategorie
{
-webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px

box-shadow:0px 0px 50px #44c930;
  -moz-box-shadow: 0px 0px 50px #44c930;
-webkit-box-shadow: 0px 0px 50px #44c930;
width: 90%;
margin: auto;
background-color: #CCC;
padding: 4px;
color: #300;
font-size: 14px;
text-align: justify;
border-top-style: groove;
border-top-color: #CF3;
border-right-color: #CF3;
border-bottom-color: #CF3;
border-left-color: #CF3;
border-right-style: groove;
border-bottom-style: groove;
border-left-style: groove;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
}
</style>


<div class="contenuetableaucategorie">
<table><tr><td colspan="2">Contenu 1</td></tr><tr><td colspan="2">Contenu 2</td></tr><tr><td>Contenu 3</td><td>Contenu 4</td><td>Contenu 5</td></tr><tr><td colspan="2">Contenu 6</td></tr></table>
</div>


[Anzu]

C'est presque parfait
Il faut mettre un colspan de 3 et non de deux. Puisque sur la troisième ligne, il y a trois éléments.

Ensuite pour l'habillage, on le mettra directement dans la feuille css. Inutile d'encombrer le code qui se trouvera dans le template et ce n'est pas tout à fait correct.

On en vient à la partie la plus "difficile". La modification se situe dans le template index box. Affichage > Templates > Général > Index box

A partir de là, il faut adapter son code à celui déjà existant et en déplaçant les variables qui nous intéressent.

Un petit aperçu du résultat sur mon forum test:
Du coup, j'ai laissé l'image pour le no new/new/lock ne sachant pas où la mettre.

Sur votre schéma: https://servimg.com/view/17458266/192
A quoi correspond ceci: "l'image qui dit que le sujet est ouvert ou non ?"

Voulez vous afficher les modérateurs ? Les sous forums ?

[Luluwebmaster]

"l'image qui dit que le sujet est ouvert ou non ?", c'est l'image qui sert a voir que c'est un sujet

Edit:
je voudrais aussi qu'il y ai des bord vert comme sur le schema

[Anzu]

Voulez vous afficher les modérateurs ? Les sous forums ?

[Luluwebmaster]

Afficher exactement se qu'il y as sur le schema, donc non

J'ai éditer l'autre message

[Anzu]

J'ai vu j'ai vu

Il faudrait dans ce cas me donner le code couleur exact =>

[Luluwebmaster]

Ok voila :
#76f013

[Anzu]

Dites moi si c'est bon:



Il y a encore quelques bricoles à corriger. Mais juste voir si c'est ok pour la structure.

Le vert est très flashy

[Luluwebmaster]

Bonjour, c'est pas mal oui, mais il y as déjà :
il faudrait que les textes sois bien centrer, donner un anordit a chaque "cases" du tableau ex :
la partie avec les nombre de messages, de sujets et les autres comme ça
aussi, mettre un fond blanc si possible

Déjà sa, après je verrais se que ça donne déjà

[Anzu]

La couleur "rose" c'est la couleur du row1, elle se change directement dans votre PA. C'est juste un forum test là .. (je pense surtout à la santé de mes yeux, parce que du vert extraterrestre sur du blanc, merci )

Et pour les réglages, je vous ai dit que ce n'était pas fini, j'attendais juste que vous me disiez si la structure vous convenait.

Voilà dites moi si c'est mieux.

Cordialement.

[Luluwebmaster]

Oui, c'est bien !!!
mais par contre, dans votre forum test, "xxx" se sont des catégorie ?
Si oui, je préfèrerais que se soit les forum qui sois entourer de vert, et non la catégorie
Sinon, pourriez vous remplacer le vert par celui la :
#8c00ff
car c'est vrais que ça flashe beaucoup ^^

Merci

[Anzu]

Oui "xxx" c'est une catégorie.
Le border se trouve déjà autour des forums. Bref, le mieux serait de placer le code sur votre forum.

Le code couleur que vous m'avez donné au cas où ce n'est pas du vert.

Remplacez votre index box par celui ci:

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>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="5" cellpadding="0">
  <tr>
      <td colspan="2" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </td>
 
 
  </tr>
  <!-- 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="100%">
        <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 style="border-radius: 10px;" class="row1 over" colspan="3" valign="top" width="100%">
                <table width="100%"><tbody><tr><td><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}></td></tr></tbody></table></td></tr>
        <tr>
<td style="border-radius: 10px;" class="row1 over" colspan="3"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></td></tr>
         
<tr><td style="border-radius: 10px;" align="center" class="row1" width="33%" class="gensmall"><span class="genmed">{catrow.forumrow.POSTS} messages</span></td>
  <td style="border-radius: 10px;" class="row1" width="33%" align="center"><span class="genmed">{catrow.forumrow.LAST_POST}</span></td>
<td style="border-radius: 10px;" align="center" class="row1" width="33%" class="gensmall"><span class="genmed">{catrow.forumrow.TOPICS} sujets</span></td></tr>
  <tr><td style="border-radius: 10px;" colspan="3" class="row1">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
    </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="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Enregistrez et publiez.

Puis dans la css:

Code:

.forumline {
border: solid #8c00ff;
border-radius: 15px;
}

Ensuite dans l'onglet couleurs, allez dans "les contours" puis couleur du cadre des cellules. Ici, placez le code #8c00ff

Cordialement.

[Luluwebmaster]

je suis très satisfais par tout cela, mais , déjà je voudrais que le titre sois bien centrer, et pour la couleur, violette, ça ne fais pas le tour du tableau, mais le tour des widgets ...
Vous pouvez voir le résultat sur mon forum test :

http://leblokolo.lebonforum.com/forum

Edit :
serait il aussi possible de centrer le titre des catégories ?

[Anzu]

Avez vous changé la couleur dans le panneau des couleurs comme dit plus haut ?
Couleurs > Les contours > Couleur du cadre des cellules.

Pour centrer, suffit de rajouter les balises center.
Remplacez le template par:

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>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="5" cellpadding="0">
  <tr>
      <td colspan="2" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </td>
 
 
  </tr>
  <!-- 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="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}"><center>{catrow.cathead.CAT_TITLE}</center></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 style="border-radius: 10px;" class="row1 over" colspan="3" valign="top" width="100%">
                <table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
                  <span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}"><center>{catrow.forumrow.FORUM_NAME}</center></a></span>
                  </h{catrow.forumrow.LEVEL}></td></tr></tbody></table></td></tr>
        <tr>
<td style="border-radius: 10px;" class="row1 over" colspan="3"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></td></tr>
         
<tr><td style="border-radius: 10px;" align="center" class="row1" width="33%" class="gensmall"><span class="genmed">{catrow.forumrow.POSTS} messages</span></td>
  <td style="border-radius: 10px;" class="row1" width="33%" align="center"><span class="genmed">{catrow.forumrow.LAST_POST}</span></td>
<td style="border-radius: 10px;" align="center" class="row1" width="33%" class="gensmall"><span class="genmed">{catrow.forumrow.TOPICS} sujets</span></td></tr>
  <tr><td style="border-radius: 10px;" colspan="3" class="row1">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
    </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="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

[Luluwebmaster]

Bonjour,
oups désolé j’avais oublier ^^
Par contre, comme dis plus haut, serait il possible de centrer le titre des catégories et forums ?
Aussi :
je préfèrerais que se soit les forum qui sois entourer de vert, et non la catégorie ( comme dis plus haut )

[Anzu]

Comme ceci: ?

[Luluwebmaster]

Oui !!!!!!!
encore un truc :
serait il aussi possible de diminuer un peux la taille de chaque forum ?

( la largeur du tableau quoi )

[Anzu]

Et puis un steak frites tant qu'on y est ?
Vous devez régler ça sur votre forum, avec la largeur du forum.

Voilà pour le template:

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>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <td colspan="2" nowrap="nowrap" width="100%" class="secondarytitle" align="center"> {catrow.tablehead.L_FORUM} </td>
 
 
  </tr>
  <!-- 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="100%" align="center">
        <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 --></table><table class="forumline" width="100%" border="0" cellspacing="5" cellpadding="0">
  <!-- 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 style="border-radius: 10px;" class="row1 over" colspan="3" valign="top" width="100%">
                <table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
                  <span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}"><center>{catrow.forumrow.FORUM_NAME}</center></a></span>
                  </h{catrow.forumrow.LEVEL}></td></tr></tbody></table></td></tr>
        <tr>
<td style="border-radius: 10px;" class="row1 over" colspan="3"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></td></tr>
         
<tr><td style="border-radius: 10px;" align="center" class="row1" width="33%" class="gensmall"><span class="genmed">{catrow.forumrow.POSTS} messages</span></td>
  <td style="border-radius: 10px;" class="row1" width="33%" align="center"><span class="genmed">{catrow.forumrow.LAST_POST}</span></td>
<td style="border-radius: 10px;" align="center" class="row1" width="33%" class="gensmall"><span class="genmed">{catrow.forumrow.TOPICS} sujets</span></td></tr>
  <tr><td style="border-radius: 10px;" colspan="3" class="row1">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
    </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="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

[Luluwebmaster]

Non merci pour le steak frites ^^
Par contre encore :
serait il possible d'espacer chaque forum un peux plus ?
et enlever le trait violet entre le titre de la catégorie, et un forum ?

*Je sais j'en demande beaucoup *

[Anzu]

Le "trait" c'est la description du forum (je vous rappelle que c'était sur votre schéma, donc mettez du texte, vous verrez)

Et pour les séparer, il faut voir au niveau de votre hiérarchie
Affichage > Page d'accueil > Vérifiez que vous avez coché "moyen" pour "Séparer les catégories sur l'index"

Sinon rajoutez dans le forumline de votre css:

Code:

margin-bottom: 20px;

[Luluwebmaster]

Quand je disais, séparer les forum, C'est de les séparer, se qui est en vert ici :


Pour les trait, ce n’était pas eux que je parler, mais ceux que j'ai entourer en rouge