Petite personnalisation :)

Bonjour à tous les membres de Never Utopia,

Moi c'est Pinku et je suis débutante en codage et je suis en train d'apprendre les bases en suivant les tutoriels proposer par le forum !
Dans un premier temps, je me suis consacrée à ce tutoriel là: https://www.never-utopia.com/t51788-naruto-the-warrior-s-way

Merci à Okhmhaka au passage encore une fois :DD

Que je suis en train de suivre étape par étape.
Tout est très clair et j'aime énormément le rendu !
Cependant, j'aimerai personnaliser ce code mais je ne sais pas comment faire ...
Comme nous pouvons le voir sur cette image:


Code index-box:

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

<div class="cate_titre">{catrow.tablehead.L_FORUM}</div>

   <!-- END tablehead -->
   <!-- BEGIN cathead -->

   <!-- END cathead -->
   <!-- BEGIN forumrow -->

<div class="forum">
  <div class="icone_forum">
    <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
  </div>
  <div class="sous_forum" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
  <script type="text/javascript">
  jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br /> ')).removeAttr('id');
  </script>
  <div class="description">{catrow.forumrow.FORUM_DESC}</div>
  <div class="forum_titre"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
  <div class="last_message">{catrow.forumrow.LAST_POST}
  <!-- BEGIN avatar -->
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
  <!-- END avatar -->
  </div>
  <div class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</div>
</div>

   <!-- END forumrow -->
   <!-- BEGIN catfoot -->

   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->


<!-- END tablefoot --><!-- END catrow -->

Code CSS:

Code:


/* GENERAL */

a:link, a:hover
{
  text-decoration : none !important;
}
.bodylinewidth
{
  position: relative;
  z-index: 3;
}
#page-body /* mise en forme du corps de page */
{
  width: 950px;
  background: #F2FCDC;
  border-top: 5px solid #c34a54;
  border-bottom: 5px solid #c34a54;
  box-shadow: 0px 0px 10px #c34a54;
}
#navigation /* mise en forme fond barre navigation */
{
  position: absolute;
  z-index: 998;
  width: 100%;
  top: 0;
  left: 0;
  background: #C34A54;
  height: 30px;
  border-bottom: 1px solid #c34a54;
}
a.mainmenu
{
  font-family: 'Alegreya Sans SC', sans-serif;
  letter-spacing: 2px;
}
#banniere
{
  position: absolute;
  z-index: 999;
  top: 0;
  left: 50%;
  margin-left: 50px;
  width: 229px;
  height: 187px;
  background: url(); /* triangle ecusson sur la navig */
}
#logo
{
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 90%;
  height: 703px;
  background: url() center center no-repeat; /* image banniere dimension 1109*733px */
}

#titre
{
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 207px;
  background: url() center center no-repeat; /* image du titre doré */
  top: 0;
  left: 0;
  margin-top: 475px;
}
.forumline /* mise en forme des blocs et tables par defaut du forum */
{
  width: 98%;
  margin: auto;
  background: #e8e8e6;
  border: 1px solid #ffffff;
  margin: 10px auto;
}
table
{
  width: 98%;
  margin: auto;
}

/* CATEGORIES */
.cate_titre h2
{
  display: block;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 32px;
  letter-spacing: 5px;
  color: #C34A54;
  font-weight: normal;
  border-bottom: 1px solid #232323;
  padding-bottom: 2px;
  margin-bottom: 5px;
}
.forum
{
  height: 180px;
  background: url(http://www.zupimages.net/up/15/20/rlvd.png) left center no-repeat #e8e8e6; /* image et couleur de fond de forum */
  border: 1px solid #ffffff;
  margin-bottom: 10px;
}
.icone_forum
{
  position: absolute;
  margin: 35px 0 0 -40px;
}
.sous_forum
{
  position: absolute;
  width: 200px;
  height: 170px;
  margin: 5px 10px 0 40px;
  text-align: center;
  overflow: auto;
}
.sous_forum a.gensmall
{
  display: inline-block;
  float: right;
  width: 190px;
  height: 18px;
  padding-top: 2px;
  background: #ffffff;
  opacity: 0.5;
  transition: 200ms;
}
.sous_forum a.gensmall:hover
{
  opacity: 0.8;
}
.sous_forum img
{
  width: 10px;
  height: 20px;
  float: left;
  vertical-align: middle;
}
.description
{
  position: absolute;
  width: 280px;
  height: 170px;
  margin: 5px 0 0 250px;
}
.description_img
{
  position: absolute;
  width: 120px;
  border-radius: 120px;
  border: 2px solid #cdad58;
  box-shadow: 3px 3px 0px #87652a;
  margin: 40px 0 0 300px;
}
.description_texte
{
  display: block;
  height: 170px;
  overflow: auto;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 12px;
  text-align: justify;
}
.description_first
{
  font-size: 14px;
  color: #87652a;
}
.forum_titre
{
  position: absolute;
  width: 385px;
  padding: 1px 5px;
  background: #C34A54;
  border: 1px solid #87652a;
  margin: 5px 0 0 540px;
  text-align: center;
}
.forum_titre a
{
  display: block;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: normal;
  text-shadow: 1px 1px 0px #c34a54;
  color: #cdad58 !important;
  transition: 200ms;
}
.forum_titre a:hover
{
  color: #eee37c !important;
  transition: 200ms;
}
.last_message
{
  position: absolute;
  width: 180px;
  text-align: center;
  margin-left: 710px;
  margin-top: 70px;
}
.last_message a
{
  font-family: 'Alegreya Sans SC', sans-serif;
}
.last_message a.gensmall
{
  font-size: 18px;
}
.stats
{
  position: absolute;
  width: 250px;
  margin-left: 675px;
  margin-top: 165px;
  text-align: right;
  font-size: 11px;
  color: #9f9f9f;
}
.lastpost-avatar
{
  position: absolute;
  float: none;
  width: 120px;
  height: 120px;
  top: 0;
  left: 0;
  padding: 0;
  margin-left: -158px;
  margin-top: -23px;
  border-radius: 150px;
  overflow: hidden;
  opacity: 0;
  transition: 200ms;
}
.last_message:hover .lastpost-avatar
{
  opacity: 1;
  transition: 200ms;
}
.lastpost-avatar img
{
  width: 140px;
  height: auto;
  margin-top: -30px;
  margin-left: -10px;
}
.topictitle
{
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: normal;
}


/* QEEL */
.stats1
{
  text-align: center;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 16px;
  font-weight: bold;
}
.stats1 strong
{
  font-family: 'Mr Dafoe', cursive;
  font-size: 26px;
  color: #b58832;
  text-shadow: 1px 1px 0px #ffffff;
}
.stats2
{
  width: 95%;
  margin: 10px auto;
  padding: 10px;
  background: #ffffff;
  box-shadow: 0px 0px 5px #c34a54;
  text-align: justify;
}

/* footer */
#footer
{
  position: absolute;
  z-index: 1;
  width: 100%;
  background: url() center center no-repeat; /* image footer dimension 1008*403px */
  height: 403px;
  left: 0;
}
#page-footer
{
  margin: 320px 0 -410px 0; /* marge espace footer */
}
#page-footer a
{
  font-size: 10px;
}
#page-footer div
{
  text-align: right;
}

/* TITRES SAISIE ET BOUTONS */
td.catHead, th.thHead, .thSides, .cattitle

{
  font-family: 'Mr Dafoe', cursive;
  font-size: 26px;
  font-weight: normal !important;
  color: #87652a;
}
h1, h1.pagetitle
{
  font-size: 28px;
}
input, textarea, select
{
  border: 1px solid transparent;
  background: #ffffff;
  padding: 3px;
  color: #757575;
  transition: 200ms;
}
input:focus, textarea:focus, select:focus
{
  border: 1px solid #cdad58;
  color: #424242;
  transition: 200ms;
}
#text_editor_iframe, .sceditor-container iframe, .sceditor-container textarea
{
  width: 98% !important;
}
.mainoption, .liteoption, input.button
{
  margin: 10px;
  background: #b58832;
  color: #5c441e !important;
  cursor: pointer;
  border: 1px solid #87652a;
  text-shadow: 1px 1px 0px #cdad58;
  transition: 200ms;
}
.mainoption:hover, .liteoption:hover, input.button:hover
{
  background: #cdad58;
  text-shadow: 1px 1px 0px #eee37c;
  transition: 200ms;
}
.postbody
{
  text-align: justify;
  font-size: 14px;
}
.pourcentback img
{
  background: #b58832;
}
/* RETRAIT DES BORDURES */
    .row3Right
    {
    border: none !important;
    }
    .thHead
    {
    border: none !important;
    }
    .thCornerL, .thCornerR, .thTop
    {
    border: none !important;
    }
    .thLeft, .thRight
    {
    border-left: none !important;
    border-right: none !important;
    }
    .catLeft, .catRight
    {
    border: none! important;
    }
    .catHead
    {
    border: none !important;
    }
    .catBottom
    {
    border: none !important;
    }


Et code a insérer dans les catégories:

Code:

<img class="description_img" src="http://l-userpic.livejournal.com/123017297/68896192" /><span class="description_texte"><span class="description_first">Cum saepe multa</span> - tum memini domi in hemicyclio sedentem, ut solebat, cum et ego essem una et pauci admodum familiares, in eum sermonem illum incidere qui tum forte multis erat in ore. Meministi enim profecto, Attice, et eo magis, quod P. Sulpicio utebare multum, cum is tribunus plebis capitali odio a Q. Pompeio, qui tum erat consul, dissideret, quocum coniunctissime et amantissime vixerat, quanta esset hominum vel admiratio vel querella.</span>

J'aimerai qu'à la place des images (dans les ronds) on retrouve l'avatar du dernier membre qui a poster. Je ne sais pas si c'est possible car étant moi-même une quiche en codage, je ne sais pas si sa demande énormément de modification du code où pas (:
Mais je vous en serai très reconnaissante si vous acceptez m'a requête.

Je remercie d'avance à toutes les personnes qui essayeront de m'aider =D !

A bientôt !!

Petite information pour dire que je viens d'ajouté les codes que j'aimerai que vous m'aidez à personnalisé ^^

Coucou Pinku :)

On ne voit plus l'image dans ton topic O_0.

Je suppose que tu parles de l'image à côté de la description. Si oui, c'est totalement possible !

Actuellement l'image se trouve dans le texte de la description a installer (code a insérer dans les catégories). La première chose à faire est de remettre cette image dans le template, et ne laisser que le texte à mettre dans les catégories.

Est ce que tu as une idée de comment faire ça ou pas du tout ? :)

Coucou ^^

Primo, je vois pas l'image, alors je sais pas si elle est en hide ou quoi, mais dans tous les cas il faudrait que je la vois pour aider un peu mieux XD

Ensuite, un ti lien de ton forum est possible (sous hide si tu veux) ne serais-ce que pour voir comment ça va être réalisable et t'indiquer la marche à suivre ensuite ? ^^

Edit : Et Nihil qui me outspeed de quelques minutes parce que j'avais pas actualisé mon topic XD D'accord je te laisse faire Va petite chaperon rouge, va ! *Sors*

Bonjour Nihil (: !

Oh oui, excuse-moi j'ai dus supprimer le lien de l'image sans faire exprès en mettant les cooooodes ;_; ... ! Oui c'est exactement ça =) ! Je m'excuse pour l'avoir supprimé, ce que je peux être étourdit ;w;'.
Tadaaa ~ Il réparait #


Non je ne vois pas du tout comment faire ):
Je suis vraiment une débutante en codage, on m'y enseigne pour le moment, comment faire une fiche a partir d'une image xD (Niveau Codage -1 /PAN/)
Mais si tu es disponible pour m'aider et me guider, c'est avec grand joie que je te suivrai : D Et merci beaucoup d'être passer par là et de vouloir m'aider <3


Bonjour Alzufen !

Merci beaucoup d'être venu aussi pour m'aider, c'est gentil ^-^
Oui bien sûr, voici le petit lien de mon forum: Clique ici
Il est encore inachevé dans sa construction donc c'est un peu moche '^'. Il me manque aussi la PA pour les crédits mais ne t'inquiète pas, je compte bien les mettre =D ! Je suis désolée pour l'image que j'ai supprimé par accident, je l'ai remis juste au dessus j'espère qu'il te sera accessible cette fois ^^

Merci à tous les deux, je vous suit déjà reconnaissante à vrai dire

On va faire des réponses en canon, un coup c'est moi qui réponds, un coup c'est Alzu, et ensuite on se partage l'XP /pan/

Alors, d'abord on va activer l'option dans le panneau d’administration. PA > Affichage > Page d'accueil > Structure et hiérarchie > Afficher les avatars dans la colonne "Derniers messages" : OUI.

Dans le thème actuel, l'avatar du dernier sujet s'affiche si on survole la zone "Dernier message". On va donc éditer le CSS correspondant, qui se trouve ici :

Code:

.lastpost-avatar
{
  position: absolute;
  float: none;
  width: 120px;
  height: 120px;
  top: 0;
  left: 0;
  padding: 0;
  margin-left: -158px;
  margin-top: -23px;
  border-radius: 150px;
  overflow: hidden;
  opacity: 0;
  transition: 200ms;
}
.last_message:hover .lastpost-avatar
{
  opacity: 1;
  transition: 200ms;
}


Tu peux retirer ceci qui gère l'apparition au survol :

Code:

.last_message:hover .lastpost-avatar
{
  opacity: 1;
  transition: 200ms;
}

Et ensuite pour le CSS de .lastpost-avatar il faut enlever ceci :

Code:

opacity: 0;
transition: 200ms;

Normalement l'image devrait bien se mettre, on verra ensuite comment supprimer les anciennes images des descriptions (^-^)

Ouwhiii super :'D <3 !

Je vous veux tout les deux en tant que mes guideurs Kekeke *D !
Pour l'instant tes explications sont très clairs et je n'ai eu aucun mal à suivre tes instructions (: ! Et voila ! =D

EDIT: Waaah ça maaaarche !

Les ronds qui encadre les avatars de la catégorie sont un peu trop grands O: Si vous pouvez m'indiquer comment les rétrécir un peu ce serait super :33 !

Oh, et je crois qu'il y a un petit bug ^^

Quand je clique sur un catégorie, avant d'accéder à un topic, il y a un rond ici:
(Dans le rond on voit l'avatar d'un membre)
Je ne sais pas ce qu'il fait ici '-' xD

Re-coucou J'étais pas particulièrement d'accord avec l'idée de Nihil bien que je suivais le topic mais bon, puisqu'elle est venue insister par MP XD Je voulais lui laisser faire à la base mais soit, puisque tu réclames toi aussi

En fait, il s'agit des avatars ici :

Spoiler:

Je m'explique, grâce à l'option de FA les avatars dans les messages vont être affichés partout où il y a un lien vers le "dernier message" ^^ Donc ici aussi

Sauf que du coup, c'est un tableau, c'est autre chose, tout ça tout ça, donc les avatars et la partie réagit pas de la même façon que sur l'index ^^

A voir après toi, si tu veux les afficher ici ou les masquer, il faudrait déjà ça comme réponse pour savoir ce qu'on fait

Et pour les ronds, tu parles de l'encadré en couleurs ? En fait il s'agit de celui des images de la description ^^ Ils ont ça pour faire un cadre et une ombre :

Code:

  border: 2px solid #cdad58;
  box-shadow: 3px 3px 0px #87652a;

Du coup, si tu veux que ça paraisse moins grand, tu retires l'ombre, ou la diminue (les 3px) et si c'est toujours trop grand, tu mets la bordure (border 2px) à 1px ^^

Par contre, ce ti bout de code, faut tu l'ajoutes à ça dans ton CSS, si tu le veux autour des avatar du dernier postant, car sinon, une fois qu'on aura retire l'image des descriptions, il y seront pu ^^

Code:

.lastpost-avatar {
  position: absolute;
  float: none;
  width: 120px;
  height: 120px;
  top: 0;
  left: 0;
  padding: 0;
  margin-left: -158px;
  margin-top: -23px;
  border-radius: 150px;
  overflow: hidden;
}

Ooooooh ~~ !

Bien sur que je réclamais aussi ta compagnie voyons ** !
C'est bien plus amusant de travailler a plusieurs :3 en plus vous êtes tous les deux tellement sympas que je ne peux vouloir que votre présence xD

Oui concernant les ronds, je parlais des ronds dans lesquelles sont inscrits les avatars du dernier membre qui a poster, les ronds que je voulais personnaliser dans la première image que je vous ai montrer (: pour les rendre plus petites. C'est donc le premier code que je dois changer pour faire des modifications sur ces rond ^^?

Pour la deuxième étape, c'est fait *^* !

Sinon oui, je veux bien que les avatars des derniers membres postés s'affiche aussi dans les sous parties =) ( dans l'image que tu ma montrer ) je voudrais ne pas les masquer mais les afficher aussi ^^

EDIT:
Voici ce que j'ai obtenu après avoir modifier les tailles des ronds:

J'y parviens très bien, mais ce qui est dérangeant c'est que l'avatar du membre qui a poster en dernier n'occupe pas le rond et garde la taille 120*120 pixel alors que j'avais modifier 100*100 pour les ronds =(

Coucou ^^

Désolé du retard j'étais pas là de la journée, comme j'ai pas fait grand chose au message précédent je vais t'aider encore une fois

Du coup, on va faire chaque chose en son temps, plus haut Nihil t'avait parlé de retirer l'ancienne image des ronds, ça pourrait être utile de faire ça maintenant ^^

Pour supprimer l'ancienne image si je ne m'abuse, il te suffit de supprimer la balise "img" présente dans chaque description de tes catégories, dans ce style là :

Code:

<img src="http://l-userpic.livejournal.com/123017297/68896192" class="description_img">

On notera aussi que la class "description_img" ne sers pu à rien, donc on va pouvoir retirer ça dans ton CSS :

Code:

.description_img {
  position: absolute;
  width: 120px;
  border-radius: 120px;
  border: 2px solid #cdad58;
  box-shadow: 3px 3px 0px #87652a;
  margin: 40px 0 0 300px;
}

Normalement, une fois cela fais tu ne devrais pu avoir ses vilaines images, mais malédiction, tu n'as plus non plus de cadres... Si tu veux garder le cadre, comme dis au dessus, il va te falloir faire ce que je t'ai dis au poste précédent, je me répète pas, c'est juste au dessus

Dans ton CSS actuel tu as ça :

Code:

.lastpost-avatar img {
  width: 140px;
  height: auto;
  margin-top: -30px;
  margin-left: -10px;
}
.lastpost-avatar img {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  height: 38px;
  width: 38px;
}

Je sais pas si tu as les deux dans ton CSS à toi, mais l'un des deux ne sers à rien, donc si les deux sont notés dans ta feuille de style, suppr s'en un, je te suggère le deuxième, car on n'a pas besoin des border-radius et on n'a pas besoin des height/width vu qu'il y a déjà un width au dessus ^^ Ensuite, au dessus, on va retirer les margins, ils nous servent pas. Enfin si, ils servent à faire en sorte que de déplacer ton image dans le bloc des derniers messages pour qu'on puisse voir la partie de l'image qu'on veut. SAUF que ça ne s'adaptera pas à toutes les images, résultat il va falloir faire des concession avec certains avatar ^^'

Le "Width" n'est pas forcément utile non plus, ici, il va adapter la taille de l'avatar, mais il va pas forcer la taille des ronds, donc à toi de voir ce que tu en fais, ça dépends la taille de tes avatars sur ton forum ^^ Si c'est du 200*320 tu peux laisser comme ça ou l'enlever, je pense que ce sera bien ^^

Pour réduire la taille des ronds, il va falloir par contre toucher aux dimensions ici :

Code:

.lastpost-avatar {
  position: absolute;
  float: none;
  width: 120px;
  height: 120px;
  top: 0;
  left: 0;
  padding: 0;
  margin-left: -158px;
  margin-top: -23px;
  border-radius: 150px;
  overflow: hidden;
}

En passant, tu peux aussi réduire la taille du border-radius à 100, généralement pour avoir un bon rond, la valeur de la hauteur et de la largeur suffit ^^ Dans le doute laisse ainsi, ce sera pas gênant

Autre chose, tu sembles avoir cette partie aussi en double dans ton CSS, et deux fois ^^ Tu pourrais nous copier/coller ta nouvelle feuille de style CSS une fois que tu auras fais toutes les modifications histoire qu'on vérifie qu'il n'y a rien d'autre en double ? Ca aussi ça peut faire bugger tes modifications en CSS, c'est peut-être pour ça que tes ronds n'ont pas changé de hauteur alors que tu pensais les avoir modifiés ^^

Mais non voyons, tu n'es pas du tout en retard bien au contraire, je te trouve même vraiment rapide :')
Je ne vous en voudrai jamais si vous prenez votre temps et c'est tout à fait compréhensible, surtout en cette période charnière où des examens s'accumulent ^^
Bon hé bien, que dire ? Avec vos explications tout frôle la perfection et je m'en suis sortie à merveille ! Vraiment, merci beaucoup à toutes les deux, je suis tellement contente de voir mon forum dans toute sa splendeur grâce à tous les deux <3 !
Vos explications ont été explicites, très clairs, je n'ai rien a redire à part Merci, de m'avoir consacrer autant de temps à m'aider :'D

Néanmoins il reste toujours ce petit problème ): Toujours le même:


Ce bug ne veut pas disparaitre xD Au pire ce n'est pas grave, on fera avec ^^

Oh oui, volontier !
Voici le code de mon CSS en entier:

Code:

/a {text-decoration: none;}
body{
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}




.bodylinewidth
{
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -9px;
  margin-bottom: -9px;
}



.bodyline
{
  padding: 0;
  border-left: 5px solid #c8b1ce;
  border-right: 5px solid #c8b1ce;
  -moz-box-shadow: #818180 0px 0px 20px;
  -webkit-box-shadow: #818180 0px 0px 20px;
  box-shadow: #818180 0px 0px 20px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 0px;
  width: 200px;
}










/* GENERAL */

a:link, a:hover
{
  text-decoration : none !important;
}
.bodylinewidth
{
  position: relative;
  z-index: 3;
}
#page-body /* mise en forme du corps de page */
{
  width: 950px;
  background: #F2FCDC;
  border-top: 5px solid #c34a54;
  border-bottom: 5px solid #c34a54;
  box-shadow: 0px 0px 10px #c34a54;
}
#navigation /* mise en forme fond barre navigation */
{
  position: absolute;
  z-index: 998;
  width: 100%;
  top: 0;
  left: 0;
  background: #C34A54;
  height: 30px;
  border-bottom: 1px solid #c34a54;
}
a.mainmenu
{
  font-family: 'Alegreya Sans SC', sans-serif;
  letter-spacing: 2px;
}
#banniere
{
  position: absolute;
  z-index: 999;
  top: 0;
  left: 50%;
  margin-left: 50px;
  width: 229px;
  height: 187px;
  background: url(); /* triangle ecusson sur la navig */
}
#logo
{
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 90%;
  height: 703px;
  background: url() center center no-repeat; /* image banniere dimension 1109*733px */
}

#titre
{
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 207px;
  background: url() center center no-repeat; /* image du titre doré */
  top: 0;
  left: 0;
  margin-top: 475px;
}
.forumline /* mise en forme des blocs et tables par defaut du forum */
{
  width: 98%;
  margin: auto;
  background: #e8e8e6;
  border: 1px solid #ffffff;
  margin: 10px auto;
}
table
{
  width: 98%;
  margin: auto;
}

/* CATEGORIES */
.cate_titre h2
{
  display: block;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 32px;
  letter-spacing: 5px;
  color: #C34A54;
  font-weight: normal;
  border-bottom: 1px solid #232323;
  padding-bottom: 2px;
  margin-bottom: 5px;
}
.forum
{
  height: 180px;
  background: url(http://www.zupimages.net/up/15/20/rlvd.png) left center no-repeat #e8e8e6; /* image et couleur de fond de forum */
  border: 1px solid #ffffff;
  margin-bottom: 10px;
}
.icone_forum
{
  position: absolute;
  margin: 35px 0 0 -40px;
}
.sous_forum
{
  position: absolute;
  width: 200px;
  height: 170px;
  margin: 5px 10px 0 40px;
  text-align: center;
  overflow: auto;
}
.sous_forum a.gensmall
{
  display: inline-block;
  float: right;
  width: 190px;
  height: 18px;
  padding-top: 2px;
  background: #ffffff;
  opacity: 0.5;
  transition: 200ms;
}
.sous_forum a.gensmall:hover
{
  opacity: 0.8;
}
.sous_forum img
{
  width: 10px;
  height: 20px;
  float: left;
  vertical-align: middle;
}
.description
{
  position: absolute;
  width: 280px;
  height: 170px;
  margin: 5px 0 0 250px;
}


.lastpost-avatar {
  position: absolute;
  float: none;
  width: 120px;
  height: 120px;
  top: 0;
  left: 0;
  padding: 0;
  margin-left: -158px;
  margin-top: -23px;
  border-radius: 150px;
  overflow: hidden;
}

.description_texte
{
  display: block;
  height: 170px;
  overflow: auto;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 12px;
  text-align: justify;
}
.description_first
{
  font-size: 14px;
  color: #87652a;
}
.forum_titre
{
  position: absolute;
  width: 325px;
  padding: 1px 5px;
  background: #C34A54;
  border: 1px solid #87652a;
  margin: 5px 0 0 540px;
  text-align: center;
}
.forum_titre a
{
  display: block;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: normal;
  text-shadow: 1px 1px 0px #c34a54;
  color: #cdad58 !important;
  transition: 200ms;
}
.forum_titre a:hover
{
  color: #eee37c !important;
  transition: 200ms;
}
.last_message
{
  position: absolute;
  width: 180px;
  text-align: center;
  margin-left: 710px;
  margin-top: 70px;
}
.last_message a
{
  font-family: 'Alegreya Sans SC', sans-serif;
}
.last_message a.gensmall
{
  font-size: 18px;
}
.stats
{
  position: absolute;
  width: 250px;
  margin-left: 675px;
  margin-top: 165px;
  text-align: right;
  font-size: 11px;
  color: #9f9f9f;
}


.lastpost-avatar img
{
  width: 140px;
  height: auto;
  margin-top: -30px;
  margin-left: -10px;
}
.lastpost-avatar {
  position: absolute;
  float: none;
  width: 110px;
  height: 110px;
  top: 0;
  left: 0;
  padding: 0;
  margin-left: -158px;
  margin-top: -23px;
  border-radius: 150px;
  overflow: hidden;
    border: 2px solid #cdad58;
  box-shadow: 2px 2px 0px #87652a;
}

.topictitle
{
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: normal;
}




/*codage affichage sujet Sheryl*/
.thLeft, .thRight{
 background: white;
 color: black;
 border: 1px black solid;
}

.titlesuj{
 background: white;
 color: black;
 font-weight: bold;
 padding-top:10px;
 padding-bottom: 10px;
}

 
.post-options a{
font:normal 10px arial, helvetica, sans-serif;
padding: 1px;
display: inline-block;
margin:1px;
color: grey;
font-size: 11px;
}



.avatarn{
  width: 100px;
  height: 100px;
  border: 1px black solid;
  overflow: hidden;
}

/* QEEL COLOR*/
.forumline{
  background:#f2fcdc;
}

.forumline noprint{
  background:#f2fcdc;
}
/*fin code Sherylchouw*/



/* QEEL */
.stats1
{
  text-align: center;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 16px;
  font-weight: bold;
}
.stats1 strong
{
  font-family: 'Mr Dafoe', cursive;
  font-size: 26px;
  color: #b58832;
  text-shadow: 1px 1px 0px #ffffff;
}
.stats2
{
  width: 95%;
  margin: 10px auto;
  padding: 10px;
  background: #ffffff;
  box-shadow: 0px 0px 5px #c34a54;
  text-align: justify;
}

/* footer */
#footer
{
  position: absolute;
  z-index: 1;
  width: 100%;
  background: url() center center no-repeat; /* image footer dimension 1008*403px */
  height: 403px;
  left: 0;
}
#page-footer
{
  margin: 320px 0 -410px 0; /* marge espace footer */
}
#page-footer a
{
  font-size: 10px;
}
#page-footer div
{
  text-align: right;
}

/* TITRES SAISIE ET BOUTONS */
td.catHead, th.thHead, .thSides, .cattitle

{
  font-family: 'Mr Dafoe', cursive;
  font-size: 26px;
  font-weight: normal !important;
  color: #87652a;
}
h1, h1.pagetitle
{
  font-size: 28px;
}
input, textarea, select
{
  border: 1px solid transparent;
  background: #ffffff;
  padding: 3px;
  color: #757575;
  transition: 200ms;
}
input:focus, textarea:focus, select:focus
{
  border: 1px solid #cdad58;
  color: #424242;
  transition: 200ms;
}
#text_editor_iframe, .sceditor-container iframe, .sceditor-container textarea
{
  width: 98% !important;
}
.mainoption, .liteoption, input.button
{
  margin: 10px;
  background: #b58832;
  color: #5c441e !important;
  cursor: pointer;
  border: 1px solid #87652a;
  text-shadow: 1px 1px 0px #cdad58;
  transition: 200ms;
}
.mainoption:hover, .liteoption:hover, input.button:hover
{
  background: #cdad58;
  text-shadow: 1px 1px 0px #eee37c;
  transition: 200ms;
}
.postbody
{
  text-align: justify;
  font-size: 14px;
}
.pourcentback img
{
  background: #b58832;
}
/* RETRAIT DES BORDURES */
    .row3Right
    {
    border: none !important;
    }
    .thHead
    {
    border: none !important;
    }
    .thCornerL, .thCornerR, .thTop
    {
    border: none !important;
    }
    .thLeft, .thRight
    {
    border-left: none !important;
    border-right: none !important;
    }
    .catLeft, .catRight
    {
    border: none! important;
    }
    .catHead
    {
    border: none !important;
    }
    .catBottom
    {
    border: none !important;
    }


















body.chatbox {
background-image: url("");
}

#chatbox_header .cattitle:before { content: "♛"; }



Bon, on va commencer par les mettre au bon endroit, pour le style on verra après :p.
Dans ton template topics_list_box, il faut chercher cette ligne là :

Code:

<span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>

On va changer la classe et remplacer lastpost-avatar par lastpost-avatar-topic.
Tu peux valider et publier le template.

Ensuite, en CSS on va donner un style de base trèèèèès simple, que tu peux ensuite personnaliser :

Code:

.last-post-avatar-topic {
    float: left;
}

.last-post-avatar-topic img {
    width: 50px;
}

Ce qui devrait (si tout va bien), te donner cette petite horreur là :')


Pour le CSS en double... Je laisse à Alzu le soin de tout vérifier

C'est parfait, merci pour tout ce que tu m'as apporté jusqu'ici Nihil, Arigatoooo ~ :DD !
Je t'en suis vraiment reconnaissante Je voudrais continuer à te parler, à toi et Alzu ;_; Je ne veux pas que ce topic coule dans les profondeurs des archives ...

D'accord je vais attendre bien sagement que mon CSS ne comporte pas d'erreur ^^

Mille merci à tous les deux encore une fois <3 !

J'ai corrigé ton css en retirant ce qui était en double, en réduisant un peu sa taille en couplant certaines class qui avaient les même propriétés que d'autre, et corrigé les préfixes qui ne servent pu ^^ Mise à part ça, j'ai pas fais grand chose parce que déjà ça prendrais du temps à tout tester sur ton forum et corriger, c'est plutôt à toi de le faire sur un forum de test par exemple, et voir ce que ça fais pour être sûr que TOUT ce qui se trouve dans ton CSS est utile ou non

Code:

/* GENERAL */
a:link,a:hover,a {
   text-decoration:none !important;
}

body {
   background-position:top center;
   background-repeat:no-repeat;
   background-attachment:fixed;
}
.bodylinewidth {
   width:800px;
   margin:-9px auto;
}
.bodyline {
   padding:0;
   border-left:5px solid #c8b1ce;
   border-right:5px solid #c8b1ce;
   box-shadow:#818180 0px 0px 20px;
   border-radius:0px;
   width:200px;
}
#page-body /* mise en forme du corps de page */ {
   width:950px;
   background:#F2FCDC;
   border-top:5px solid #c34a54;
   border-bottom:5px solid #c34a54;
   box-shadow:0px 0px 10px #c34a54;
}
#navigation /* mise en forme fond barre navigation */ {
   position:absolute;
   z-index:998;
   width:100%;
   top:0;
   left:0;
   background:#C34A54;
   height:30px;
   border-bottom:1px solid #c34a54;
}
a.mainmenu {
   font-family:'Alegreya Sans SC',sans-serif;
   letter-spacing:2px;
}
#banniere {
   position:absolute;
   z-index:999;
   top:0;
   left:50%;
   margin-left:50px;
   width:229px;
   height:187px;
   background:url();
   /* triangle ecusson sur la navig */
}
#logo {
   position:absolute;
   z-index:2;
   top:0;
   left:0;
   width:90%;
   height:703px;
   background: url() center center no-repeat;
   /* image banniere dimension 1109*733px */
}
#titre {
   position:absolute;
   z-index:4;
   width:100%;
   height:207px;
   background:url() center center no-repeat;
   /* image du titre doré */
   top:0;
   left:0;
   margin-top:475px;
}
.forumline /* mise en forme des blocs et tables par defaut du forum */ {
   width:98%;
   margin:auto;
   background:#e8e8e6;
   border:1px solid #ffffff;
   margin:10px auto;
}
table {
   width:98%;
   margin: auto;
}
/* CATEGORIES */
.cate_titre h2 {
   display:block;
   font-family:'Alegreya Sans SC',sans-serif;
   font-size:32px;
   letter-spacing:5px;
   color:#C34A54;
   font-weight:normal;
   border-bottom:1px solid #232323;
   padding-bottom:2px;
   margin-bottom: 5px;
}
.forum {
   height:180px;
   background:url(http://www.zupimages.net/up/15/20/rlvd.png) left center no-repeat #e8e8e6;
   /* image et couleur de fond de forum */
   border:1px solid #ffffff;
   margin-bottom:10px;
}
.icone_forum {
   position:absolute;
   margin:35px 0 0 -40px;
}
.sous_forum {
   position:absolute;
   width:200px;
   height:170px;
   margin:5px 10px 0 40px;
   text-align:center;
   overflow:auto;
}
.sous_forum a.gensmall {
   display:inline-block;
   float:right;
   width:190px;
   height:18px;
   padding-top:2px;
   background:#ffffff;
   opacity:0.5;
   transition:200ms;
}
.sous_forum a.gensmall:hover {
   opacity:0.8;
}
.sous_forum img {
   width:10px;
   height:20px;
   float:left;
   vertical-align:middle;
}
.description {
   position:absolute;
   width:280px;
   height:170px;
   margin:5px 0 0 250px;
}
.description_texte {
   display:block;
   height:170px;
   overflow:auto;
   font-family:'Alegreya Sans SC',sans-serif;
   font-size:12px;
   text-align:justify;
}
.description_first {
   font-size:14px;
   color:#87652a;
}
.forum_titre {
   position:absolute;
   width:325px;
   padding:1px 5px;
   background:#C34A54;
   border:1px solid #87652a;
   margin:5px 0 0 540px;
   text-align:center;
}
.forum_titre a {
   display:block;
   font-family:'Alegreya Sans SC',sans-serif;
   font-size:22px;
   letter-spacing:2px;
   font-weight:normal;
   text-shadow:1px 1px 0px #c34a54;
   color:#cdad58 !important;
   transition:200ms;
}
.forum_titre a:hover {
   color:#eee37c !important;
   transition:200ms;
}
.last_message {
   position:absolute;
   width:180px;
   text-align:center;
   margin-left:710px;
   margin-top:70px;
}
.last_message a {
   font-family:'Alegreya Sans SC',sans-serif;
}
.last_message a.gensmall {
   font-size:18px;
}
.stats {
   position:absolute;
   width:250px;
   margin-left:675px;
   margin-top:165px;
   text-align:right;
   font-size:11px;
   color:#9f9f9f;
}
.lastpost-avatar {
   position:absolute;
   float:none;
   width:110px;
   height:110px;
   top:0;
   left:0;
   padding:0;
   margin-left:-158px;
   margin-top:-23px;
   border-radius:150px;
   overflow:hidden;
   border:2px solid #cdad58;
   box-shadow:2px 2px 0px #87652a;
}
.lastpost-avatar img {
   width:140px;
   height:auto;
   margin-top:-30px;
   margin-left:-10px;
}
.topictitle {
   font-family:'Alegreya Sans SC',sans-serif;
   font-size:16px;
   letter-spacing:1px;
   font-weight: normal;
}
/*codage affichage sujet Sheryl*/
.thLeft,.thRight {
   background:white;
   color:black;
   border:1px black solid;
}
.titlesuj {
   background:white;
   color:black;
   font-weight:bold;
   padding-top:10px;
   padding-bottom:10px;
}
.post-options a {
   font:normal 10px arial,helvetica,sans-serif;
   padding:1px;
   display:inline-block;
   margin:1px;
   color:grey;
   font-size:11px;
}
.avatarn {
   width:100px;
   height:100px;
   border:1px black solid;
   overflow: hidden;
}
/* QEEL COLOR*/
.forumline {
   background:#f2fcdc;
}
.forumline noprint {
   background: #f2fcdc;
}
/*fin code Sherylchouw*/
/* QEEL */
.stats1 {
   text-align:center;
   font-family:'Alegreya Sans SC',sans-serif;
   font-size:16px;
   font-weight:bold;
}
.stats1 strong {
   font-family:'Mr Dafoe',cursive;
   font-size:26px;
   color:#b58832;
   text-shadow:1px 1px 0px #ffffff;
}
.stats2 {
   width:95%;
   margin:10px auto;
   padding:10px;
   background:#ffffff;
   box-shadow:0px 0px 5px #c34a54;
   text-align: justify;
}
/* footer */
#footer {
   position:absolute;
   z-index:1;
   width:100%;
   background:url() center center no-repeat;
   /* image footer dimension 1008*403px */
   height:403px;
   left:0;
}
#page-footer {
   margin:320px 0 -410px 0;
   /* marge espace footer */
}
#page-footer a {
   font-size:10px;
}
#page-footer div {
   text-align: right;
}
/* TITRES SAISIE ET BOUTONS */
td.catHead,th.thHead,.thSides,.cattitle {
   font-family:'Mr Dafoe',cursive;
   font-size:26px;
   font-weight:normal !important;
   color:#87652a;
}
h1,h1.pagetitle {
   font-size:28px;
}
input,textarea,select {
   border:1px solid transparent;
   background:#ffffff;
   padding:3px;
   color:#757575;
   transition:200ms;
}
input:focus,textarea:focus,select:focus {
   border:1px solid #cdad58;
   color:#424242;
   transition:200ms;
}
#text_editor_iframe,.sceditor-container iframe,.sceditor-container textarea {
   width:98% !important;
}
.mainoption,.liteoption,input.button {
   margin:10px;
   background:#b58832;
   color:#5c441e !important;
   cursor:pointer;
   border:1px solid #87652a;
   text-shadow:1px 1px 0px #cdad58;
   transition:200ms;
}
.mainoption:hover,.liteoption:hover,input.button:hover {
   background:#cdad58;
   text-shadow:1px 1px 0px #eee37c;
   transition:200ms;
}
.postbody {
   text-align:justify;
   font-size:14px;
}
.pourcentback img {
   background: #b58832;
}
/* RETRAIT DES BORDURES */
.row3Right,.thHead,.thCornerL,.thCornerR,.thTop,.thLeft,.thRight,.catLeft,.catRight,.catHead,.catBottom {
   border:none !important;
   border-right:none !important;
   border-left:none !important;
}
body.chatbox {
   background-image:url("");
}
#chatbox_header .cattitle:before {
   content: "♛";
}

Par contre, j'avais une question, à quoi sers ceci :

Code:

#banniere
{
  position: absolute;
  z-index: 999;
  top: 0;
  left: 50%;
  margin-left: 50px;
  width: 229px;
  height: 187px;
  background: url(); /* triangle ecusson sur la navig */
}
#logo
{
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 90%;
  height: 703px;
  background: url() center center no-repeat; /* image banniere dimension 1109*733px */
}

#titre
{
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 207px;
  background: url() center center no-repeat; /* image du titre doré */
  top: 0;
  left: 0;
  margin-top: 475px;
}

Dans ton code source, ce sont des "div" mais totalement vident, et vu qu'elles n'ont pas de "background" elles ne s'affichent pas, si ça date d'un ancien thème ou que tu comptes pas t'en resservir tu peux les enlever hein ^^

Ainsi que dans ton HTML :

Code:

<div id="fond_sombre"></div>
<div id="banniere"></div>
<div id="logo"></div>
<div id="titre"></div>

Merci beaucoup pour ton aide Alzu', j'ai remplacé le code que tu m'as transmis (:

Oui c'est vrai que la partie que tu as cité ne me sers plus vraiment dans mon CSS, c'était dans le code de base mais je n'en ai plus vraiment besoin alors je vais le retirer, merci :'D !

💔 Bon bah il va être temps de laisser couler ce topic dans les profondeurs ~
Mais c'est pas grave, on l'oubliera pas, promis ♡ (enfin, moi je promets /pan/)

Si tout est résolu, tu peux éditer le premier message pour cocher l’icône "Terminé" si tu veux :p

Bon courage pour ton forum, le design est vraiment sympa *-* !
Merci encore pour le kit que tu m'as fait, il est super et en plus c'est une attention adorable ! (◕‿◕✿)

Oui ... :'] Ayaah, comment ça me rends triste ;_;.

Je tenais à vous remerciez une fois encore pour toute l'aide que vous m'avez apporter tous les deux. Sachez que je vous suit énormément reconnaissante et que j'étais vraiment ravie d'avoir fait ce petit chemin à vos côtés. Puis, sachez aussi que vous êtes de superbes personnes et que je suis très contente de vous avoir connus ! : D J'espère que l'on gardera contacte et que l'on se croisera souvent sur le forum (Je l'espère sincèrement èwé)
Pour le petit Kit, ça ne valait en rien toute la reconnaissance que je vous dois :] C'est tellement minime à ce que j'ai ressenti quand je l'ai fais pour vous, pour vous remerciez de m'aider, pour votre amabilité et pour votre gentillesse.



Merci encore à tous les deux, mon forum est tout beau comme ça : D


A très bientôt !

Pinku.