comment concevoir des boutons au dessus des catégories, qui renverraient sur les catégories

3 participants

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

Résolu comment concevoir des boutons au dessus des catégories, qui renverraient sur les catégories

Message par Invité Ven 29 Déc 2017 - 19:14

Détails techniques


Version du forum : Invision
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://pourpalier.forumactif.org/

Description du problème

Bonsoir,
J'aimerai savoir comment concevoir des boutons qui renverraient sur les catégories de mon forum.Je précise quand même qu'il serait bien de tout m'expliquer points par points car je ne suis pas très douée Embarassed
Je vous remercie par avance Smile
Anonymous

Invité
Invité


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

Résolu Re: comment concevoir des boutons au dessus des catégories, qui renverraient sur les catégories

Message par Invité Sam 30 Déc 2017 - 14:52

Up!
Anonymous

Invité
Invité


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

Résolu Re: comment concevoir des boutons au dessus des catégories, qui renverraient sur les catégories

Message par _Ayno Sam 30 Déc 2017 - 15:52

Bonjour,

pouvez-vous être plus précis? Screenshots ? Croquis ?
_Ayno

_Ayno
***

Messages : 127
Inscrit(e) le : 29/10/2017

http://second-monde.probb.fr
_Ayno a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment concevoir des boutons au dessus des catégories, qui renverraient sur les catégories

Message par Invité Dim 31 Déc 2017 - 8:17

Bonjour et merci d'être intervenu.
Je vous avoue que ces mots sont des noms scientifiques méconnus de mon répertoire  Gloups Mdr
Je souhaiterai qu'il y est indiqué ('En liens direct): MUSIQUE-ESPACE DÉTENTE-JEUX-HUMOUR-DÉBATS-SUJETS DE SOCIÉTÉ-POLITIQUE etc...
Entre l'image de mon forum et les forums (et) ou catégories si possible  reflexion
Anonymous

Invité
Invité


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

Résolu Re: comment concevoir des boutons au dessus des catégories, qui renverraient sur les catégories

Message par Invité Dim 31 Déc 2017 - 8:51

Un peu comme cet exemple surligné en jaune comment concevoir des boutons au dessus des catégories, qui renverraient sur les catégories Captur10
Anonymous

Invité
Invité


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

Résolu Re: comment concevoir des boutons au dessus des catégories, qui renverraient sur les catégories

Message par Invité Lun 1 Jan 2018 - 17:50

Up Embarassed
Anonymous

Invité
Invité


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

Résolu Re: comment concevoir des boutons au dessus des catégories, qui renverraient sur les catégories

Message par silas88 Lun 1 Jan 2018 - 20:03

Templates : Général > overall_header

au dessus de la ligne où il y a {GENERATED_NAV_BAR} colle (esperant que ça soit bien une div ^^)
Code:

<div id="submenu2">
  <ul>
    <li>
      <a class="mainmenu2" href="#">MUSIQUE</a>
      <a class="mainmenu2" href="#">ESPACE DÉTENTE</a>
      <a class="mainmenu2" href="#">JEUX</a>
      <a class="mainmenu2" href="#">HUMOUR</a>
      <a class="mainmenu2" href="#">DÉBATS</a>
    </li>
  </ul>
</div>

en css :
Code:

#submenu2 ul{
  text-align: center;
  list-style: none;
}
 
#submenu2 .mainmenu2{
  margin-top:25px;
  background: #e4d6e8;
  display:inline-block;
  padding :5px 15px;
  color: #000;
  white-space: normal !important;
  text-align: left;
}
 
#submenu2 ul li a {
  text-decoration: none;
  cursor:pointer;
}

screen : https://screenshots.firefoxusercontent.com/images/3892f5a9-b629-4417-9ab2-7bb746d38812.png

NB : il n'y a pas de changement (hover) quand l'on passe la souris sur le lien
avatar

silas88
*

Masculin
Messages : 37
Inscrit(e) le : 04/04/2010

http://s4-rnc.forumactif.com/forum
silas88 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment concevoir des boutons au dessus des catégories, qui renverraient sur les catégories

Message par Invité Lun 1 Jan 2018 - 20:08

hello By-sweety,
tout d'abord bonne année 2018 Wink .

silas88 , ton code html ne sert pas à grand chose car aucun lien n'est renseigné Wink .


L'astuce est postée sur mon fofo mais , je vais te la donner Wink .
As tu déjà modifié ton template index_box:
Affichage/Templates/Général/index_box

Dans le cas d'une réponse négative,
édites le en cliquant sur  edit .
Supprimes tout le contenu et dépose celui-ci:
Code:

<!-- Container des onglets -->
<ul id="tab" class="tab_container"></ul>
<!-- BEGIN catrow -->
 <!-- BEGIN tablehead -->
    <!-- Ajout des onglets -->
    <script>
       jQuery(function($){
          $('.tab_container').append("{catrow.tablehead.L_FORUM}");
          $('#tab').html($('#tab').html().replace(/h2/g, 'li'));
       });
    </script>
    <div class="forum_container">
 <div class="borderwrap">
 <div class="maintitle floated clearfix">
 {catrow.tablehead.L_FORUM}
 <div class="contract" id="b{catrow.tablehead.ID}" onclick="toggleCategory('{catrow.tablehead.ID}');">
 &nbsp;&nbsp;&nbsp;
 </div>
 </div>

 <table cellpadding="0" cellspacing="0" id="{catrow.tablehead.ID}" class="ipbtable index-box">
 <thead>
 <tr>
 <th class="forum">{L_FORUM}</th>
 <th class="topics">{L_TOPICS}</th>
 <th class="replies">{L_POSTS}</th>
 <th class="last post-info">{L_LASTPOST}</th>
 </tr>
 </thead>
 <tfoot>
 <tr>
 <td colspan="4">

 </td>
 </tr>
 </tfoot>
 <tbody>
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
 <tr>
 <td class="row2 icon" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
 <span class="status clearfix" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icon" />
 </span>
 <div class="par forum-name">
 <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
 <p class="forum-desc">{catrow.forumrow.FORUM_DESC}</p>
 </div>
 <!-- BEGIN switch_moderators_links -->
 <div class="mods">
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 </div>
 <!-- END switch_moderators_links -->
 <p>
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
 </p>

 </td>
 <td class="row1 centered">{catrow.forumrow.TOPICS}</td>
 <td class="row2 centered">{catrow.forumrow.POSTS}</td>
 <td class="row1">
                        <!-- BEGIN ads -->
                        <span class="AD_LastPA">
                            <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                            <span class="AD_LastInfos">
                                <b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b><br />
                                {catrow.forumrow.ads.DATE}<br />
                                {catrow.forumrow.ads.LOCATION}
                            </span>
                        </span>
                        <!-- END ads -->
                        <!-- BEGIN avatar -->
                        <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                        <!-- END avatar -->

 <span>
 <!-- BEGIN switch_topic_title -->
 <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
 <!-- END switch_topic_title -->
 {catrow.forumrow.USER_LAST_POST}
 </span>
 </td>
 </tr>
 <!-- END forumrow -->

 <!-- BEGIN tablefoot -->
 </tbody>
 </table>
 </div>
 <br />
      </div>
 <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<div class="toplinks linklist clearfix">
 <ul>
 <!-- BEGIN switch_delete_cookies -->
 <li><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
 <!-- END switch_delete_cookies -->
 <!-- BEGIN switch_user_logged_in -->
 <li class="last"><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
 <!-- END switch_user_logged_in -->
 </ul>
</div>
<!-- END switch_on_index -->
    <script>
       jQuery(function($){
          $('.forum_container').each(function(index){
             $(this).attr('id', 'c'+(index+1));
          });


          $('#tab li').each(function(index){
             $(this).addClass('tabs');
             $(this).contents().wrap('<a href="#c'+(index+1)+'" title="'+$(this).html()+'"></a>');

             if(!sessionStorage.getItem('active-cat') || $(sessionStorage.getItem('active-cat')).length != 0){
                $('#tab li').eq(0).addClass('active');
                $('#c1').show();
             }else{
                $('a[href="'+sessionStorage.getItem('active-cat')+'"]').closest('li').addClass('active');
                $(sessionStorage.getItem('active-cat')).show();
             }


             $(this).find('a').click(function(event){
                event.preventDefault();
                var target = $(this).attr('href');
                sessionStorage.setItem('active-cat', target);
                $(this).parent().siblings('.tabs').removeClass('active');
                $(this).parent().addClass('active');
                $(target).show().siblings('.forum_container').hide();
             });
          });

          if(location.pathname != '/'){
             $('#tab').remove();
          };
       });
    </script>
    <style>.forum_container{ display: none; } #tab li{ list-style: none; }</style>




Penses à enregistrer puis à valider en cliquant respectivement sur  :enreg: puis comment concevoir des boutons au dessus des catégories, qui renverraient sur les catégories 824052533


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:

    /*La barre des onglets*/
    ul#tab.tab_container {
       background:#FAFAFA;
       border-bottom:1px solid #CCC !important;
       width:auto;
       height: 30px;
    }
    /*Les onglets des categories*/
    ul#tab.tab_container li {
       float:left !important;
       margin-left: 5px;
    }
    /*Les liens des categories*/
    ul#tab.tab_container li a {
       text-decoration:none !important;
       color:#39C;
       font-size:12px;
       font-weight:bold;
       font-family:"Trebuchet MS",Arial,Verdana,Sans-serif;
       background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 30px;
       display:inline-block;
       padding:0 10px;
       height:30px;
       line-height:30px;
       transition: 200ms;
    }
    /*L effet au survol des liens de categories*/
    ul#tab.tab_container li a:hover {
       background-position: 0 25px;
    }
    /*L onglet actif*/
    ul#tab.tab_container li.tabs.active {
       border-top: 4px solid #71be47;
    }


Penses à cliquer sur le bouton comment concevoir des boutons au dessus des catégories, qui renverraient sur les catégories 3060548200



Et voilou , tu auras sur l'index de ton forum une barre au dessus de ta première catégorie qui affichera le titre de chaque catégories de ton forum et au clic affichera celle concernée Wink .



a++
Anonymous

Invité
Invité


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

Résolu Re: comment concevoir des boutons au dessus des catégories, qui renverraient sur les catégories

Message par Invité Lun 1 Jan 2018 - 20:27

Bonsoir et meilleurs vœux à vous ..::fete::
Je vous remercie pour vos interventions, vraiment sympa! cheers
J'ai essayée les deux façons, je vais voir celle qui me convient le mieux..Vraiment merci pour votre aide Very Happy
Anonymous

Invité
Invité


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

Résolu Re: comment concevoir des boutons au dessus des catégories, qui renverraient sur les catégories

Message par silas Lun 1 Jan 2018 - 20:47

Je pense que la seconde est plus adaptée [smiley]https://2img.net/i/fa/i/smiles/icon_wink.gif[/smiley]

Edit : j'ai pas renseigné les liens pour il/elle les met ainsi que les autres lien si il/elle veut en ajouter d'autres
avatar

silas
Nouveau membre

Masculin
Messages : 23
Inscrit(e) le : 29/07/2006

https://Infinitas.forumactif.com
silas a été remercié(e) par l'auteur de ce sujet.

Résolu Re: comment concevoir des boutons au dessus des catégories, qui renverraient sur les catégories

Message par Invité Lun 1 Jan 2018 - 21:40

C'est très sympa, vous êtes doués thumleft

La version de milouze est bien mais la taille est petite et on ne voit plus les forums lorsque nous sommes déconnectés.Je vais vous paraitre un peu, voir même beaucoup ennuyeuse :oops:pour ne pas dire chiante... Mais il y a t-il possibilité d'agrandir les liens et de voir tous les forums lorsque nous sommes hors ligne?
Anonymous

Invité
Invité


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

Résolu Re: comment concevoir des boutons au dessus des catégories, qui renverraient sur les catégories

Message par Invité Mar 2 Jan 2018 - 4:49

Hello By-sweety,

Mais il y a t-il possibilité d'agrandir les liens
Tu peux augmenter la taille de police en modifiant la valeur 12 ici:
Code:

 /*Les liens des categories*/
      font-size:12px;
on ne voit plus les forums lorsque nous sommes déconnectés

Le script ne désactive rien chère amie Wink .

a++
Anonymous

Invité
Invité


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

Résolu Re: comment concevoir des boutons au dessus des catégories, qui renverraient sur les catégories

Message par Invité Mar 2 Jan 2018 - 9:15

Bonjour je me suis mal exprimée.En fait, sur l'index nous ne voyons que le forum sur lequel nous cliquons et non l’intégralité des forums avec les titres..J'ai désactivée les codes pour le moment car les membres sont un peu perdus je peux mettre que mon soucis est résolu et mille merci à vous résolu Smile
Anonymous

Invité
Invité


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