Modifier un détail dans onglets catégories

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

Résolu Modifier un détail dans onglets catégories

Message par Ami-mimi le Ven 1 Fév 2013 - 22:04

Bonjour,

Je suis en train de faire du codage sur un forum d'essaie et j'ai réalisé un codage pour mon QEEl et de ce fait j'ai eu pas mal de soucis pour faire des onglets pour les catégories. Il y avait un conflit entre les onglets du QEEL, de la PA et des catégories. Mais j'y suis arrivée, avec une page javascript, le problème est que j'obtiens cela :



Et je voudrais cela (pas de débordement):



Ainsi, si quelqu'un pouvait m'aider, cela serait gé-nial ! Et je lui serais très reconnaissant!

Voici les codes que j'ai utilisée :

Template 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 --><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
          <th colspan="3" nowrap="nowrap" width="100%" align="center"  class="secondarytitle"> {catrow.tablehead.L_FORUM} </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"> </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}" /><br />
      <div class="der-m"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div></td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="bottom" width="100%" height="50">
        <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
        </h{catrow.forumrow.LEVEL}>
        <div class="descrip"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
           
        </span>
      </td>
 
      <td class="row3 over" align="center" valign="middle" height="50"><div class="sous-fo" id="subforums"><span class="gensmall">
                                  {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');</script></span></div>
       
      </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 -->

Ma page java script

Code:
$(function(){
 
  /* variable temporaire */
  var t;
 
  /* liste des onglets avec les catégories en faisant partie */
  var onglets=  [
                          ["première catégorie",[0]],
                          ["2eme catégorie",[1]],
                          ["3eme catégorie",[2]],
                          ["Tout le forum",[0, 1, 2, 3]]];
 
  /* fonction pour sélectionner un onglet d'après une string s */
  var getOnglet= function(s) {
      var j;
      for(j=0;j<onglets.length;j++)
        if(JSON.stringify(onglets[j])==s) return onglets[j];
      return !1;
  };
 
  /* fonction pour voir si un index de catégorie i est dans un onglet d */
  var inOnglets= function(d,i) {
      var j;
      for(j=0;j<d[1].length;j++)
        if(d[1][j]==i) return !0;
      return !1;
  };
 
  /* onglet sélectionné par défaut */
  var songlet= onglets[0];
  /* est-ce que l'onglet sélectionné est sauvegardé d'un affichage de l'index à l'autre */
  var save= false;
  /* temps pour slider en ms */
  var timeslide= 800;
 
  /* récupération de l'onglet sauvé d'une autre fois */
  if(save && window.localStorage)
      if(t=localStorage.getItem("onglets"))
        if(t=getOnglet(t))
            songlet= t;
 
  /* entoure les catégories d'un <div class="cat-table" /> */
  $("th.secondarytitle").closest("table").wrap('<div class="cat-table" />');
 
  /* affichage de l'onglet en cours */
  $(".cat-table").filter(function(index) {
    return !inOnglets(songlet,index);
  }).hide();
 
  /* ajout du div des onglets */
  $(".cat-table:first").before('<div id="cat-onglets"></div>');
 
  /* ajout des onglets dans le div */
  for(t=0;t<onglets.length;t++)
  {
      $("#cat-onglets").append('<div class="co-item'+(onglets[t]==songlet?' co-actif':'')+'">'+onglets[t][0]+'</div>');
  }
 
  /* clic sur un onglet */
  $("#cat-onglets .co-item").click(function(){
      $("#cat-onglets .co-actif").removeClass("co-actif");
      $(this).addClass("co-actif");
      var o= onglets[$("#cat-onglets .co-item").index(this)];
      $(".cat-table").not($(".cat-table").filter(function(index) {
        return inOnglets(o,index);
      }).slideDown(timeslide)).slideUp(timeslide); 
      if(save && window.localStorage) localStorage.setItem("onglets",JSON.stringify(o));
  });
 
});

Mon CSS

Code:
/*onglets catégories*/
#cat-onglets {
  margin: 5px auto;
  text-align: center; }
 
.co-item {
  background: #000;
  color: #fdf;
  border: 1px solid  #fdf;
  display: inline;
  cursor: pointer;
  margin: 0 5px;
  padding: 3px;
  border-radius: 10px;
}
 
.co-item:hover{
  background: #fff;
  border: 1px solid #fff;
  color:#000;
  display: inline;
  cursor: pointer;
  margin: 0 5px;
  padding: 3px;
  border-radius: 10px;
}
 
.co-actif {
  background: #fdf;
  color: #000;
  border:1px solid #000; }

Voila, je tiens encore à vous remercier d'avance et j'espère que vous pourrez m'aider ^_^



Dernière édition par Ami-mimi le Jeu 7 Fév 2013 - 23:41, édité 1 fois

Ami-mimi
****

Messages : 207
Inscrit(e) le : 14/11/2010

http://tadakai-rpg.forumgratuit.fr
Ami-mimi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier un détail dans onglets catégories

Message par Matriochka le Sam 2 Fév 2013 - 10:03

Bonjour,

Quel est l’URL du forum concerné ?

Là comme ça, je dirai qu’il faut modifier la marge attribuée ici (l’augmenter de 5 pixels vers une valeur supérieure) :
Code:
#cat-onglets {
  margin: 5px auto;
  text-align: center; }

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Modifier un détail dans onglets catégories

Message par Ami-mimi le Sam 2 Fév 2013 - 10:32

Tout d'abord merci de votre réponse, cependant pour la marge cela ne fonctionne pas, j'avais déjà essayée de même faire une marge bottom...mais sans effet.

Alors en plus il y a un nouveau problème (ça ne faisait pas ça dans l'apperçu du template =S)->



Voir par vous-même sur le fofo :

http://essais-graph.forumactif.fr/

PS: Si vraiment vous ne trouvez pas...j’enlèverais les onglets..mais bon c'est dommage...ce n'est pas la première fois que je fais des onglets et ça fonctionnait très bien jusqu'à présent, le hic c'est que je n'ai jamais fais avec une page java...

Merci de votre future réponse

Ami-mimi
****

Messages : 207
Inscrit(e) le : 14/11/2010

http://tadakai-rpg.forumgratuit.fr
Ami-mimi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier un détail dans onglets catégories

Message par Matriochka le Sam 2 Fév 2013 - 10:40

Avec ceci, ça devrait fonctionner :
Code:
#cat-onglets {
margin-top: 10px;
margin-bottom: 10px;}
J’ai testé directement sur ton forum et chez moi, ça créé bien une marge.

Concernant le nouveau problème, je vais voir…

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Modifier un détail dans onglets catégories

Message par Ami-mimi le Sam 2 Fév 2013 - 14:29

Chez moi, ça ne fonctionne toujours pas... je commence à désespérer =(((
POurtant j'ai exactement mis ce que vous m'avez fourni, mais sans résultat..il y a toujours un débordement =(


Merci de prendre du temps pour moi en tout cas Smile

Ami-mimi
****

Messages : 207
Inscrit(e) le : 14/11/2010

http://tadakai-rpg.forumgratuit.fr
Ami-mimi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier un détail dans onglets catégories

Message par Matriochka le Sam 2 Fév 2013 - 18:27

Inutile de désespérer, on va bien trouver une solution Smile

As-tu essayé d’augmenter la valeur de 10 pixels vers une valeur supérieure ?

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Modifier un détail dans onglets catégories

Message par Ami-mimi le Sam 2 Fév 2013 - 19:13

C'est surtout que je vous fais perdre du temps inutilement =(
Oui j'ai essayée =S C'est pareil..


Concernant le "nouveau" problème, est-ce que vous avez une idée d'où cela peut venir?


Dernière édition par Ami-mimi le Sam 2 Fév 2013 - 19:17, édité 1 fois

Ami-mimi
****

Messages : 207
Inscrit(e) le : 14/11/2010

http://tadakai-rpg.forumgratuit.fr
Ami-mimi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier un détail dans onglets catégories

Message par Matriochka le Sam 2 Fév 2013 - 19:16

Ah mais moi je suis là pour ça, j’ai beaucoup de temps à donner pour aider, donc il n’y a pas à s’en faire Razz

Est-ce que tu pourrais m’envoyer ta feuille de styles complète ? Je me demande si tu n’as pas un code qui fait conflit avec celui que je te donne… J’ai essayé sur mon forum de test avec tes codes (JavaScript, CSS et template), et les marges fonctionnent bien.


Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Modifier un détail dans onglets catégories

Message par Ami-mimi le Sam 2 Fév 2013 - 19:20

Lol c'est gentil ^_^
Par contre ça va être difficile de vous donner le CSS car il est très long et malheureusement je ne peux pas l'envoyer dans un seul message même dans les balises code car j'ai un message qui me dit que le message envoyé a dépassé la limite autorisée....erf

De ce fait, seule solution, je vous ai envoyé un MP dans lequel figure le CSS 'normalement' dans les balises code...Mais vraiment désolé d'avance pour la longueur...

Je ne sais pas pourquoi il est si long ... c'est le CSS original du forum avec quelques rajouts de ma part...mais pour un CSS il est très long..je pense qu'il y a pas mal de trucs inutiles >3< Il n'y a pas possibilité de supprimer des choses dans tout ce bazard ? xD

Ami-mimi
****

Messages : 207
Inscrit(e) le : 14/11/2010

http://tadakai-rpg.forumgratuit.fr
Ami-mimi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier un détail dans onglets catégories

Message par Matriochka le Sam 2 Fév 2013 - 19:42

Dans ton CSS, retire "FIN CSS NORMAL" Wink

Si tu veux mettre des commentaires dans ton CSS, il faut les mettre ainsi :
Code:
/* FIN CSS NORMAL */
Si tu ne mets pas ces mentions /* et */, ça créé des conflits dans ton CSS et ça empêche certains codes de fonctionner. Voilà ce qui empêche les marges de fonctionner Razz

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Modifier un détail dans onglets catégories

Message par Ami-mimi le Sam 2 Fév 2013 - 19:56

Yeah!!!! Youpi merkii =^_^= c'était si bête xD et pour le second problème du coup, pas d'idées d'où ça pourrait venir?

Ami-mimi
****

Messages : 207
Inscrit(e) le : 14/11/2010

http://tadakai-rpg.forumgratuit.fr
Ami-mimi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier un détail dans onglets catégories

Message par Matriochka le Sam 2 Fév 2013 - 19:59

Est-ce qu’il y a bien un message posté dans tes forums ? S’il n’y en a pas, c’est normal que ça n’apparaisse pas.

Sinon, je pense que ça vient de ton template, dont la structure a complètement été modifiée. Tu voudrais retrouver la structure initiale ou bien faire quelque chose d’un peu plus personnalisé ?

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Modifier un détail dans onglets catégories

Message par Ami-mimi le Sam 2 Fév 2013 - 20:01

Alors effectivement je préférerais quelque chose d'un peu plus personnel si c'est possible bien sûr! Smile Par contre heu j'ai posté un sujet pour voir ce que cela donne et...ça fait un truc bizarre xD

Voir sur le fofo -> http://essais-graph.forumactif.fr/

Donc je pense qu'en effet cela vient de la structure du template >3< mais le hic c'est que je suis une bille concernant ce template... autant l'index_box je m'en sors..mais celui-là ^^" c'est panique à bord ><

Ami-mimi
****

Messages : 207
Inscrit(e) le : 14/11/2010

http://tadakai-rpg.forumgratuit.fr
Ami-mimi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier un détail dans onglets catégories

Message par Matriochka le Sam 2 Fév 2013 - 20:04

En effet, ça m’a l’air d’être un peu le foutoire dans ce template Razz

Si tu as une idée de ce que tu veux, fais-moi un schéma bref et je t’aiderai à le réaliser sur le template ^^

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Modifier un détail dans onglets catégories

Message par Ami-mimi le Sam 2 Fév 2013 - 20:10

Oh merci c'est très gentil ! *o* Oui mais ce n'est pas moi qui a réalisé ce template.... et il est vrai que je m'en suis très bien sortie avec mon template index_body pour ma PA ou mon QEEL mais..je trouve que dans ce cas c'était assez simple mais là..j'ai un peu peur..je panique..

Alors un exemple de ce que je trouvais jolie, mais après je pense que c'est assez long à réalisé donc je veux pas abuser..

C'était ça -> http://graph-kawaii.forumactif.biz/forum

Ou du moins un truc dans ce style...après je peux bien évidemment vous faire un schéma Smile

Ici je présume qu'il faut faire des tableaux avant tout...

Ami-mimi
****

Messages : 207
Inscrit(e) le : 14/11/2010

http://tadakai-rpg.forumgratuit.fr
Ami-mimi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier un détail dans onglets catégories

Message par Matriochka le Sam 2 Fév 2013 - 20:28

Donc en gros, sans reprendre le style même du forum que tu montres (car c’est bien évidemment interdit), ça ferait trois colonnes avec :
1) le dernier message posté et l’image du statut
2) la description du forum
3) les sous-forums

?

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Modifier un détail dans onglets catégories

Message par Ami-mimi le Sam 2 Fév 2013 - 20:32

Oui oui je demande pas de recopier bien sûr juste que c'est un peu cette idée de structure que je voudrais ^_^ et oui c'est bien ça

Trois colonnes comme je le pensais ^^ avec :
○Le dernier message posté et l’image du statut
○La description du forum
○Les sous-forums

Après voila, je sais très bien qu'on va devoir créer un tableau etc mais comme je l'ai dis plus haut...ce template ne m'est pas aussi familier que L'index_body donc c difficile pour moi ^^ surtout qu'il faut quand même garder la base du template car sinon je n'aurais plus les onglets xD Mais c'est vrai que j'ai envie de comprendre aussi Smile

Ami-mimi
****

Messages : 207
Inscrit(e) le : 14/11/2010

http://tadakai-rpg.forumgratuit.fr
Ami-mimi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier un détail dans onglets catégories

Message par Matriochka le Sam 2 Fév 2013 - 21:02

Pas de souci, ne t’inquiète pas, je vais t’aider pas à pas.

Donc, sachant qu’on va devoir faire un tableau, il faut garder à l’esprit qu’on va commencer avec une base dans ce genre :
Code:
<table width="100%">
  <tr>
    <td>Première colonne : Dernier message + image</td>
    <td>Deuxième colonne : Description du forum</td>
    <td>Troisième colonne : Sous-forums</td>
  </tr>
</table>
Un tableau, une ligne, trois colonne. Basique Smile

Ce qui peut devenir difficile, c’est en effet le côté technique du template. Pour ça, je vais donc te présenter brièvement les variables qu’on va toucher.

Donc, dans la première colonne, on devrait retrouver ces deux-là :
Code:
{catrow.forumrow.LAST_POST}
= Permet d’afficher les trois lignes "Dernier message" (le titre du sujet, la date et l’auteur)

Code:
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
= Permet d’afficher l’image du statut du forum (Nouveau message, pas de nouveau message, forum verrouillé)

Dans la seconde colonne ensuite :
Code:
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
= Permet d’afficher le nom du forum et le lien de celui-ci
Code:
<div class="descrip"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
= Permet d’afficher la description du forum

Et enfin, dans la troisième colonne :
Code:
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
= Permet d’afficher les liens vers les sous-forums

Voilà, donc si tu as compris tout ça, on va pouvoir commencer à modeler notre template Smile N’hésite pas à poser des questions si tu sens que tu commences à perdre le fil, l’important c’est que tu puisses comprendre ce que tu fais pour ne pas copier / coller bêtement quelque chose.

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Modifier un détail dans onglets catégories

Message par Ami-mimi le Sam 2 Fév 2013 - 21:05

Ouki donc jusqu'à là j'ai compris x) Oui façon je veux comprendre je suis là aussi pour m'améliorer ^^

Donc je suis prête pour entendre la suite xD

Ami-mimi
****

Messages : 207
Inscrit(e) le : 14/11/2010

http://tadakai-rpg.forumgratuit.fr
Ami-mimi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier un détail dans onglets catégories

Message par Matriochka le Sam 2 Fév 2013 - 21:43

Parfait si tu as compris, on va attaquer (du coup, ça devient plus qu’un "détail dans les onglets") Razz

Donc alors, on va commencer par installer notre base à la place de l’existant. Dans le template que tu as actuellement, tu sélectionnes toute cette partie :
Code:
      <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"> </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}" /><br />
      <div class="der-m"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div></td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="bottom" width="100%" height="50">
        <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
        </h{catrow.forumrow.LEVEL}>
        <div class="descrip"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
         
        </span>
      </td>
 
      <td class="row3 over" align="center" valign="middle" height="50"><div class="sous-fo" id="subforums"><span class="gensmall">
                                  {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');</script></span></div>
     
      </td>
Et tu la remplaces par les colonnes qu’on a définies tout à l’heure :
Code:
<td>Première colonne : Dernier message + image</td>
    <td>Deuxième colonne : Description du forum</td>
    <td>Troisième colonne : Sous-forums</td>

Une fois qu’elles seront installées dans ton template, on pourra partir sur une base vierge et les remplir en utilisant les variables que je t’ai expliquées dans mon précédent message.

Donc concrètement :
Première étape : on créé nos colonnes
Étape à venir : on place nos variables à l’intérieur des colonnes

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Modifier un détail dans onglets catégories

Message par Ami-mimi le Sam 2 Fév 2013 - 22:26

Alors j'ai trouvé la partie à supprimer et je l'ai remplacé mais... apparament il y a une balise qui n'est pas fermé.. car le forum me dit :



Donc mon template à présent ressemble à ça :

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="0" cellpadding="0">
  <tr>
          <th colspan="3" nowrap="nowrap" width="100%" align="center"  class="secondarytitle"> {catrow.tablehead.L_FORUM} </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 -->
    <table width="100%">
  <tr>
    <td>Première colonne : Dernier message + image</td>
    <td>Deuxième colonne : Description du forum</td>
    <td>Troisième colonne : Sous-forums</td>
  </tr>
</table>
  </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 -->

J'ai essayée de chercher le problème mais je ne vois pas de soucis de balises oO

Ami-mimi
****

Messages : 207
Inscrit(e) le : 14/11/2010

http://tadakai-rpg.forumgratuit.fr
Ami-mimi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier un détail dans onglets catégories

Message par Matriochka le Dim 3 Fév 2013 - 10:15

Voilà la correction :
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="0" cellpadding="0">
  <tr>
          <th colspan="3" nowrap="nowrap" width="100%" align="center"  class="secondarytitle"> {catrow.tablehead.L_FORUM} </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"> </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>Première colonne : Dernier message + image</td>
    <td>Deuxième colonne : Description du forum</td>
    <td>Troisième colonne : Sous-forums</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 -->

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Modifier un détail dans onglets catégories

Message par Ami-mimi le Dim 3 Fév 2013 - 18:34

Oki ! donc là ça fonctionne, juste pour savoir d'où venait le soucis? j'ai vu que tu as espacés mais bon.

Désolé de ne pas avoir pû venir avant, j'avais des invités chez moi x)

Donc pour le moment ça fonctionne ^^

Ami-mimi
****

Messages : 207
Inscrit(e) le : 14/11/2010

http://tadakai-rpg.forumgratuit.fr
Ami-mimi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier un détail dans onglets catégories

Message par Ami-mimi le Jeu 7 Fév 2013 - 0:31

Coucou!

Juste pour te tenir au courant, que j'ai finie les travaux de mon côté, voici le résultat :




Bien sûr si tu as travaillé de ton côté dessus, je veux bien voir Wink
J'ai juste peu être une dernière question, qui n'est pas vraiment en rapport, mais quel est le code html, qui rend un background image qui ne se répéte pas? C'est pour un fond d'un template Smile

Voila, je te remercie de ton aide ^_^

Ami-mimi
****

Messages : 207
Inscrit(e) le : 14/11/2010

http://tadakai-rpg.forumgratuit.fr
Ami-mimi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier un détail dans onglets catégories

Message par Matriochka le Jeu 7 Fév 2013 - 17:51

Re,

Désolée, je n’ai pas trouvé le temps de me pencher sur ton template, mais tu as bien travaillé, tu as réussi à arriver à ce que tu voulais, on dirait ? Smile

Concernant ta question, c’est ce code à insérer dans le CSS :
Code:
background-repeat:no-repeat;

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Modifier un détail dans onglets catégories

Message par Ami-mimi le Jeu 7 Fév 2013 - 19:33

Oui j'ai réussie à avoir ce que je voulais =) Mais concernant ma question, en fait désolé je devais mal m'exprimer mais j'ai trouvée toute seule réponse à ma question x)

Par contre, juste une dernière petite question et j'arrête de t'embêter xD

Voila en fait je voulais savoir si c'était possible de mettre les liens des sous-forums en colonne si possible, comme ça :



Après je sais pas si c'est possible >//<


Dernière édition par Ami-mimi le Jeu 7 Fév 2013 - 21:19, édité 1 fois

Ami-mimi
****

Messages : 207
Inscrit(e) le : 14/11/2010

http://tadakai-rpg.forumgratuit.fr
Ami-mimi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier un détail dans onglets catégories

Message par Matriochka le Jeu 7 Fév 2013 - 19:36

Comme ceci :
Code:
<td width=60% style="background-repeat:no-repeat;background-image: url(http://sd-6.archive-host.com/membres/images/bf232948713778e4410e08bbc844a14afec26227/fonddescr.png);" align="center">
?

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Modifier un détail dans onglets catégories

Message par Ami-mimi le Jeu 7 Fév 2013 - 21:20

Oups désolé j'avais trouvée toute seule en fait réponse à ma question mais merci, mon code était donc bon ^^ ouf

Et par contre comme je dis plus haut, est-ce possible de modifier l'alignement des sous-forums et de les mettre comme ça ->



Merci ^^

Ami-mimi
****

Messages : 207
Inscrit(e) le : 14/11/2010

http://tadakai-rpg.forumgratuit.fr
Ami-mimi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier un détail dans onglets catégories

Message par Matriochka le Jeu 7 Fév 2013 - 21:26

Oui c'est possible. Dans ton template, tu ajoutes un id sur la cellule :
Code:
<td width=60% style="background-repeat:no-repeat;background-image: url(http://sd-6.archive-host.com/membres/images/bf232948713778e4410e08bbc844a14afec26227/fonddescr.png);" align="center" id="sub_forums">

Puis dans ton CSS, tu ajoutes ceci :
Code:
#sub_forums a {
display:list-item;
list-style:none;}

Et pour retirer la virgule entre les deux, tu as un topic ici :
http://forum.forumactif.com/t342432-retirer-la-virgule-des-sous-forums

Voilà Very Happy

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Modifier un détail dans onglets catégories

Message par Ami-mimi le Jeu 7 Fév 2013 - 22:11

Merci bien, sujet entièrement résolu ! =)

Au final c'était pas bien compliqué et grâce à toi j'ai pû apprendre à maitriser le template index-box, celui qui me faisait si peur =O

Je te remercie ! *Gros câlin* cat

Ami-mimi
****

Messages : 207
Inscrit(e) le : 14/11/2010

http://tadakai-rpg.forumgratuit.fr
Ami-mimi a été remercié(e) par l'auteur de ce sujet.

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


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