Personalisation de catégorie et forum

Messages : 128 Coda'Points : 343 Date d'inscription : 03/10/2015

Lien de votre forum : http://au-bout-du-fil.forumactif.com/
Explicitez votre problème :
Bonjour ! Alors voilà, j'essaie de bidouiller comme je le peux mon nouveau forum. J'ai une idée assez précise de ce que j'aimerai et actuellement, c'est le coin catégorie et forum qui me pose problème.
Voilà à quoi il ressemble actuellement:

Spoiler:

Et voilà à quoi je voudrai qu'il ressemble:

Spoiler:

Donc ma première question est au sujet des avatars. J'ai choisi de les afficher sur la première page du forum dans les "Derniers Messages". Comme vous pouvez le voir, l'image est imédiatement écrasée pour qu'elle forme un carré et celà déforme considérablement l'image. Je voulais donc savoir dans un premier temps s'il était possible de changer la dimension de l'image affichée ? Et si c'est le cas, actuellement, mon règlement propose d'avoir des avatars de 170x320. En partant du principer que certains membres n'auront pas ces dimensions d'avatar, est-ce que celà fonctionnera quand même sans être "trop dég'" si vous voyez ce que je veux dire ?

Et donc ma deuxième question est sur les "Sujets : 1 | Messages: 1. De base, ils sont en alignés à droite. ils sont pratiquement collé à l'avatar. Je vous mets un screen:

Spoiler:

Donc ici, aucun soucis sur l'alignement. Mais j'aimerai qu'ils soient un peu moins collé à la section "Derniers Messages" et dès que j'essai de bidouiller en margin right ou left, celà reste totalement décalé.
Code posant problème : Le code du template Index_Box. Dans celui-ci il y a donc le code "rightmargin" que j'ai essayer et qui n'ai pas convainquant.

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 style="display:none;">
<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"><div style="width:250px;"> </div></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">
<table width="100%"><tr><td><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></td><td rightmargin:"-20px"><span class="gensmall"><b>Sujets :</b> {catrow.forumrow.TOPICS} | <b>Messages :</b> {catrow.forumrow.POSTS}</span></td></tr></table><br />
</span>
</h{catrow.forumrow.LEVEL}>
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">

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

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td>
<td class="row3 over" align="center" valign="middle" height="50">
   
   <div style="width: 200px;"></div>
   <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
   

<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" />

Voilà j'espère être assez clair... N'hésitez pas à me demander si j'ai oublié quelque chose.
Et merci d'avance pour votre aide ! (:

Coucou

Pas de problème Popy', on s'occupe de tout ça !
Vu que tu es dans les "Problèmes avec tes codes", je vais t'expliquer comment faire de manière assez détaillée, plutôt que de t'envoyer le code en pleine figure :p.

On va commencer par l'avatar !
Donc, si on regarde au niveau du code, on voit que ce fameux avatar est contenu dans une balise <span> </span>
On voit aussi que ce span a pour classe lastpost-avatar.
On comprend alors que le CSS qui gère l'image est contenu dans :

Code:: .lastpost-avatar img{ /** Ça signifie : sélectionner toutes les images dans les spans ayant pour classe lastpost-avatar**/
}

Et en effet, si on regarde ce que contient cette déclaration, on a le code CSS !

Code:: .lastpost-avatar img{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 38px;
width: 38px
}

On voit alors que l'image doit avoir des bords arrondis grâce aux trois propriétés -moz-border-radius et -webkit-border-radius (qui sont l'utilisation préfixée de border-radius).
Puis on voit ce qui nous intéresse : que l'image doit avoir les dimensions 38px*38px
En effet, la propriété height définit la hauteur que doit posséder l'élément (en l'occurence nos avatars) et width leur largeur.
Imaginons donc que nous voulions que nos avatars fassent 50*60px (largeur*hauteur).
On aura : height: 60px; et width: 50px;
Sauf qu'avec ce code, tous les avatars qui n'auraient pas des dimensions qui colleraient avec celles définies (un coefficient de rapport non entier) seraient complètement déformées !
Heureusement, il existe une solution toute simple pour palier à ce problème : renseigner uniquement la largeur ou la hauteur.
Ainsi, l'avatar prendra la valeur indiquée et adaptera l'autre valeur pour qu'il ne soit pas déformé Wink

En faisant des tests, j'ai trouvé que ça irait bien avec ce code là :

Code:: .lastpost-avatar img{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 100px;
}

Et voilà

Voyons maintenant pour le soucis de placement.
Bon, déjà, rightmargin n'existe pas :p.
Et on va faire autrement.
Est-ce que ce positionnement te conviendrait :

Spoiler:

(ne fais pas attention au code, c'est juste pour pas que j'oublie, je t'expliquerai tout après)

A toi de me dire si tout ça te convient Wink

.

Messages : 128 Coda'Points : 343 Date d'inscription : 03/10/2015

Citation :: Bon, déjà, rightmargin n'existe pas :p.

Fou toi de ma tronche toi haha xD Figure toi que oui ça existe vue que ça bougeais dès que je changeais les px Razz

Donc déjà merci pour le premier code, j'aurai dû y penser -_-

Ensuite pour la proposition je préfèrerai que les avatars soient un peu plus sur le droite... Après si c'est trop compliqué tant pis, je m'en passerai Wink

EDIT: Pour l'emplacement de l'avatar c'est bon j'ai changé avec un margin-left =D
Pour l'emplacement des sujets et messages par contre ça me va comme tu proposes Wink

xD. Bon ok ca fonctionne. Mais c'est incorrect !

Pour les avatars ok !

Pour le reste ; j'ai simplement attribué une largeur de 50% et un margin:auto sur les éléments Wink

.
Du coup ils sont centrés dans la cellule !

Messages : 128 Coda'Points : 343 Date d'inscription : 03/10/2015

T'es un génie, j'imagine qu'on te la déjà dis Razz

Merci beaucoup c'est nickel comme ça =D
Je vais tenter de retenir l'astuce Wink

Héhé parfait !

On archive ?

Messages : 128 Coda'Points : 343 Date d'inscription : 03/10/2015

Yes, gracias

Parfait !
J'archive Wink