Discussion

04/03/2021 à 21h45 : m-ickael : Moi il est là :D

02/03/2021 à 11h37 : Swan : Il est ou le soleil !!! il est ouuUUUuuu ??? :rire

01/03/2021 à 22h47 : Swan : Bon 1er Mars à tous ;)

27/02/2021 à 07h48 : m-ickael : Bonjour

26/02/2021 à 11h16 : Swan : :lu Bonjour tout le monde ^^ Ce soir week end !!

23/02/2021 à 10h50 : Swan : Salut tout le monde ^^ On est toujours là hein !! ;)

07/02/2021 à 08h33 : m-ickael : :)

06/02/2021 à 11h38 : Swan : Bonjour tout le monde :lu Merci Mickael ^^

04/02/2021 à 18h22 : m-ickael : Salut. Long à charger par moment, mais oui ça marche :)

03/02/2021 à 08h28 : Swan : Salut !! Migration sur la 5.2 de Pbt en cours ;)

30/01/2021 à 13h20 : Swan : Salut tout le monde dites moi le site fonctionne correctement ?

22/01/2021 à 16h42 : m-ickael : :(

22/01/2021 à 11h07 : Swan : Bonjour à tous, on a vraiment le moral au ras des pâquerettes... :dehors2

21/01/2021 à 13h15 : Swan : Salut tout le monde ^^ Jour de pluie , jour heureux ??

14/01/2021 à 16h57 : m-ickael : :top

14/01/2021 à 10h32 : Swan : :lu Bonjour tout le monde, c'est dur de se motiver en ce moment , n'est ce pas ? Surtout moi ...

10/01/2021 à 11h10 : Swan : Bon dimanche à tous ^^

07/01/2021 à 11h08 : Swan : :lu Salut à tous bon il fait pas chaud, mais cela fait du bien, cela secoue la couenne :rire

06/01/2021 à 10h50 : Swan : Bonjour tout le monde ^^

05/01/2021 à 18h05 : Swan : Allez , on l'a refaire pour le site : Bonne année à tous :siffle

04/01/2021 à 21h48 : m-ickael : Merci :top

30/12/2020 à 19h14 : xtian68 : Bonsoir, bon réveillon à tous

27/12/2020 à 17h13 : m-ickael : Bonjour.

27/12/2020 à 14h14 : Swan : Bonjour à tous, j'espère que vous allez tout bien , après ce réveillon restrictif ..

24/12/2020 à 11h47 : Swan : :lu Salut tout le monde et bonne veillée de noël !

22/12/2020 à 13h27 : Swan : :lu Bonjour à tous, N'oubliez pas, je suis tout les jours sur le Discord.. N'hésitez pas à venir papoter 5Mn si cela vous dit ;)

17/12/2020 à 22h24 : m-ickael : :top

16/12/2020 à 14h31 : Swan : Bonjour tout le monde :lu Maj de version en cours en local passage de PBT 5.0.8 à 5.0.18 réussie ^^

13/12/2020 à 11h33 : Swan : :lu Bon dimanche à tous , aujourd'hui repos !

11/12/2020 à 12h08 : Swan : Coucou tout le monde , Et hop ce soir en week end !

10/12/2020 à 12h08 : Swan : Bonjour à tous :lu

07/12/2020 à 20h10 : m-ickael : C'est auto chez mon hébergeur donc bon :D

07/12/2020 à 20h10 : m-ickael : Bonjour.

07/12/2020 à 09h47 : Swan : Salut tout le monde :lu Coucou Myster ! Sauvegarde de BDD Faites ;) N'oubliez pas de faire les vôtres ^^

06/12/2020 à 17h48 : Myster : Bonsouaar :)

05/12/2020 à 14h01 : Swan : Bon week end à tous :) Bien au chaud dans la couette avec mes doudous !

02/12/2020 à 13h58 : Swan : Bonjour à tous ;)

01/12/2020 à 12h02 : Swan : Bonjour à tous :lu Un mardi froid pluvieux et gris !!

30/11/2020 à 11h32 : Swan : Salut tout le monde , bon début de semaine à tous ;)

28/11/2020 à 11h56 : Swan : Bon week end à tous ^^

27/11/2020 à 11h11 : Swan : Bonjour tout le monde ^^ j'ai la tête dans le gaz aujourd'hui ... :(

26/11/2020 à 16h10 : Swan : Re ^^ : voilà le discord est prêt ! Le lien d'invitation perm du discord: https://discord.gg/GNVZaCBemE ;)

26/11/2020 à 11h56 : Swan : Note : Je passe le forum en lecture seul pour le moment, le temps de mettre en place le discord et les inscriptions passeront maintenant par l'activation administrateur ^^

26/11/2020 à 11h32 : Swan : Bonjour à tous :lu Oui , je viens de voir et merci, Message supprimé :)

25/11/2020 à 18h09 : m-ickael : Bonjour. Il y a du spam sur le forum (j'ai signalé) .. :D

25/11/2020 à 10h27 : Swan : :lu Bonjour, d’où le fait de le garder en archive, comme cela je ne ferme pas complètement le forum ^^

24/11/2020 à 18h21 : m-ickael : Moi le forum survit pas mal pourtant .. Il y a les réseaux sociaux, c'est vrai, mais quand c'est bien, on survit

24/11/2020 à 18h21 : m-ickael : ah bon ?

24/11/2020 à 11h02 : Swan : Bonjour à tous, Merci Mickael :) Je pense passer le forum en "Forum archive". Vu que maintenant le Discord passe largement au niveau communautaire. Je me demande si je n'ai pas fais une erreur de fermer le channel EDN.. :flute

22/11/2020 à 08h19 : m-ickael : Joyeux anniversaire en effet, avec du retard. (A ta fille)

Vous n'êtes pas autorisé à ajouter un message !

[PBTV5.X] Masquer les colonnes de menus au choix

Introduction



Il y a très longtemps du temps ou KONA , me dépatouillait je lui avais demandé comment caché les colonnes de menus sur PBT.. A l'époque nous étions sous Scriptaculous et Mootools, mais depuis lors, au passage au JQuery on avait perdu tout ces petits plus que tout le monde aimait à bricoler sur son site ..

Depuis Jquery, il nous faut faire attention au code que nous entrons dans les pages pour ne pas générés de conflit. Mais je vous repose le code fonctionnel pour masquer vos colonnes de menus à la demande. Cela offre une énorme ergonomie visuel pour vos sites.

Le visuel





Avertissement



Avant toutes modifications de votre site, pensez à faire une sauvegarde de votre thème.

Commençons ..



Pour commencez rendez-vous dans le dossier de votre thème que vous trouverez dans le dossier "templates".
Ouvrez le dossier de votre thème.


Le dossier JS



- A la racine de votre thème, créez un dossier nomé "JS".
- Dedans vous allez y créer un fichier texte du nom de "toggle-menu.js" ( attention pas ".txt")
- Ouvrez le fichier nouvellement Créé et copiez-y ce code :

Code JAVASCRIPT :
 
 /*########################################
*            TOGGLE MENU 
########################################*/
        // On attend que la page soit chargée 
        jQuery(document).ready(function()
        {
           // On cache la zone de texte
           jQuery('#toggle').hide();
           // toggle() lorsque le lien avec l'ID #toggler est cliqué
           jQuery('a#toggler-left').click(function()
          {
              jQuery('.toggle-left').toggle(400);
              return false;
           });
        });
        // On attend que la page soit chargée 
        jQuery(document).ready(function()
        {
           // On cache la zone de texte
           jQuery('#toggle').hide();
           // toggle() lorsque le lien avec l'ID #toggler est cliqué
           jQuery('a#toggler-right').click(function()
          {
              jQuery('.toggle-right').toggle(400);
              return false;
           });
        });
 


Enregistrer et fermer.

Le frame.tpl



Éditez le avec notepad++ / ou votre bloc note, rendez-vous AVANT la balise de fermeture du head"</head>", copiez-y ce code:

Code TPL :
<script src="{PATH_TO_ROOT}/templates/{THEME}/js/toggle-menu.js"></script>    


Cela va vous permettre d'appeler le fichier qui exécutera la demande de masquage de la colonne de menu voulue

Enregistrer et fermer.

Le body.tpl



Éditez le avec notepad++ / ou votre bloc note, rendez-vous à la balise "<div id="sub-header">", et en dessous, copiez-y ce code:

Code TPL :
 
        <!-- Début :: Permet de voir les flèches pour cacher les colonnes de menus -->
        <div id="hide-left">
            <a href="#" id="toggler-left"><i class="fa fa-arrow-left" aria-hidden="true"></a></i>
        </div>
 
        <div id="hide-right">
            <a href="#" id="toggler-right"><i class="fa fa-arrow-right" aria-hidden="true"></a></i>
        </div>
        <!-- Fin :: Permet de voir les flèches pour cacher les colonnes de menus -->
 


Ensuite rendez-vous dans la balise "<aside id="menu-left">" et replacez comme ceci : <aside id="menu-left" class="toggle-left">
De même pour la balise "<aside id="menu-right">" comme ceci : "<aside id="menu-right" class="toggle-right">".

Enregistrer et fermer.

Le design.css



Vous le trouverez dans le dossier "theme" de votre thème. Éditez le avec notepad++ / ou votre bloc note, et placez le code ci dessous à la fin du fichier.

Code CSS :
/* -- Flèche de masquage de la colonne droite & gauche-- */
/* ----------------------------------------------------- */
#hide-left { 
float: left; 
margin: 6px 0 0 0px; /* Permet de régler la hauteur de la flèche*/
margin-left: 15px; /* Permet de régler la distance de la marge gauche de la flèche*/
position: absolute;
}
#hide-right {  
float: right; 
margin: 6px 0 0 0px; /* Permet de régler la hauteur de la flèche*/
margin-right: 15px;  /* Permet de régler la distance de la marge droite de la flèche*/
position: relative;
}
.fa.fa-arrow-left { color: rgba(0, 0, 0, 0.6);} /* Couleur Noir */
.fa.fa-arrow-right { color: rgba(0, 0, 0, 0.6);}/* Couleur Noir */
@media (max-width:768px) {
#hide-left, #hide-right { display:none; }
}


Enregistrer et fermer.

Et pour finir ...



Important: N'oubliez pas de rafraîchir vos caches dans l'administration/Outils/Cache ==> TPL et CSS (voir même navigateur) !

Si vous avez des questions, n'hésitez pas à les poser sur le forum :)


Créé le 13/11/2017, par Swan

Cette page a été consultée 898 fois