[PBTV5.0] Moduler la largeur des colonnes de menus

Introduction:



La largeur des colonne de menus droit comme gauche , nous pose souvent des soucis ! Nous allons remédier à celui-ci , et vous aurez un site à votre convenance! Sans pour autant être obligé, de télécharger un thème qui disposent des avantages que vous souhaitez.
Commençons ...

Avertissement



Avant toutes modificationsde fichiers, pensez à faire une sauvegarde du site et de votre Base de données.

Le fichier design.css



Pour commencez rendez-vous dans le dossier de votre thème que vous trouverez dans le dossier "templates".
Puis ouvrez le dossier "theme".
Ensuite éditez le avec notepad++ / ou votre bloc note, rendez-vous à la ligne 198, et copiez-y ce code:

Avant tout ..



C'est là que tout va ce jouer !
Quelques précisions tout de même pour que vous compreniez bien.

- aside#menu-left : Colonne de menu gauche
- aside#menu-right : Colonne de menu droit
- #main.main-with-left : Le centrale avec la colonne de menu gauche
- #main.main-with-right : Le centrale avec la colonne de menu droit


Le code



On reprends donc à la ligne 198 du "design.css"..
Note: Les explications sont dans le code sous forme de commentaires.

Code CSS :
    aside#menu-left,
    aside#menu-right {
        width: 200px; 
        /* Ci-dessus: La largeur d'une colonne, droite ou gauche au choix  Modifiez la valeur soit 200px par ---px. */
    }
    aside#menu-left  { 
        order : 1;
        -ms-flex-order: 1;
        -webkit-flex-order: 1;
    }
    aside#menu-right { 
        order : 3;
        -ms-flex-order: 3;
        -webkit-flex-order: 3;
    }
 
    #main.main-with-left,
    #main.main-with-right {
        width: calc(100% - 200px); 
        /* Ci-dessus: La largeur d'une colonne, droite ou gauche au choix avec la prise en compte du central. Ne modifiez que la valeur en px soit: 200px = 1 colonne! */
        -ms-flex: 1 0 auto; /*Tricks IE*/
    }
 
    #main.main-with-left.main-with-right {
        width: calc(100% - 400px);
        /* Ci-dessus: La largeur des 2 colonnes avec la prise en compte du central. Ne modifiez que la valeur en px soit: 400px = 2 colonne! */        
        -ms-flex: 1 0 auto; /*Tricks IE*/
    }



Enregistrer et fermer.


Et pour finir ...



Important: N'oubliez pas de rafraîchir vos cache dans l'administration/Outils/Cache ==> CSS et tpl!

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


Créé le 28/12/2016, par Swan

Cette page a été consultée 1604 fois