Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[PHPBB2] Modification de la page d'accueil mettre des catégories en onglet

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

soleda
soleda
https://www.tutorielgraphismepfs.com/

Messagesoleda Lun 13 Aoû 2018 - 11:12

Bonjour j'aimerais tenter de mettre les catégorie de ma page d'accueil de mon forum en onglet en gardant les couleurs du forum j'ai bien vu des modifications à faire dans le forum mais je n'ai pas tout compris d'autre part le Template index box et css est déjà modifié ce qui me pose problème. Je ne suis pas experte en la matière je viens encore demander de l'aide. Toutes mes excuses pour le dérangement et un grand merci d'avance . je ne sais pas si ça a une influence mais je navigue sous chrome...
je vous donne le Template modifier.j'ai coché( Forcer les Template par défaut :oui)/Structure de forum il est en complet.
 Oui Non)
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="1" cellpadding="0">
 <tr>
 <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
 <th nowrap="nowrap" width="50">{L_TOPICS}</th>
 <th nowrap="nowrap" width="50">{L_POSTS}</th>
 <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></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">&nbsp;</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}" />
 </td>
 <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" 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}>
 <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 -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 </span>
 </td>
 <td class="row3" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.TOPICS}</span>
 </td>
 <td class="row2" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.POSTS}</span>
 </td>
 <td class="row3 over" align="center" valign="middle" height="50">
            <!-- 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 -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
 </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 -->

Le css modifier

Code:
/*********************************************CONTOUR CATEGORIES*/
.forumline
{
max-width: 1100px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
margin-top: 10px;
border: 2px dotted #000000;
border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
-htm-border-radius: 10px;
box-shadow: 0px 0px 4px #000000;
-moz-box-shadow: 0px 0px 4px#000000;
-o-box-shadow: 0px 0px 4px# #000000;
-webkit-box-shadow: 0px 0px 4px#000000;
-htm-box-shadow: 0px 0px 4px #000000;
}
/*********************************************FIN CONTOUR CATEGORIES*/
.signature_div img {
  max-height:150px;
  max-width:400px;
}
.postprofile {
width: 150px;
}
  
tr.post span.postdetails.poster-profile a[href^="/u"] img{
height:150px !important;
width:150px !important;
}  
#notif_unread.M14_NotiF_blink
{
color:Yellow !important;


}padding: 20px 30px 10px 10px;

/*Le bouton pour l ouverture de la fenetre*/
.M14_open_Body
{
width: 16px;
height: 16px;
right: 10px;
float: right;
cursor:pointer;
}
/*Le bouton pour la fermeture de la fenetre*/
.M14_close_Body
{
position: absolute;
width: 16px;
height: 16px;
top: 10px;
right: 10px;
cursor:pointer;
}
/*On place les transitions sur les messages*/
.postbody
{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*La fenetre agrandie*/
#M14_Effet_body.postbody
{
/*On donne une position relative*/
position: relative;
/*On demande une marge negative a gauche pour la correction de la fenetre*/
left:-80px;
/*La couleur de fond*/
background: white;
/*La couleur de police*/
color:black;
/*La taille de police*/
font-size:14px;
/*On donne un espace conséquent si besoin peut etre supprime*/
padding: 20px 30px 10px 10px;
/*on agrandit sur la largeur et la hauteur sur la plupart des navigateurs*/
-ms-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
  /*la couleur de bordure*/
border:2px solid #006699;
  /*Les bordures arrondies sur la plupart des navigateurs*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* REPONSE AUTOMATIQUE */
    /*Auteur du sujet*/
    a.M14_Auteur
    {
    margin-left:5px;
    text-decoration:none !important;  
    }
    /*Avatar*/
    img.M14_Avatar
    {
    max-width:100px;
    max-height:100px;
    }
    /*Le corps du message*/
    #M14_postbody
    {
    font-style:italic;
    font-size:13px;
    color:green;
    }


Lien du forum https://www.tutorielgraphismepfs.com/ / Version PHPBB2

Et encore un grand merci bonne journée (ps suis pas pressé) coucou


Dernière édition par soleda le Lun 13 Aoû 2018 - 19:09, édité 1 fois
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 13 Aoû 2018 - 18:13

Hello Soleda,
il y a cette astuce pour les catégories en onglets:

https://www.milouze14.com/t29165-toutes-versions-categories-a-onglets#559057

Ton template modifié:
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>
<!-- 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">

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
    <tr>
    <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
    <th nowrap="nowrap" width="50">{L_TOPICS}</th>
    <th nowrap="nowrap" width="50">{L_POSTS}</th>
    <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></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">&nbsp;</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}" />
    </td>
    <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" 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}>
    <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 -->
    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
    </span>
    </td>
    <td class="row3" align="center" valign="middle" height="50">
    <span class="gensmall">{catrow.forumrow.TOPICS}</span>
    </td>
    <td class="row2" align="center" valign="middle" height="50">
    <span class="gensmall">{catrow.forumrow.POSTS}</span>
    </td>
    <td class="row3 over" align="center" valign="middle" height="50">
                <!-- 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 -->
                <div style="width: 200px;"></div>
                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar -->

    <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
    </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" />
      </div>
     
     
      <!-- END tablefoot -->
   
     
     
      <!-- END catrow -->

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


Il me semble que les titres de catégories ne doivent pas comporter de code html pour qu'il fonctionne.
N'oublie pas de déposer la css donnée dans l'astuce clin oeil .

On verra ensuite comment coloriser selon ton envie clin oeil
soleda
soleda
https://www.tutorielgraphismepfs.com/

Messagesoleda Lun 13 Aoû 2018 - 18:31

Bonsoir Milouze je te remercie infiniment je viens de tout placer sa fonctionne pas .
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 13 Aoû 2018 - 18:35

Hum, tu te moques de moi lOL .

Je viens de ton fofo et c'est fonctionnel clin oeil

 [PHPBB2] Modification de la page d'accueil mettre des catégories en onglet Image10

Tu as une ribambelle de Catégories dit donc heuu
soleda
soleda
https://www.tutorielgraphismepfs.com/

Messagesoleda Lun 13 Aoû 2018 - 18:42

lOL oui .......ben je pense que sa va pas leurs plaire mince ......javais forcer les Template par défaut j'ai décocher et marquer non et oui sa marche  lOL
Il y avait un tuto chez Fac pour les catégorie en onglet mais je ne le retrouve plus .......bon pas grave encore mille merci mais sa va pas aller comme sa ils vont m'assassiné  si je laisse comme sa  lOL 
Un énorme merci
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 13 Aoû 2018 - 18:46

ben je pense que sa va pas leurs plaire mince

Ben des onglets restent des onglets chèr(e) ami(e), il y a toujours la possibilité de les modifier


Tu peux toujours retrouver ton template modifié ici:
https://www.milouze14.com/t31617-phpbb2-modification-de-la-page-d-accueil-mettre-des-categories-en-onglet#600843

soleda
soleda
https://www.tutorielgraphismepfs.com/

Messagesoleda Lun 13 Aoû 2018 - 18:50

c'est très gentil super je le garde de coté merci très bonne soirée.mince les vacances de mon pas arranger le cerveau je trouve plus pour mettre en resolu
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 13 Aoû 2018 - 18:55

soleda
soleda
https://www.tutorielgraphismepfs.com/

Messagesoleda Lun 13 Aoû 2018 - 19:08

oups ......merci
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 13 Aoû 2018 - 19:10

De rien Soleda,

-Staff du Forum Milouze14-



  • Hello 
    Sujet résolu et déplacé dans le forum adéquat.

Pour toute information,merci de contacter un Membre du Staff

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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