[RÉGLÉ] Modifier la largeur générale sous protostar

[jackydown]

Bonjour à tous.
J'ai fait une recherche sur le forum mais impossible de trouver comment modifier la largeur générale du site avec le template protostar. Je vois bien des largeurs de 980 dans le css mais rien ne bouge lorsque je modifie.
Dans le même registre, ou sont les paramètre de réglage de la marge du haut du site ? (pour remonter l'ensemble de quelques px)
Si quelqu'un a la solution, merci d'avance.

[Rajoz]

Re : Modifier la largeur générale sous protostar

Bonjour jackydown,

Pour modifier la largeur générale de Protostar, il faut aussi modifier la largeur des colonnes car c'est le système de grille (grid) de Bootstrap. On pourrait le faire en modifiant le template.css mais, responsive oblige, il y a pas mal d'endroits où des valeurs concernant la largeur devraient être modifiées (largeur globale, span, offset, etc.) avec le risque d'en oublier ou de se tromper dans les calculs.

La méthode c'est de modifier les fichiers LESS de Protostar puis de les compiler pour recréer le fichier template.css.
Dit comme ça, cela peut avoir l'air compliqué mais en fait c'est simple et ça ouvre via LESS tout un ensemble de nouvelles possibilités en amont de CSS comme les couleurs, la typographie, etc. Un petit topo sur LESS : http://openclassrooms.com/courses/si...-vie-avec-less

Comme d'habitude :

• faire une sauvegarde du site avant toute modification
• tester de préférence sur un site de test en local plutôt que sur le site en production
• travailler sur une copie du template pour éviter les problèmes lors des mises çà jour

1) Installer et démarrer le compilateur LESS

• la méthode la plus simple (à mon avis) c'est le plugin Less Compiler : http://extensions.joomla.org/profile.../less-compiler
• installer et activer le plugin (Plugin System - Less Compiler) (pas besoin de l'installer en production si les modifs sont faites en local)
• à chaque chargement de page, le plugin va vérifier s'il y a eu un changement dans les fichiers LESS et dans ce cas il va compiler les fichiers LESS pour créer un nouveau template.css

2) Modification des fichiers LESS
Les fichiers LESS de Protostar se trouvent dans templates/protostar/less/. Il y a deux fichiers à modifier pour répondre à la demande (largeur du site + marge du haut).

variables.less (lignes 278 à 288)
remplacer par exemple 60px par 80px (en rouge la valeur modifiée) :

// Default 940px grid
// -------------------------
@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// > Joomla JUI
// 1200px min
@gridColumnWidth1200:     [COLOR=#ff0000]80px[/COLOR];
@gridGutterWidth1200:     20px;
@gridRowWidth1200:        (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

Note : je n'ai fait la modification que pour les écrans de plus de 1200px (pas utile en dessous) :

• 60px donnait une largeur de 940px = (60 * 12) + (20 * (12 - 1))
• 80px donne une largeur de 1180px = (80 * 12) + (20 * (12 - 1))
• Tu peux bien sûr choisir une autre valeur à la place de 80px si tu souhaites une largeur différente

template.less

lignes 149 à à 152 : modifier la largeur maximum initialement limitée à 960px qui doit être augmentée pour être au mois 20px plus grand que la largeur du site (à cause des marges) par exemple (1180 + 20) :

/* Container */
.container{
    max-width: [COLOR=#ff0000]1200px[/COLOR];
}

lignes 93 à 97 : on en profite pour modifier la marge du haut de 20px à 5px (ajout en rouge)

body.site{
    border-top:3px solid #0088cc;
    padding: [COLOR=#ff0000]5px [/COLOR]20px;
    background-color: #f4f6f7;
}

3) Validation
Il suffit d'afficher une page pour que template.css soit compilé avec les modifications, voir par exemple dans ce fichier :

• lignes 5224 et suivantes : dans le bloc @media (min-width: 1200px), la largeur générale est de 1180px et les largeurs des différents span qui suivent sont modifiées (span12=1180px, ..., span1=80px)
• lignes 6974 et suivantes : body.site a un padding de 5px 20px
• lignes 7029 et suivantes : .container a un max-width de 1200px

==> Le site doit maintenant s'afficher plus large sur un écran d'au moins 1200px et avec une marge du haut plus petite.

4) Fin des tests
Quand les modifications LESS sont validées je recommande de désactiver le plugin. Cela gagne un minuscule temps de chargement et surtout cela évite des re-compilations non souhaitées en cas de mauvaise manipulation sur les fichiers LESS.
Si template.css a été créé sur le site de test local, il suffit de le copier sur le site de production.

Amicalement,
Rajoz

[jackydown]

Re : Modifier la largeur générale sous protostar

Merci bien pour la réponse :-)