[Astuce] Aérer les pages

[pjuignet]

Bonjour à tous,

Pour aérer mes pages, je voudrais mettre une zone blanche en Position 1. (entre le menu et le contenu )

Le site est sous protostar standard.

Peut-on insérer une image (blanche dans mon cas) dans cette zone ou y insérer des lignes vides ?

[SimonG]

Re : Aérer les pages

Bonjour,

un module de contenu personnalisé peut "faire l'affaire", mais il serait préférable de modifier le template pour faire cela plus proprement

[pjuignet]

Re : Aérer les pages

Bonjour,

un module de contenu personnalisé peut "faire l'affaire", mais il serait préférable de modifier le template pour faire cela plus proprement

Certes, mais s'il faut savoir dans quel fichier faire la modif qui sera supprimée lors de la prochaine mise à jour.

Je préférerais insérer de l'espace ou une petite image sympa en position 1, si c'était possible simplement, comme on peut positionner un module ou un plug-in ; ça permettrai aussi de changer de temps en temps. Y a-t-il un astuce pour faire ça ??

[PhilJ]

Re : Aérer les pages

Bonjour,

Pour aérer mes pages, je voudrais mettre une zone blanche en Position 1 (entre le menu et le contenu). Le site est sous protostar standard. Peut-on insérer une image (blanche dans mon cas) dans cette zone ou y insérer des lignes vides ?

Sauf erreur, la position 1 de Protostar est la barre de navigation horizontale accueillant le menu principal. Par défaut, le template n'accorde qu'un espace restreint de 5 px au dessus et au dessous de cette barre :

.navigation {

padding: 5px 0; /* c'est-à-dire une marge interne de 5 px au dessus et au dessous, et 0 sur les côtés */

}

=> Donc il devrait suffire d'augmenter un peu l'espace au dessous via CSS.

Par exemple, pour avoir 16 px sous la barre au lieu des 5 px par défaut :
—

1. Si la modification est appliquée directement dans template.css :

—

.navigation {

padding: 5px 0 16px;

}
—
—

2. Si la modification est ajoutée dans un fichier CSS de surcharge (custom.css) — solution bien sûr préférable à la précédente :
—

.navigation {

padding-bottom: 16px;

}

Cordialement,



PhilJ

[pjuignet]

Re : Aérer les pages

La position 1 est située juste sous la position 0 (navigation) dans laquelle j'ai mis le menu.

[PhilJ]

Re : Aérer les pages

La position 1 est située juste sous la position 0 (navigation) dans laquelle j'ai mis le menu.

Bizarre. Je n'utilise jamais Protostar, mais le code de l'index.php du template suggère nettement que le menu est attendu en position-1, et non en position-0 :

<header class="header" role="banner">
                <div class="header-inner clearfix">
                    <a class="brand pull-left" href="<?php echo $this->baseurl; ?>/">
                        <?php echo $logo; ?>
                        <?php if ($this->params->get('sitedescription')) : ?>
                            <?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
                        <?php endif; ?>
                    </a>
[COLOR=#ff0000]                    <div class="header-search pull-right">
                        <jdoc:include type="modules" name="position-0" style="none" />
                    </div>[/COLOR]
                </div>
            </header>
[COLOR=#008000]            <?php if ($this->countModules('position-1')) : ?>
                <nav class="navigation" role="navigation">
                    <jdoc:include type="modules" name="position-1" style="none" />
                </nav>
            <?php endif; ?>[/COLOR]

Le code est par lui-même assez clair pour que l'on comprenne que position-0 attend un module de recherche, et position-1 un module de type menu.

Si quelqu'un peut confirmer...

Et, @pjuignet : utilisez-vous position-1 quelque part sur le site ?

[pjuignet]

Re : Aérer les pages

Merci pour ces réponses,

Adresse du site http://www.philosciences.com/Pss/

Millexcuses, j'ai fait une erreur, j'utilise la position 1 pour le menu. Dans les choix de position pour les modules, il est effectivement noté Navigation [position-1] et la nav class est navigation .

Je croyais utiliser la position 0.

L'idée que j'avais eu c'est de ne pas modifier le CSS mais d'utiliser cette fonction d'insertions dans des positions prédéfinies d'une image ce qui permettrai de changer facilement. Mais ce n'est peut être pas possible.

Si je fais un un fichier CSS de surcharge (custom.css) dans le cas d'un mise à jour n'est pas modifié. Mais alors on ne bénéficie pas de la mis à jour. N'est-ce pas un problème ?

[ghazal]

Re : Aérer les pages

@PhilJ
Je confirme que la pos-1, même si elle attend "un module de type menu", prend par définition toute la largeur de la page, puisque le module (par ex, un module custom, avec <div class="custom">) se retrouve enfant de la balise nav.

Juste pour info, le template protostar dans la version 3.4.2 à venir - bientot, ils sont en train de "squasher les bugs" - bénéficie exactement de la fonctionnalité recherchée par @pjuignet.
Voir ici :

https://github.com/joomla/joomla-cms/commit/af3ae7c726886e47bed7a4b0645f0f8507702149#diff-cf538a09535bff6ecf56b6c2404e431d

PS : ce qui est en rose est supprimé, ce qui est en vert est rajouté.

[PhilJ]

Re : Aérer les pages

Millexcuses, j'ai fait une erreur, j'utilise la position 1 pour le menu. Dans les choix de position pour les modules, il est effectivement noté Navigation [position-1] et la nav class est navigation. Je croyais utiliser la position 0.

...Ah ! Je comprends mieux !

L'idée que j'avais eu c'est de ne pas modifier le CSS mais d'utiliser cette fonction d'insertions dans des positions prédéfinies d'une image ce qui permettrai de changer facilement. Mais ce n'est peut être pas possible.

Tout est possible, bien sûr, mais un principe (philosophique) d'économie / de simplicité gagne à être toujours appliqué. Or ici, le plus simple, c'est manifestement de changer une seule ligne de code dans les directives CSS.

Si je fais un un fichier CSS de surcharge (custom.css) dans le cas d'un mise à jour n'est pas modifié. Mais alors on ne bénéficie pas de la mis à jour. N'est-ce pas un problème ?

Les professionnels changent parfois des centaines de lignes CSS pour personnaliser un template.

Dans votre cas, pas d'inquiétude : une seule ligne à modifier .
Si jamais une mise à jour de Protostar change précisément le code de cette zone, vous aurez donc tout au plus (c'est-à-dire peut-être même pas) une seule ligne à mettre à jour.


Bonne soirée,



PhilJ

[pjuignet]

Re : Aérer les pages

Juste pour info, le template protostar dans la version 3.4.2 à venir - bientot, ils sont en train de "squasher les bugs" - bénéficie exactement de la fonctionnalité recherchée par @pjuignet.

Voila une bonne nouvelle !

[PhilJ]

Re : Aérer les pages

@PhilJ
Je confirme que la pos-1, même si elle attend "un module de type menu", prend par définition toute la largeur de la page, puisque le module (par ex, un module custom, avec <div class="custom">) se retrouve enfant de la balise nav.

...A ce sujet, l'image en en-tête a pour largeur 950 px. Or la largeur totale utile est de 940 px. D'où le léger débordement (10 px) de l'image sur la droite. La solution est bien sûr de « raboter » un peu l'image pour ramener sa largeur à exactement 940 px.

[pjuignet]

Re : Aérer les pages

...A ce sujet, l'image en en-tête a pour largeur 950 px. Or la largeur totale utile est de 940 px. D'où le léger débordement (10 px) de l'image sur la droite. La solution est bien sûr de « raboter » un peu l'image pour ramener sa largeur à exactement 940 px.

J'ai raboté et mis une bande blanche en bas ce qui espace un peu la page.
Merci
PJ