Template protostar

[damours]

Bonjour,

Est-il possible de changer les dimensions du Template lorsqu'il est en mode statique. Et comment changer la couleur du menu.

Merci

Alain d'Amours

[damours]

Re : Template protostar

J'ai trouvé la façon de changer la couleur du menu. Par contre, je ne trouve pas comment changer la largeur du Template en mode statique Quelqu'un peut m'aider?

Merci

[lomart]

Re : Template protostar

Bonsoir,

tout se passe dans la section GRID (ligne 248) du fichier templates/protostar/less/variables.less.
Il faut changer les largeurs des colonnes puis recompiler le fichier less avec un programme comme Crunch


PS. attention, si la couleur du menu a été changé dans le fichier CSS, il faudra répercuter les modifications après la compilation ou mieux: modifier les variables less

[damours]

Re : Template protostar

Bonjour et merci de vouloir m'aider.

J'ai fait une tentative en modifiant le code

// Default 1280px grid
// -------------------------
@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
/* >>> JUI >>> */
// 1200px min
@gridColumnWidth1200:     60px;
@gridGutterWidth1200:     20px;
@gridRowWidth1200:        (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 768px-1279px
@gridColumnWidth768:      42px;
@gridGutterWidth768:      20px;
@gridRowWidth768:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

mais cela n'a rien changer.

Alain

[lomart]

Re : Template protostar

Avez-vous bien recompiler le fichier LESS pour avoir le fichier CSS ?
Hormis la 1ère ligne de commentaire, les valeurs mises dans votre exemple sont celles d'origine.
Que voulez-vous obtenir ?
Actuellement les largeurs sont de 1200px et 940px en mode desktop selon la taille ecran

[damours]

Re : Template protostar

Je voudrais 1280 px en mode fixe
Oui, j'ai recompiler avec Winless, mais je ne suis pas familier avec LESS.
Merci

[lomart]

Re : Template protostar

Il faudrait quelque chose comme cela
On a 1274px en sortie

// Default 940px grid
// -------------------------
@gridColumns:             12;
@gridColumnWidth:         86px;
@gridGutterWidth:         22px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
/* >>> JUI >>> */
// 1200px min
@gridColumnWidth1200:     86px;
@gridGutterWidth1200:     22px;
@gridRowWidth1200:        (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 768px-1279px
@gridColumnWidth768:      42px;
@gridGutterWidth768:      20px;
@gridRowWidth768:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

Mettre les mêmes valeurs pour 940 et 1200 évite de réecrire les médiaqueries

Il faut être en mode grille fixe (et non fluide)

[damours]

Re : Template protostar

Il faudrait quelque chose comme cela
On a 1274px en sortie

// Default 940px grid
// -------------------------
@gridColumns:             12;
@gridColumnWidth:         86px;
@gridGutterWidth:         22px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
/* >>> JUI >>> */
// 1200px min
@gridColumnWidth1200:     86px;
@gridGutterWidth1200:     22px;
@gridRowWidth1200:        (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 768px-1279px
@gridColumnWidth768:      42px;
@gridGutterWidth768:      20px;
@gridRowWidth768:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

Mettre les mêmes valeurs pour 940 et 1200 évite de réecrire les médiaqueries

Il faut être en mode grille fixe (et non fluide)

J'ai fait les modification sans obtenir de changements.

Ou est-ce que je doit mettre les mêmes valeurs pour 940 et 1200 et que signifie éviter de réécrire les médiaqueries?

[lomart]

Re : Template protostar

Ou est-ce que je doit mettre les mêmes valeurs pour 940 et 1200

Nulle part, ils sont trouvés par l'application de la formule
(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))

que signifie éviter de réécrire les médiaqueries?

Par défaut, le template s'adapte à des largeurs d'écran supérieur à 940px et 1200px. Pour éviter de changer ces règles, on donne les mêmes valeurs

PS. Avant de jouer avec la grille et les médiaqueries, il serait bien de se documenter pour éviter les problèmes

PS bis. Bien qu'ayant répondu a ta question, je ne vois pas l'intérêt de forcer la largeur à 1280px alors que beaucoup d'écran sont en dessous (tablette, notebook)

[damours]

Re : Template protostar

C'est une personne qui me demande cette largeur. Mais comme je t'ai dit, la largeur n'a pas changé