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