AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Personalisation de catégorie et forum

Personalisation de catégorie et forum   posté le :
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">
 <!-- 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="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>
 <!-- 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"><div style="width:250px;">&nbsp;</div></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">
 <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">
 <!-- 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 over" align="center" valign="middle" height="50">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
 </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 -->

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 ! (:
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Personalisation de catégorie et forum   posté le :
Coucou Smile

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

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.
Eluknow
avatar
Administrateur
Messages : 2185
Coda'Points : 3896
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Personalisation de catégorie et forum   posté le :
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
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Personalisation de catégorie et forum   posté le :
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 !
Eluknow
avatar
Administrateur
Messages : 2185
Coda'Points : 3896
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Personalisation de catégorie et forum   posté le :
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
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Personalisation de catégorie et forum   posté le :
Héhé parfait !

On archive ?
Eluknow
avatar
Administrateur
Messages : 2185
Coda'Points : 3896
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: Personalisation de catégorie et forum   posté le :
Yes, gracias
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: Personalisation de catégorie et forum   posté le :
Parfait !
J'archive Wink
Eluknow
avatar
Administrateur
Messages : 2185
Coda'Points : 3896
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
A Toi de Coder - Forum de codage :: Corbeille :: Corbeille du forum-
Sauter vers: