Protostar 960px -> 1150px ajustement

**dolmenhir** · 16/10/2020, 07h00

Salut,

Pour le changement de largeur du template Protostar, les modifications du css me semblent correctes et, à ma connaissance, il n'y a rien d'autre à changer.

Envoyé par phelibre Voir le message

L'ajustement, la colonne de position-7 est un peu large je trouve et le but est de la diminuer et que le centre prenne la place laissée. J'ai regardé et j'ai pensé qu'en diminuant le span3 de x% et d'augmentant le span9 de x% serait peut-être une solution. Mais j'en suis sur du tout et j'ai bien peur de jouer aux apprentis sorciers :-/

Pour la largeur des colonnes, Protostar utilise le système de grille duodécimal de Boostrap 2... parce qu'à l'époque le 4 n'existait pas encore

Donc un span3 correspond à 3/12e de la largeur et span9 équivaut à 9/12e.
Si tu veux modifier la largeur de ta grille et donc de ta position-7, je te suggère du "jouer" avec les "span" plutôt qu'avec la valeur en % du calcul de largeur... car ces valeurs sont ou peuvent être utilisées un peu partout, et pas seulement pour déterminer la largeur des zones latérales du template.

Bref, pour rendre ta position-7 moins large, change sa valeur "span3" par "span2".
En plus cela se fait directement et uniquement dans le fichier index du template, ce qui simplifie la vie en terme de gestion.

La largeur de la zone centrale dépend de la largeur de la zone droite ET de la zone gauche.
Ce calcul se situe aussi dans le fichier index du template.
Cherche la section après le commentaire

Code:

// Adjusting content width

Si tu sais coder, tu comprendras très vite, sinon c'est pas très compliqué :

Code:

if ($position7ModuleCount && $position8ModuleCount)
{
$span = 'span6';
}

signifie que que les deux côtés s'affichent.
Fixés par défaut à "span3", la zone centrale fera "span6" (12 - (3+3) = 6)

Sinon, si seulement la zone de droite (position-7)

Code:

elseif ($position7ModuleCount && !$position8ModuleCount)
{
$span = 'span9';
}

il restera 9 (span9) à la zone centrale (12 - 3)

idem s'il n'y a que la zone de gauche seule

Code:

elseif (!$position7ModuleCount && $position8ModuleCount)
{
$span = 'span9';
}

Et enfin, si aucune des deux zones n'est affichée, la zone centrale occupe toute la largeur (span12)

Code:

else
{
$span = 'span12';
}

Une fois la largeur de la zone centrale définie, cherche dans le fichier index les valeurs "span" des positions 7 et 8 - les deux côtés "droite" (aside) et "gauche" (sidebar) - qui doivent par défaut avoir la même valuer vu que le calcul de la zone centrale repose sur leur présence commune ou séparée.

Code:

<?php if ($position7ModuleCount) : ?>
<div id="aside" [COLOR=#c0392b][B]class="span3"[/B][/COLOR]>
<!-- Begin Right Sidebar -->
<jdoc:include type="modules" name="position-7" style="well" />
<!-- End Right Sidebar -->
</div>
<?php endif; ?>

et

Code:

<?php if ($position8ModuleCount) : ?>
<!-- Begin Sidebar -->
<div id="sidebar" [COLOR=#c0392b][B]class="span3"[/B][/COLOR]>
<div class="sidebar-nav">
<jdoc:include type="modules" name="position-8" style="xhtml" />
</div>
</div>
<!-- End Sidebar -->
<?php endif; ?>

Ces deux zones ont forcément la même valeur, à savoir la moitié de la valeur restante après décompte de la zone centrale, en raison du mode de calcul "simpliste" expliqué précédemment.
Évidement, ça ne peut être qu'un entier facteur de 12.

Mais rien ne t'interdit, si tu sais coder un peu, de modifier et "complexifier" la partie de

Code:

// Adjusting content width

pour t'autoriser à utiliser des valeurs différentes (que tu devras bien sûr) reporter dans les class de tes div "aside" et "sidebar".
Tu peux même dans ta procédure php de calcul des largeurs avoir des variables pour stocker individuellement la valeur de chaque span latéral ; il faudra ensuite remplacer la valeur "en dur" des classes respectives de chacun de ces côtés.

Voilà, j'espère avoir été suffisamment clair

Dol.

**phelibre** · 17/10/2020, 09h45

Merci Dolmenir,

Cela me semble bien complet et assez clair. Je ferai des essais sur mon petit serveur local en début de semaine prochaine ... Je reviendrai s'il le faut

Cordialement

**lefabdu51** · 18/10/2020, 10h42

bonjour,
i faut éviter de toucher aux valeurs en dur concernant les span, car celles ci sont aussi définies pour chaque résolutions pour l'aspect responsif du template.
tu as plusieurs requetes méda dans ton fichier css, chacune avec des valeurs correspondant a la résolution du navigateur du visiteur.

**phelibre** · 20/10/2020, 15h43

Me revoilà et encore merci pour vos contributions

Il semblerait que le système ne connait pas ses tables d'additions car la somme est mauvaise

J'ai donc modifié l'index et passé en span2 aside et side-car, effectivement c'est plus petit mais le centre conserve sa dimension !!!

Que faire ?

**phelibre** · 20/10/2020, 15h57

et le span2 est petit, l'idéal serait avoir l'aside de taille quand 960px un peu comme l'image quand je diminue la taille de la fenêtre ...

**dolmenhir** · 21/10/2020, 08h36

Avec le système de grille actuel, tu n'as pas d'autre choix que d'avoir une largeur correspondant à la valeur du span utilisé.
Pas moyen d'avoir une largeur intermédiaire.

Si, comme boucles d'or

, le span2 te semble trop petit, et le span3 trop grand, alors il te faut sans doute agrandir ta largeur globale pour que le span2 soit plus large, ou la réduire pour que le span3 soit plus étroit.
Ou alors, il faut te tourner vers un autre template, voire un framework comme Gantry te permettant de décider de la largeur précise de chaque zone où, par exemple, tu peux avoir la colonne de gauche à 18%, celle de droite à 34% et celle du centre à 48%, et tout cela par un simple "cliquer-glisser".

**phelibre** · 21/10/2020, 13h58

Merci Dolmenhir, j'ai une newsletter a préparer et autres. Je vais revoir tout ça un peu plus tard ... Touts vos réponses me permet de considérer que c'est réglé ...

**phelibre** · 22/10/2020, 16h18

Finalement je suis revenu avec des span3. J'avais fait quelques essais avec une largeur de 1060px et j'ai remarqué que le menu qui est fixé avec le lm-custom (la file) à des problèmes de largeur. Je suis repassé en 1150px de largeur et le même problème, voir l'image.

- Pensez-vous utile d'avoir un menu fixé en haut de page aujourd'hui ?
- Que faire pour que le menu fixé est la même largeur de la body ?

Merci beaucoup pour vos soutiens,
Cordialement,

Fichiers joints

**dolmenhir** · 23/10/2020, 08h55

Envoyé par phelibre Voir le message

même problème, voir l'image.

Peux-tu être plus explicite, car pour moi l'image n'est pas révélatrice d'un quelconque problème technique.

Envoyé par phelibre Voir le message

Pensez-vous utile d'avoir un menu fixé en haut de page aujourd'hui ?

Tout dépend du site, mais dans la majorité des cas je dirai oui, et même en "sticky", càd fixe en haut de page pour permettre d'y avoir accès même quand on est en train de lire le bas d'une page.

Envoyé par phelibre Voir le message

Que faire pour que le menu fixé est la même largeur de la body ?

Par défaut, un simple "width:100%" devrait suffire, mais à vérifier selon les éventuelles personnalisations du template et des css

**dolmenhir** · 23/10/2020, 09h21

Je suis allé voir ton site, et il y a manifestement un problème dans la mesure où la largeur proportionnelle (%) de ta barre de navigation ne tient pas compte de la largeur des éléments parents.

Mais, avant de chercher à comprendre comment faire pour que tout rentre dans l'ordre, il faut commencer par corriger tes feuilles de styles.
Tu as mis des commentaires sous la forme

Code:

//

Or un commentaire dans une feuille css c'est

Code:

/* blabla bla */

Donc commence pour nettoyer le code et il n'est pas impossible que certaines instructions ne soient plus ignorées, voire qu'un certain nombre de choses se remette à fonctionner normalement.
Dans tous les cas, tu auras un code propre pour avancer.

**phelibre** · 23/10/2020, 13h27

Merci mais 100% empire la chose, là je suis à 80% ... Pas trouvé de chaine de commentaire commençant par // dans les 2 css !

Je corrige, effectivement les // sont les mises en commentaires de certaines lignes de déclaration ...
Finalement vous avez raison 100% c'est mieux que rien ... J'aurai préféré que cela conserve la largeur du body mais c'est aussi acceptable pour la largeur de la page ...

Merci

**dolmenhir** · 23/10/2020, 14h27

A noter également, idéalement il faudrait abandonner les déclarations de type "float" pour les aside et sidebar (et tout le reste) et se tourner vers l'emploi de "flex" et ses déclinaisons.
C'est beaucoup plus puissant et plus souple à la fois.

**lefabdu51** · 25/10/2020, 08h28

si tu passe ton aside en span2, passe ton main en span10.......

Protostar 960px -> 1150px ajustement

[RÉGLÉ] Protostar 960px -> 1150px ajustement

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association