Apparence Catégorie ;D

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Apparence Catégorie ;D

Message par Bella♥ le Ven 30 Sep 2011 - 16:08

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♥-



Dernière édition par Bella♥ le Dim 2 Oct 2011 - 10:55, édité 1 fois

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence Catégorie ;D

Message par Invité le Ven 30 Sep 2011 - 16:29

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 Wink.

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 Wink .

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence Catégorie ;D

Message par Bella♥ le Ven 30 Sep 2011 - 17:24

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

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence Catégorie ;D

Message par Invité le Sam 1 Oct 2011 - 18:43

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 > edit) 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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence Catégorie ;D

Message par Bella♥ le Sam 1 Oct 2011 - 20:17

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

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence Catégorie ;D

Message par Invité le Sam 1 Oct 2011 - 23:04

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence Catégorie ;D

Message par Bella♥ le Dim 2 Oct 2011 - 8:58

Voila un shema :



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

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence Catégorie ;D

Message par Invité le Dim 2 Oct 2011 - 9:50

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence Catégorie ;D

Message par Bella♥ le Dim 2 Oct 2011 - 10:55

Merci :DD

Sujet résolue :DD

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum