Problème de codage (puis d'affichage) dans les templates

2 participants

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

Résolu Problème de codage (puis d'affichage) dans les templates

Message par Greyjoys Sam 6 Aoû 2016 - 20:53

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://stayclosetome.forumactif.org/

Description du problème

Bonsoir I love you tongue

Tout d'abord je tiens à préciser que je code depuis seulement un an, je m'en sors plutôt bien en ce qui concerne le CSS et aussi en HTML mais voilà, je cherche à créer un forum RPG totalement différent (esthétiquement) de ce que l'on a l'habitude de voir.
Pour cela je me suis essayé pour la première fois -enfin pas vraiment la première mais les précédentes touchant des problèmes mineurs- à une modification conséquente des templates. Jusque là je suis plutôt satisfait de la mise en page du forum, mais voilà je rencontre un problème quand j'arrive au bout de mon périple dans les templates...
Pour vous guider, je m'inspire d'un design tumblr, je vous donne le lien juste en dessous.
http://solodesigns.co/devil

Je souhaite donc le reproduire sur mon forum.
Comme vous le constatez surement, les catégories ont un problème. J'ai tenté de reproduire le codage du troisième post du tumblr plus haut ("kurtcobangs said:") et si le haut est fait, j'avoue que je n'arrive pas à séparer les catégories de la même façon que sont séparés les post de tumblr. J'entends par là que je souhaiterais que la seconde catégorie ne soit pas "dans" la première mais la suive de la même façon que se suivent les différents posts sur tumblr. J'espère être clair sinon je tenterais d'illustrer ma pensée par un schéma...
Bref, je fournit mon template et mon css plus bas, en espérant que je trouverais de l'aide.

Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="stuff">
  <div class="cadreint">
    <table width="420px">
      <tr>
        <td>
          <img src="https://41.media.tumblr.com/75305ecc19c1b2fe8561c9882f297d6a/tumblr_nkaoqiBBtA1tg0p29o1_100.png" class="portraitcat"/>
            </td>
        <td width="85%" align="right">
          <div class="titrecate">
              <a title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.tablehead.L_FORUM}{catrow.cathead.CAT_TITLE}</a>
          </div>
          <div class="sstitrecate" >lorem ipsum dolor</div>
        </td>
      </tr>
    </table> 
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
   
</div>

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

 
  <table  width="100%" border="0" cellspacing="1" cellpadding="0">
 
  <tr>
     
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
 
           
  <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> <div class="caption">{catrow.forumrow.FORUM_DESC} </div>
           
           
                  <div class="precisionschiantesacoder">{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages<br/>{catrow.forumrow.LAST_POST}</div>
          </td></tr>
     
 
 
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
 
  <!-- END catfoot -->
 
  <!-- BEGIN tablefoot -->
  </table>
 


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

Code:
.stuff {width: 430px;
margin-top: 10px;
text-align: justify;
font-size: 11px;
line-height: 90%;
letter-spacing: 0px;
color: #CCCCCC;
margin-bottom: 90px;
  margin-left:30px;
padding: 10px;
background-color: #ffffff;
  border: 1px solid #eeeeee;}

.cadreint {background-color:#000000;
  height:65px;}

.portraitcat{width:30px;
padding: 5px;
float: left;
margin-left: 10px;
border-radius: 100px;
margin-top: 14px;
  background-color: #fff;}


.titrecate {color: #ffffff!important;
font: bold 13px 'Montserrat';
padding-left: 0px;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 10px;}

.sstitrecate {    font: bold 9px 'Montserrat';
    text-transform: uppercase;
    text-align: right;
    letter-spacing: 0px;
  color: #CCCCCC;
margin-top:-5px;}

.forumlink { margin-top:10px !important;
    text-align: left;
    color: #CCCCCC;
    font: 9px 'Montserrat';
    font-style: normal;
  font-weight: bold;
  color: #de8c59;
  text-transform:uppercase;}

.caption {margin-top: 10px;
font-size: 8px;
line-height: 13px;
color: #CCCCCC;
letter-spacing: 0px;
font-style: normal;
  font: 8px 'Montserrat';
  text-transform:uppercase;}

.precisionschiantesacoder {
margin-top: 3px;
font: bold 9px 'Montserrat';
text-transform: uppercase;
text-align: left;
width:160px;
padding: 5px;
color: #CCCCCC;
  border-top: 1px solid #eeeeee;}
avatar

Greyjoys
Nouveau membre

Masculin
Messages : 4
Inscrit(e) le : 26/04/2015

http://wewereboldandyoung.forumactif.org/
Greyjoys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de codage (puis d'affichage) dans les templates

Message par MlleAlys Dim 7 Aoû 2016 - 1:52

Bonjour,

L'erreur vient je pense d'une mauvaise connaissance des boucles du template (les <!--BEGIN ...--> et <!--END...-->) :

- Dans la boucle <!-- BEGIN catrow --> et <!-- END catrow --> se trouve la catégorie, schéma qui sera répété autant de fois qu'il y a de catégories.
Dans cette boucle :

- Dans la boucle <!-- BEGIN tablehead --> et <!-- END tablehead --> se trouve l'en-tête de la catégorie. Ici le début du bloc "stuff" et le bloc pour le titre de la catégorie.

- Le pied de la catégorie se trouve dans la boucle <!-- BEGIN tablefoot --> et <!-- END tablefoot -->. C'est donc entre ces deux variables que doit se refermer le bloc "stuff" ouvert dans tablehead.

- Dans la boucle <!-- BEGIN forumrow --> et <!-- END forumrow --> se trouve la structure d'un forum, qui sera répétée autant de fois qu'il y a de forums dans la catégorie. Le tableau ouvert dans cette boucle doit donc également y être fermé.

- <!-- BEGIN/END cathead --> et <!-- BEGIN/END catfoot --> servent pour l'affichage d'une catégorie mère seule qui contiendrait des sous-catégories, catfoot va sûrement rester vide au vue de votre structure, cathead sera peut être à modifier en fonction de ce que vous voudrez comme effet, j'ai laissé quelque chose de très basique.

- Les variables du type {VARIABLE} restent en général dans leur boucle d'origine !


Ce qui donne :
Code:
<!-- BEGIN catrow -->

<!-- BEGIN tablehead -->
<div class="stuff">

  <div class="cadreint">
    <table width="420px">
      <tr>
        <td>
          <img src="https://41.media.tumblr.com/75305ecc19c1b2fe8561c9882f297d6a/tumblr_nkaoqiBBtA1tg0p29o1_100.png" class="portraitcat"/>
        </td>
        <td width="85%" align="right">
          <div class="titrecate">{catrow.tablehead.L_FORUM}</div>
        </td>
      </tr>
    </table>
  </div>
  <!-- END tablehead -->

  <!-- BEGIN cathead -->
  <div class="titrecate">{catrow.cathead.CAT_TITLE}</div>
  <!-- END cathead -->

  <!-- BEGIN forumrow -->
  <table  width="100%" border="0" cellspacing="1" cellpadding="0">
    <tr>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
        <div class="caption">{catrow.forumrow.FORUM_DESC}</div>
        <div class="precisionschiantesacoder">
          {catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages
          <br/>{catrow.forumrow.LAST_POST}
        </div>
      </td>
    </tr>
  </table>
  <!-- END forumrow -->

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

<!-- END catrow -->
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

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

Résolu Re: Problème de codage (puis d'affichage) dans les templates

Message par Greyjoys Mer 10 Aoû 2016 - 20:05

Merci énormément, en effet cela vient d'une méconnaissance totale des boucles des templates... Rolling Eyes What a Face
Merci donc pour ta modification et tes explications, le tout fonctionne superbe! I love you
avatar

Greyjoys
Nouveau membre

Masculin
Messages : 4
Inscrit(e) le : 26/04/2015

http://wewereboldandyoung.forumactif.org/
Greyjoys a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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