Apparence Catégorie ;D

[Bella♥]

Bonjour, je me permet de me ré ouvrir ce sujet :DD

J'aimerais beaucoup avoir une apparence de catégorie ressemblante à ceci :



Merci d'avance.

Cordialement
-Bella♥-

[Invité]

Bonjour,

Je suis arrivé à un résultat assez proche. On va se servir d'une class existante et en créer 3 autres dans la feuille de style CSS:

Code:

/*derniers sujets et stats*/
.fofolastm{
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
border: 1px solid #000;
padding: 5px;
margin: 10px; }

/*barres description*/
.fofodesc{
border-left: 3px solid #000;
border-right: 3px solid #000;
padding: 5px;
margin: 10px;}

/*titre des catégories*/
.secondarytitle{
background-color: #ff0000;}

/*cadre description*/
.caddesc{
border: 1px solid #000;
padding: 5px;
margin: 10px; }

A vous de personnaliser à votre convenance .

Ensuite il faut séparer la ligne marqué "forum" en 2 cellules, supprimer les colonnes en trop, faire un tableau pour regrouper la description et le dernier message, supprimer les espaces entre les cellules.

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
   </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 class="{catrow.forumrow.INC_CLASS}" 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="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</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 -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
      <td class="row3" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
   </tr>
   <!-- END forumrow -->

devient:

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead --><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td style="width: 70%;"></td>
      <td colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="30%"><div class="secondarytitle"> {catrow.tablehead.L_FORUM} </div></td>
   </tr></table>
<table class="forumline" width="100%" 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="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>
      
   </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="{catrow.forumrow.INC_CLASS}" 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="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"><table width="100%" border="0" cellspacing="3" cellpadding="0"><tr><td>
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <div class="fofodesc"><div class="caddesc"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div></div>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
                <td width="180><div style="width:180px;" class="fofolastm">
                  <span class="gensmall">{catrow.forumrow.LAST_POST}<br />
Sujet: {catrow.forumrow.TOPICS} Messages: {catrow.forumrow.POSTS}</span></div></td></tr></table>
</td>
   </tr>
   <!-- END forumrow -->

N'hésitez pas si vous avez des questions .

Cordialement.

[Bella♥]

Merci, mais je voulais savoir, s'il était possible que j'ajoute des images au coins de la descriptions, au coins à gauche en bas.
Et que a côté de la Barre de droite il y'est les sous forum.
Est ce possible ?
Merci d'avance :DD

[Invité]

Bonjour,

Pour les changements que vous demandez, il faut modifier différemment le template.

Au lieu de:

Code:

<div class="fofodesc"><div class="caddesc"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div></div>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </span>
      </td>

On met:

Code:

<div class="fofodesc"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div><span class="gensmall"><!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links --></span>
        </td><td width="80"><span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                          </span>
      </td>

En fait le tableau comprenait 2 cellules, j'en ai ajouté une au milieu pour les sous-forums. J'ai aussi retiré la div qui permettait d'avoir un cadre autour de la description, car on va faire différemment.

Il y a 2 possibilités pour avoir un cadre avec une image dans le coin gauche en bas. La première et la plus "nette", est de fabriquer une image avec le cadre et la petite image et de placer ceci comme fond de la description. Pour chaque forum (PA > Général > catégories et forums > ) vous placez une div dans la description:

Code:

<div style="background:url('adresse de l'image fabriquée'); width:XXXpx; height:XXpx;">le texte de la description</div>

Seconde solution on "bidouille" avec les div:

Code:

<div class="caddesc">le texte de la description</div><div style="margin-left: -XXpx;margin-top: -XXpx;"><img src="adresse de la petite image" /></div>

Remplacez les XX par un nombre de pixel pour tester.

Cordialement.

[Bella♥]

La deuxième est la mieux, mais j'aimerais que ce soit coller au coin gauche en bas du cadre.

[Invité]

Bonsoir,

J'ai un peu de mal à visualiser ce que vous souhaitez, vous pourriez me faire un schéma, s'il vous plait?

Si vous avez déjà une des images que vous souhaitez mettre à cette place, vous pouvez aussi me la confier pour que je teste et m'en serve pour faire un exemple?

Cordialement.

[Bella♥]

Voila un shema :



J'aimerais qu'a la place du carré dans le coin, il y'est un image :DD

[Invité]

Bonjour,

Normalement ça fonctionne bien, il faut simplement jouer avec les "margin".
J'ai obtenu ceci:

Avec ce code dans la description:

Code:

<div class="caddesc">le texte de la description bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div><div style="margin-left: 1px;margin-top: -25px;"><img src="http://i44.servimg.com/u/f44/16/64/78/25/icone510.png" /></div>

Le "magin-top" est négatif, ce qui permet de "remonter" l'image sur le cadre. L'image que j'ai prise pour l'exemple mesure 50x50, c'est pour cela que j'ai mis -25px pour les margin.

Et ceci dans la feuille CSS:

Code:

/*cadre description*/
.caddesc{
border: 1px solid #000;
padding: 5px;
margin-left: 25px;
margin-right: 25px;}

J'ai ajouté margin-left et margin-right pour "centrer " le cadre et le décoller des barres.


Cordialement.

[Bella♥]

Merci :DD

Sujet résolue :DD