Mise en forme des forums et catégories

[Oniitsuki]

Bonjours,

Je ne sais pas si je devais poster dans Apparence ou problème de script. Donc si c'est pas le bon, je m'en excuse.

J'ai commencer le CSS et les modifications de template depuis un mois et je suis capable de comprendre avec du temps un code donné mais pas du tout le créer ou modifier de façon significative pour avoir ce que je veux. J'ai cherché comment modifier les templates (lesquels et autour de quoi) mais ça ne correspond pas toujours à ce que je veux. Je ne sais pas lier un CSS à un template, ou si il faut directement mettre le CSS/HTML autour du code template. Je ne trouve jamais de réponse concrète à mes questions en gros... à part des corrections de codes je trouve pas de tuto' bien expliqué et clair pour une personne qui n'y connait presque rien (voir rien)...

J'ai lu les tuto' sur les templates ( https://forum.forumactif.com/t348435-variables-de-template ), mais bon, je ne sais toujours pas ce qu'est une variable et quand je lis un truc entre {} ça me parle pas... C'est un peu comme si je vous disais que ça : C'est la loi de poisson et de me faire une équation alors que vous n'avez pas fait de math depuis la terminal et que vous savez même pas ce que c'est que ce truc ! Alors je sais que ce truc entre {} c'est une variable mais après...

Après en vu de ma mise à la poubelle, bah j'ai tenté d'autre truc, me disant que tant pis, je ferais pas ce que je voulais. J'ai donc tenté ce tuto' : https://forum.forumactif.com/t269891-affichage-des-forums-avec-onglets
Cela a donné cette horreur :

Spoiler:

J'ai fait ensuite celui là en me disant que je modifirai un peu pour pas que ça ressemble : https://forum.forumactif.com/t315199-modifier-l-apparence-des-categories-et-des-forums
J'ai pas pris de screenshot mais le résultat était équivalant à l'essaie au dessus.

Puis encore un autre qui me donna des résultats alarmant. Même la cité de R'lyeh était plus ordonée...

Ainsi j'aimerai savoir si ceci était réalisable :

Spoiler:

Mettre les sous-forum sous l'image dans un cadre légèrement penché je sais pas du tout (je sais juste pencher l'image), voir même je sais même pas si c'est possible !
Le best serait une commande mais en dehors du forum pour les commandes graphique, je ne sais pas si on peut faire des commandes de codes ><.

- l'URL du forum : http://pokemon-impact.forumactif.org/
- la version de votre forum : phpBB2
- une capture d'écran du problème : voir plus haut.
- votre statut sur le forum : Fondateur
- si vous avez modifié des templates : Oui - overall_header / viewtopic_body
- si vous avez du CSS personnalisé : Oui.
- votre ou vos navigateur(s) : Chrome (mais comme beaucoup utilise aussi Firefox j'aimerai que ça fonctionne aussi)

Merci.

[Anzu]

Rebonjour,

Réponse donnée ici: https://forum.forumactif.com/t356718-personnaliser-une-categorie-a-l-aide-de-codes

Les demandes de type "commande de codes" ne sont pas traitées.
Cependant, si vous faites l'effort d'essayer de votre côté, il faut nous fournir les codes obtenus.

Cordialement.

[Oniitsuki]

... J'ai toujours eu une malédiction pour trouver ce que je veux. Je dois pas utiliser les bon mots clés, il arrive même que je ne retrouve pas un truc que j'ai déjà vu en utilisant les mêmes mots clés, alors pour dire xD.

Ces tuto m'ont bien aidé, j'ai pas vraiment réussi à faire ce que je veux mais j'ai déjà compris une bonne partie du template et réussi à faire une forme potable. Cependant il y a des points que je n'arrive pas à régler.

Déjà j'aimerai pouvoir coller le titre du forum au cadre de description, mais comme vous pouvez voir il y a une petit espace. J'ai vu dans le template que le titre était dans un tableau, mais je ne sais pas comment modifier ça sans tout casser...

Après je n'arriver pas à centrer le cadre des sous-forums je ne sais pas où mettre le align="center", je l'ai placé partout où c'était cohérent mais rien n'y fait... même avec une div style.

Pour finir j'aimerai bien que le cadre des titre soit légèrement sur la droite pour éviter qu'il "pende" sur la courbure du cadre de description. Si vous voyez pas ce que je veux dire je ferais un petit screenshot :3.

Pour finir, j'ai un problème avec la mise en page de mes catégorie, j'ai suivis un tuto (qui n'est pas sur ce forum donc j'ose pas mettre le lien pour pas faire de "pub") et comme vous pouvez le voir, le cadre des catégorie s'est formé autour du titre "forum" et non des catégorie... et il englobe pas les cadres des derniers messages...

Je vous donne mon template et mes CSS :
Template :

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="haut_cate"><tr valign="center"><td>{catrow.tablehead.L_FORUM}</td></tr></table><div class="milieu_cate"><table class="forumline" width="750px" align="center" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="4" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
         </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS} index_cate" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT} index_cate" 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} index_cate" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS} index_cate" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS} index_cate" 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 index_cate" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <table width="100%"><tbody><tr><td><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}></td></tr></tbody></table>
                  <span class="genmed"><div class="cadre3">{catrow.forumrow.FORUM_DESC}</div></span>
         <span class="gensmall"><div class="cadre4">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
         </span>
      </td>
      <td class="row3 over index_cate" align="center" valign="bottom" height="50">
<span class="gensmall"><div class="cadre1"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
  <div class="cadre2">{catrow.forumrow.POSTS} messages / {catrow.forumrow.TOPICS} sujets.</div>
      </td>
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS} index_cate" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN} index_cate" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table></div><table class="bas_cate"><tr valign="center"><td> </td></tr></table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

CSS :

Code:

/*catégories et forums*/
.cadre1 {
border-radius: 15px;
border: 1px solid #2d2d2d;
padding: 5px;
background: #515151;
font-size: 11px;
font-family: georgia;
height: 75px;
width: 170px;
}

.cadre2 {
border-radius : 0px 0px 15px 15px ; -moz-border-radius : 0px 0px 15px 15px ; -webkit-border-radius : 0px 0px 15px 15px ;
border-left: 1px dashed #2d2d2d;
border-right: 1px dashed #2d2d2d;
border-bottom: 1px dashed #2d2d2d;
padding: 5px;
background: #424242;
font-size: 11px;
font-family: georgia;
height: 15px;
width: 140px;
}

.cadre3 {
border-radius: 15px;
border: 1px solid #2d2d2d;
padding: 5px;
background: #515151;
font-size: 11px;
font-family: georgia;
height: 100px;
width: 500px;
}

.cadre4 {
border-radius : 0px 0px 15px 15px ; -moz-border-radius : 0px 0px 15px 15px ; -webkit-border-radius : 0px 0px 15px 15px ;
border-left: 1px dashed #2d2d2d;
border-right: 1px dashed #2d2d2d;
border-bottom: 1px dashed #2d2d2d;
padding: 5px;
background: #424242;
font-size: 11px;
font-family: georgia;
height: 100%;
width: 450px;
}

/*CATEGORIES*/
table.haut_cate{
  width:800px;
  height:215px;
  background-image:url('http://imageshack.us/a/img35/6767/b8rw.png');
  background-repeat:no-repeat;
  margin:auto;
  font-family: impact;
  font-size: 20px;
  color: 8A6994;
  text-shadow: 1px 1px 2px #000;
  }

div.milieu_cate{
  background-image:url('http://imageshack.us/a/img10/1614/hhi3.png');
  background-repeat:repeat-y;
  width:Lpx;
  margin:auto;
  }

table.forumline{
  background-color:transparent !important;
  border:0!important;
  }

 
table.forumline td.index_cate{ 
  background-color:transparent !important;
  }

table.bas_cate{
  width:800px;
  height:43px;
  background-image:url('http://imageshack.us/a/img59/1623/6281.png');
  background-repeat:no-repeat;
  margin:auto;
  }

Je n'ai pas mis tout mon CSS, car il y en a beaucoup, mais si vous le souhaitez en pensant que l'erreur est ailleurs, je peux le rajouter.

Merci

[Anzu]

Edit: Je ne sais pas si vous aviez lu mon message avant que je l'édite, mais au cas où c'est dit  

C'est justement parce que la partie concernée est isolée du reste via un table qu'il y a un table.

Code:

<table width="100%"><tbody><tr><td><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}></td></tr></tbody></table>

remplacez par:

Code:

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

Pour centrer le cadre des sous forums, un simple center autour devrait suffire:

Code:

<span class="gensmall"><div class="cadre4">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
                 </span>

=>

Code:

<span class="gensmall"><center><div class="cadre4">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></center>
                 </span>

Pour l'entête, cette partie est en trop:

Code:

  <tr>
      <th colspan="4" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
         </tr>

ensuite, il suffit de mettre un margin bottom.

Code:

    table.haut_cate{
          width:800px;
          height:215px;
          background-image:url('http://imageshack.us/a/img35/6767/b8rw.png');
          background-repeat:no-repeat;
          margin-bottom:-50px;
          font-family: impact;
          font-size: 20px;
          color: 8A6994;
          text-shadow: 1px 1px 2px #000;
          }
        

[Oniitsuki]

Non je n'ai pas vu avant l'édite ^^".

Merci ! C'est déjà beaucoup mieux, je n'avais pas pensé au center... c'est si simple parfois. Et j'ai pu corriger le placement des titre des forum avec des margins.

Par contre je ne comprends pas pourquoi ça encadre toujours tout le forum et pas les catégorie comme sur votre forum de test... Et puis il est possible d'englober aussi les cadres à droite ? Je pensais que c'était peut-être les images qui étaient pas assez large mais les dimension du CSS réduit les tailles si c'est trop grand donc ce n'est pas ça.

Pour les titres des catégories, je crois qu'il faut replacer {catrow.tablehead.L_FORUM} dans ce code :

Code:

<table class="haut_cate"><tr valign="center"><td>{catrow.tablehead.L_FORUM}</td></tr></table>

Le problème c'est que je ne connait pas la valeur pour désigner les titres des catégories ><"... Pas faute d'avoir cherché mais je trouve surtout pour les forums mais pas catégories.

Merci

Edit : J'ai trouvé que c'était {catrow.cathead.CAT_TITLE} qu'il fallait mettre pour avoir les titres des catégories dans l'image, mais si je me fais ça donne rien et si je place les code autoure du {catrow.cathead.CAT_TITLE} déjà mis dans le template ça fait un magnifique bug de code : fond noir très étiré qui déforme tout....

[Anzu]

Ah il faut changer la hiérarchie ^^
Allez dans Affichage > Page d'accueil > Structure et Hiérarchie > Il faut choisir "moyen" et "Séparer les catégories sur l'index"

Sinon, pour que l'image prenne toute la largeur, elle n'est simplement pas assez grande.

De même pour l'image noire qui sert de fond, elles font 640px mais vous voyez bien que le forum est plus large.

[Oniitsuki]

... Je pensais l'avoir fait mais j'ai coché sur la mauvaise ligne. Merci !

Et pour les images je viens de comprendre... elles étaient à 1000px de large donc je comprenais vraiment pas ! Mais je viens de découvrir que mon hébergeur d'image m'a fait une petite farce, j'ai oublié de change les redimensions...
Je pouvais encore relire mes codes longtemps moi !

Je pense que maintenant ça ira. Je vous remercie sincèrement pour votre aide :3.