Mettre ses catégories en onglets

Page 2 sur 3 Précédent  1, 2, 3  Suivant

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

Résolu Mettre ses catégories en onglets

Message par CryingToYourHeart le Mar 20 Mar 2012 - 20:43

Rappel du premier message :

Bonjour,


J'aimerais pouvoir faire en sorte que mes catégories soient en onglets, j'ai suivis un tuto qui est très bien et qui marche, le seul problème c'est que je ne peux pas mettre les modifications déjà apportées précédemment à la nouvelle, ou du moins je ne vois pas où la mettre. J'ai utilisé ce tutoriel: http://forum.forumactif.com/t324077-categories-en-onglets?highlight=cat%E9gories+onglets

Je vous mets ci dessous mon template:
Spoiler:
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="fondcat" width="100%" border="0" cellspacing="0" cellpadding="0">

<img src="http://img11.hostingpics.net/pics/238426Sanstitre1.png" alt="" height="200px" width="846px" /><br>

      <th colspan="3" nowrap="nowrap" width="100%"> {catrow.tablehead.L_FORUM} </th>
  <!-- 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 colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <div class="cadcol"><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}>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
         
                          </span></div>
      </td>
          <td align="center" valign="top" height="50">
            <div style="width:150px";>
            <div class="cadcol" id="subforums"><span class="genmed">Navigation</span><br />{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');</script></div>
            </div>
            </td>
      <td align="center" valign="top" height="50">
                  <div style="width:150px;">
                  <div class="cadcol">
                    <span class="gensmall">{catrow.forumrow.TOPICS}sujets et {catrow.forumrow.POSTS} messages <br /><br />
                      {catrow.forumrow.LAST_POST}</span><br /><br />
                  </div>
                  <div style="margin-top:-40px;" align="center">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </div><br /></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" /><img src="http://img11.hostingpics.net/pics/838052Sanstitre2.png" alt="" height="200px" width="848px" /><br><!-- END tablefoot --><!-- END catrow -->

Merci à ceux qui voudront bien m'aider, j'espère avoir été assez clair dans mes explications au quel cas je vous expliquerais à nouveau Smile


Dernière édition par CryingToYourHeart le Ven 18 Mai 2012 - 23:52, édité 4 fois

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par CryingToYourHeart le Dim 29 Avr 2012 - 20:30

up; toujours d'actu

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par Invité le Lun 30 Avr 2012 - 10:01

Bonjour,

Malheureusement, il n'est pas toujours possible de cumuler onglets et modifications d'apparence des catégories. J'ai essayé différents codes pour les onglets avec vos modifications, mais aucun ne fonctionne Sad . Je pense qu'il va falloir faire un choix entre les onglets et l'apparence, ou bien trouver des modifications compatibles avec un système de catégories en onglets.

Invité
Invité


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

Résolu Re: Mettre ses catégories en onglets

Message par CryingToYourHeart le Lun 30 Avr 2012 - 11:29

Bonjour, ça doit être possible puisque je le voit sur différent forum et l'apparence des catégories est encore plus "complexe" que la même. Donc il doit bien y avoir un moyen, je ne voit pas encore où ça se situe mais bon :s.

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par olili.vil le Lun 30 Avr 2012 - 16:49

Je peux peut-être t'aider Wink

Mais il me faudrait le genre d'onglet que tu veux , un exemple ^^


olili.vil
Nouveau membre

Messages : 29
Inscrit(e) le : 27/04/2012

http://elysia-pensionnat.monfofo.net
olili.vil a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par CryingToYourHeart le Lun 30 Avr 2012 - 19:28

Oh merci Very Happy
Alors j'aimerais quelque chose dans ce style avec les onglets sur le côté: http://www.berkeley-u.com/

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par CryingToYourHeart le Mar 1 Mai 2012 - 19:34

up

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par CryingToYourHeart le Mer 2 Mai 2012 - 19:34

up

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par olili.vil le Jeu 3 Mai 2012 - 17:57

Pour les onglets dur le coté, je m'en excuse, je ne sais pas vraiment comment faire :s

J'en suis désolée....... Je ne sais faire que les onglets de ce style ::
http://erya.superforum.fr/

Vraiment désolé de ne pas pouvoirs vous aider sur ce point.

olili.vil
Nouveau membre

Messages : 29
Inscrit(e) le : 27/04/2012

http://elysia-pensionnat.monfofo.net
olili.vil a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par CryingToYourHeart le Jeu 3 Mai 2012 - 18:31

Ah d'accord ce n'est pas grave, je peux m'en accommoder, c'est juste que j'aime bien le style mais en dessous de la PA c'est bien aussi Smile

Pourriez-vous m'aider à les faire ainsi ?

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par CryingToYourHeart le Sam 5 Mai 2012 - 1:20

up

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par olili.vil le Sam 5 Mai 2012 - 19:24

...


Dernière édition par olili.vil le Lun 7 Mai 2012 - 17:20, édité 1 fois

olili.vil
Nouveau membre

Messages : 29
Inscrit(e) le : 27/04/2012

http://elysia-pensionnat.monfofo.net
olili.vil a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par CryingToYourHeart le Sam 5 Mai 2012 - 20:13

Bonjour, alors j'ai testé sur mon forum test et les onglets ne marchent pas :s, et en plus les modifications qui ont étés apportées à mes catégories n'apparaissent pas.

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par CryingToYourHeart le Dim 6 Mai 2012 - 20:13

up

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par olili.vil le Lun 7 Mai 2012 - 17:15

hummmm que dire il vaut mieux tout annulé

Je vais reprendre depuis le début

olili.vil
Nouveau membre

Messages : 29
Inscrit(e) le : 27/04/2012

http://elysia-pensionnat.monfofo.net
olili.vil a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par CryingToYourHeart le Lun 7 Mai 2012 - 18:03

D'accord Smile

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par CryingToYourHeart le Mar 8 Mai 2012 - 20:28

up

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par Invité le Mer 9 Mai 2012 - 4:36

Bonjour,

En reprenant le template modifié, le CSS et en bidouillant de manière malhabile un code donné par Etana, j'ai obtenu quelque chose qui fonctionne.

Le 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="" width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
      <th colspan="3" class="fondcat" nowrap="nowrap" width="100%"> {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 colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <div class="cadcol"><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}>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
       
                          </span></div>
      </td>
          <td align="center" valign="top" height="50">
            <div style="width:150px";>
            <div class="cadcol" id="subforums"><span class="genmed">Navigation</span><br />{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');</script></div>
            </div>
            </td>
      <td align="center" valign="top" height="50">
                  <div style="width:150px;">
                  <div class="cadcol">
                    <span class="gensmall">{catrow.forumrow.TOPICS}sujets et {catrow.forumrow.POSTS} messages <br /><br />
                      {catrow.forumrow.LAST_POST}</span><br /><br />
                  </div>
                  <div style="margin-top:-40px;" align="center">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </div><br /></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 --><img src="http://img11.hostingpics.net/pics/838052Sanstitre2.png" alt="" height="200px" width="848px" /><br />
La feuille CSS correspondant au templates et aux onglets:
Code:
.fondcat{
background: url('http://img11.hostingpics.net/pics/238426Sanstitre1.png');
height: 200px;
width: 846px;}
 
.cadcol{
  border: 1px solid #db7093;
  background: #db7093;
  border-radius: 20px;
  padding: 5px; margin: 5px;
  height: 80px;
  overflow-y: auto;
}
 
a.forumlink{
  display: block;
  text-align: center;
}
 
/*onglets catégories*/
#cat-onglets {
  margin: 5px auto;
  text-align: center; }
 
.co-item {
  background: #fff;
  color: #000;
  border: 1px solid  #fdf;
  display: inline;
  cursor: pointer;
  margin: 0 5px;
  padding: 3px;
  border-radius: 10px;
}

.co-item:hover{
  background: #fdf;
  border: 1px solid 000;
  color:#fff;
  display: inline;
  cursor: pointer;
  margin: 0 5px;
  padding: 3px;
  border-radius: 10px;
}
 
.co-actif {
  background: #000;
  color: #fdf;
  border:1px solid #fff; }
Et le code JS pour les onglets:
Code:
$(function(){
 
  var t;
 
  /* liste des onglets avec les catégories en faisant partie*/
  var onglets=  [
                          ["Catégorie 1",[0]],
                          ["Catégorie 2",[1]],
                          ["Catégorie 3",[2]],
                          ["Catégorie 4",[3]]];
 
 
  var getOnglet= function(s) {
      var j;
      for(j=0;j<onglets.length;j++)
        if(JSON.stringify(onglets[j])==s) return onglets[j];
      return !1;
  };
 
 
  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= true;
  /* temps pour slider en ms */
  var timeslide= 500;
 
  /* 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.fondcat").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));
  });
 
});
A mettre dans la gestion des codes javascript en cochant "Sur l'index".

Normalement, le template, plus besoin d'y toucher. Dans la feuille CSS on règle les couleur, les marges, les dimensions et dans le code JS, on place le nom des catégories et on en met le bon nombre. A savoir, on peut mettre plusieurs catégories dans un onglet, mais l'image du bas n’apparaîtra que tout en bas.

Assomé pas sure que ce soit très clair tout ça, j'espère que ça vous aidera un peu.

Bien sincèrement.

Invité
Invité


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

Résolu Re: Mettre ses catégories en onglets

Message par CryingToYourHeart le Jeu 10 Mai 2012 - 20:47

Bonjour, merci pour avoir essayer Very Happy
Je viens de le tester sur mon forum test mais ça ne marche pas :s
Les onglets ne s'affichent pas en réalité

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par CryingToYourHeart le Sam 12 Mai 2012 - 20:02

up

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par Invité le Dim 13 Mai 2012 - 15:29

Bonjour,

Je suis arrivée à ce résultat:
http://ikane-adane.forum-gratuit.net/

Est-ce ce que vous voulez?

Bien sincèrement.

Invité
Invité


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

Résolu Re: Mettre ses catégories en onglets

Message par CryingToYourHeart le Dim 13 Mai 2012 - 19:36

Bonjour,

Oui c'est bien ce que je cherche à faire depuis quelques mois déjà Very Happy

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par Invité le Dim 13 Mai 2012 - 21:15

Ok Very Happy

Donc voilà toutes les informations utiles pour que ça fonctionne:

- PA > Affichage > structure et hierarchie : Séparer les catégories sur l'index , Moyen.

- PA > Général > Catégories et forums > L'arborescence doit comprendre des catégories et des forums:


-PA > Affichage > Template > Index_box:
à remplacer intégralement par:
Code:
 <table width="100%" border="0" cellspacing="0" 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="" width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
      <td colspan="3" class="fondcat" nowrap="nowrap" width="100%"> {catrow.tablehead.L_FORUM} </td>
</tr>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" 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"></td>
      <!-- END inc -->
 
      <td class="fondfo" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <div class="cadcol"><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}>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
     
                          </span></div>
      </td>
          <td class="fondfo" align="center" valign="top" height="50">
            <div style="width:150px";>
            <div class="cadcol" id="subforums"><span class="genmed">Navigation</span><br />{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');</script></div>
            </div>
            </td>
      <td class="fondfo" align="center" valign="top" height="50">
                  <div style="width:150px;">
                  <div class="cadcol">
                    <span class="gensmall">{catrow.forumrow.TOPICS}sujets et {catrow.forumrow.POSTS} messages <br /><br />
                      {catrow.forumrow.LAST_POST}</span><br /><br />
                  </div>
                  <div style="margin-top:-40px;" align="center">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </div><br /></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><!-- END tablefoot --><!-- END catrow --><img src="http://img11.hostingpics.net/pics/838052Sanstitre2.png" alt="" height="200px" width="848px" /><br />
PA > affichage > couleurs | Feuille de style CSS:
à personnaliser Wink :
Code:
.fondcat{
background: url('http://img11.hostingpics.net/pics/238426Sanstitre1.png');
height: 200px;
width: 846px;
  text-align: center;
}

.fondfo{ background: #dfc1b5;
}
 
.cadcol{
  border: 1px solid lavender;
  background: lavender;
  border-radius: 20px;
  padding: 5px; margin: 5px;
  height: 110px;
  overflow-y: auto;
}
 
a.forumlink{
  display: block;
  text-align: center;
}
 
/*onglets catégories*/
#cat-onglets {
  padding: 5px;
  margin: 5px;
  text-align: center;
  width: 150px;
  position: absolute;
  top: 65%;
  left: 20px;
  display: block;
}
 
.co-item {
  background: #fff;
  color: #000;
  border: 1px solid  #fdf;
  cursor: pointer;
  margin: 5px;
  padding: 3px;
  border-radius: 10px;
}
 
.co-item:hover{
  background: #fdf;
  border: 1px solid 000;
  color:#fff;
  cursor: pointer;
  margin: 5px;
  padding: 3px;
  border-radius: 10px;
}
 
.co-actif {
  background: #000;
  color: #fdf;
  border:1px solid #fff; }
- PA > Modules > Gestion des codes Javascript :
Activer la gestion des codes Javascript : OUI.
créez un nouveau javascript, cochez "sur l'index" et placez:
Code:
$(function(){
 
  var t;
 
  /* liste des onglets avec les catégories en faisant partie*/
  var onglets=  [
                          ["Catégorie 1",[0]],
                          ["Catégorie 2",[1]],
                          ["Catégorie 3",[2]],
                          ["Catégorie 4",[3]]];
 
 
  var getOnglet= function(s) {
      var j;
      for(j=0;j<onglets.length;j++)
        if(JSON.stringify(onglets[j])==s) return onglets[j];
      return !1;
  };
 
 
  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= true;
  /* temps pour slider en ms */
  var timeslide= 500;
 
  /* 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" /> */
  $("td.fondcat").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));
  });
 
});
Au début du code ajoutez le nombre d'onglets nécessaire, et renommez-les à votre convenance.

Si ça ne fonctionne pas, il faudra voir du coté des autres templates modifiés, des autres codes js, voire de la feuille CSS ou même le message d'accueil, pour trouver ce qui fait conflit Wink.

Bien sincèrement.

Invité
Invité


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

Résolu Re: Mettre ses catégories en onglets

Message par CryingToYourHeart le Lun 14 Mai 2012 - 20:30

Bonjour, il me semble qu'il y a un léger problème au niveau du javascript, en effet le code ne fait pas les onglets: http://thewerewolfpack.forumgratuit.org/ , ça me donne quelque chose de bizarre :s

Et je ne vois pas vraiment d'où ça pourrait venir :s

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par CryingToYourHeart le Mar 15 Mai 2012 - 20:45

up

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par Invité le Mer 16 Mai 2012 - 20:46

Bonsoir,

Il ne reste plus qu'à trouver ce qui cloche ... peut être un conflit avec les onglets du qeel ... ou un soucis avec un template modifié overall_header ou footer ... un conflit avec un autre javascript ... il faut procéder par élimination pour trouver ce qui cloche Wink;

Bien sincèrement.

Invité
Invité


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

Résolu Re: Mettre ses catégories en onglets

Message par CryingToYourHeart le Ven 18 Mai 2012 - 20:26

Bonjour,

voudriez-vous bien m'aider à trouver d'où le problème vient ?

sincèrement

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par Invité le Ven 18 Mai 2012 - 20:59

Bonsoir,

Oui, je veux bien essayer , mais pour cela, il me faudrait votre CSS complet, vos templates Index_box, index_body, overall_header et footer, s'ils sont modifiés, et l'ensembles de vos codes javascript. ( vous pouvez placer tout ceci en caché, si vous voulez Wink ou me les envoyer par MP).

Bien sincèrement.

Invité
Invité


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

Résolu Re: Mettre ses catégories en onglets

Message par CryingToYourHeart le Ven 18 Mai 2012 - 21:23

Bonsoir, je vous ai tout envoyé à l'instant Smile

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre ses catégories en onglets

Message par Invité le Ven 18 Mai 2012 - 22:01

J'ai tout installé ... et tout fonctionne sur mon forum test Assomé vous pouvez vérifier ici . Je n'ai eu qu'un soucis, c'est avec votre panneau coulissant que je n'ai pas pu faire apparaître, j'ai repris le code du tutoriel.

Avez-vous essayé de tout remettre par défaut et réinstallé les codes un par un?

Bien sincèrement.

Invité
Invité


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

Résolu Re: Mettre ses catégories en onglets

Message par CryingToYourHeart le Ven 18 Mai 2012 - 22:16

Je me suis peut-être trompée dans le java :s

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Page 2 sur 3 Précédent  1, 2, 3  Suivant

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