[Question] [Template] Modifier la mise en page des descriptions

Toutes les questions concernant ce tutos se poseront ici.

Date d'inscription: 17/02/2011

J'ai tout bien fait comme il faut mais est-ce normal que mon texte concernant les stats se trouve sur la ligne >w<

Sinon, merci beaucoup pour le tuto, c'est très sympa Smile

Date d'inscription: 25/06/2011

On a besoin du code css et template miss pour t'aider ^^!

Date d'inscription: 17/02/2011

ah oui c'est vrai --'

Code:

/*différentes parties des catégoriesr*/
a.forumlink{
display:block;
font-size:14px; /* la taille de la police */
padding:2px; /* Pour éviter que le texte ne soit collé aux bords de la case */
text-align:center;
font-variant:small-caps; /* Les petites capitales */
color:#6e5831 !important; /* On force l'application de cette propriété grâce au !important */
border-bottom:4px double #6a3e1a;
font-weight:normal; /* Le texte non boldé */
margin-bottom:0; /* Pour qu'il n'y ait pas trop d'espace entre le titre et ce qu'il y a en dessous */
}

a.forumlink:hover{
font-variant:small-caps;
color:#6e5831 !important;
border-bottom:4px double #6a3e1a;
font-weight:bold; /* Texte en gras */
display:block;
}

div.stats_cate{ /* La div ayant pour class 'stats_cate' */
font-size:12px;
text-align:right;
border-bottom:#6a3e1a 1px solid;
border-right:#6a3e1a 3px solid;
font-style:italic; /* On met le texte en italic */
color:#6a3e1a;
padding-right:4px; /* On met un peu de remplissage pour éviter que notre bloc soit collé au bord droit de la case */
margin-bottom:4px;
margin-top:-12px; /* On évite de mettre un trop gros espace entre le titre et notre bloc de stats' */
width:220px; /* On impose une largeur pour ne pas que la bordure en bas soit sur toute la largeur de la case */
margin-left:385px; /* On place le bloc à droite en le décallant par rapport au bord gauche de la case */
}

div.description{ /* La div ayant pour class 'description' */
background-color:#efdec0; /* On lui donne une couleur de fond */
-moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
-webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et safari */
border-radius:10px; /* réglage des arrondis des coins */
border:1px solid #b79981;
width:560px;
min-height:20px; /* La hauteur minimum */
font-size:12px;
text-align:justify;
text-indent:6px; /* La première ligne du bloc sera décallée de 6px vers la droite */
padding:4px;
margin:4px;
color:#6e5831;
}

/*FIN différentes parties des catégories*/

Date d'inscription: 28/09/2010

Je viens de trouver un truc, si dans

Code:

div.stats_cate{ /* La div ayant pour class 'stats_cate' */
font-size:12px;
text-align:right;
border-bottom:#6a3e1a 1px solid;
border-right:#6a3e1a 3px solid;
font-style:italic; /* On met le texte en italic */
color:#6a3e1a;
padding-right:4px; /* On met un peu de remplissage pour éviter que notre bloc soit collé au bord droit de la case */
margin-bottom:4px;
margin-top:-12px; /* On évite de mettre un trop gros espace entre le titre et notre bloc de stats' */
width:220px; /* On impose une largeur pour ne pas que la bordure en bas soit sur toute la largeur de la case */
margin-left:385px; /* On place le bloc à droite en le décallant par rapport au bord gauche de la case */
}

Tu enlèves la ligne

Code:

margin-top:-12px; /* On évite de mettre un trop gros espace entre le titre et notre bloc de stats' */

j'ai plus le code sur la double ligne. Moi j'ai utilisé ce tuto et que j'ai mis un margin-top à 2px pour avoir un petit écart, mais après ca c'est à toi de voir

_________________

Spoiler:

Date d'inscription: 17/02/2011

Oh~~ Merci Lydie, c'est beaucoup mieux sans la ligne^^ !

Merci beaucoup ~~

Date d'inscription: 27/02/2010

Allô.

Voilà ce que ça me donne.

C'est parfait, mais j'aimerai ajouter à coté pour mes liens des forums, comment je peux faire ?

Edit :
J'ai trouvé comment mettre un autre tableau pour les sous-forums, mais comment le mettre à côté de l'autre ?

Tu peux nous donner ton template ? Smile

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 27/02/2010

Voilà.

Spoiler:

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
   <td valign="bottom">
      
      <span class="gensmall">{LAST_VISIT_DATE}<br />
      {CURRENT_TIME}<br />
      </span>
      
      <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
   </td>
   <td class="gensmall" align="right" valign="bottom">
      
      <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
      <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
      
      <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
   </td>
</tr>
</table>
<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="150"><div style="width:150px;">{L_LASTPOST}</div></th>

</tr>


<tr>
   
   <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <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>


<tr>
   
   <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
   
   <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>

</span>
</h{catrow.forumrow.LEVEL}>
<div class="stats_cate">{catrow.forumrow.TOPICS} sujets contenant {catrow.forumrow.POSTS} messages</div>
<div class="description">{catrow.forumrow.FORUM_DESC}</div>
<div class="description2">{catrow.forumrow.LINKS}</div>

<span class="gensmall">

{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}

{catrow.forumrow.L_LINKS}

</span>
</td>

   <td class="row3 over" align="center" valign="middle" height="50">
      <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
   </td>

</tr>


<tr>
   
   <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>


</table><img src="{SPACER}" alt="" height="5" width="1" />

Coucou

Alors, en fait, la partie

image // descriptions // dernier message

est fait sous forme de tableau. Un tableau à 3 colonnes.

Toi, dans la dernière colonne (celle de droite) tu ne veux pas dernier message mais les sous forums.

On va donc remplacer ça

Code:

<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td>

par ça

Code:

<td class="row3 over" align="center" valign="middle" height="50">
<div class="description2">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
</td>

_________________

SoP Story :: 2ème votes éliminatoires