Annonce

  •  » Styles
  •  » [Résolu] Modus : remonter la barre de menu au-dessus du header

#1 2021-02-02 13:26:11

Katryne
Membre
Provence
2016-12-03
1289

[Résolu] Modus : remonter la barre de menu au-dessus du header

Bonjour !
Dans un site en construction (v.2.10.2), j'ai customisé Modus. mais je trouve que la barre de menu est trop proche du fil d'Ariane, parfois, en voulant cliquer sur le fil d'Ariane, on déroule par inadvertance un élément déroulant du menu au-dessus. Je ne veux pas les espacer un peu plus, car le header prend déjà beaucoup de place avant que l'on arrive à l'essentiel du site.
Comment puis-je faire ?

https://dardennes.revestou.fr/


https://photos.revestou.fr/  v.13.1 PHP: 8.0.25 - https://dardennes.revestou.fr/ v.13.2 php 8.0.25 - http://photos.katrynou.fr/ v.13.1.0 PHP: 8.0.25 https://album.chauvigne.info/ v.13.2  PHP: 8.0.25
Système d'exploitation: Linux - Hébergeur 1&1-Ionos - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Hors ligne

#2 2021-02-02 13:43:20

dreamer
Membre
St Cyr/mer (83)
2006-02-26
923

Re: [Résolu] Modus : remonter la barre de menu au-dessus du header

Salut voisine

Un petit margin-top sur ton fil d'Ariane

Code:

#thePicturePage .browsePath {
    margin-top: 1rem;
}

A+


beauxvoyages.fr/photos (photos), beauxvoyages.fr/jukebox (musiques) et tout nouveau beauxvoyages.fr/camping (camping-car) le tout en version 12.2

Hors ligne

#3 2021-02-02 15:11:34

Katryne
Membre
Provence
2016-12-03
1289

Re: [Résolu] Modus : remonter la barre de menu au-dessus du header

Merci, mé oui mé non : je ne veux pas augmenter la hauteur globale du header avant qu'on arrive à la partie centrale de la page. J'envisage même de diminuer la taille des caractères du titre du site pour que le visiteur parvienne à l'essentiel sans scroller quand s'ouvre la page.


https://photos.revestou.fr/  v.13.1 PHP: 8.0.25 - https://dardennes.revestou.fr/ v.13.2 php 8.0.25 - http://photos.katrynou.fr/ v.13.1.0 PHP: 8.0.25 https://album.chauvigne.info/ v.13.2  PHP: 8.0.25
Système d'exploitation: Linux - Hébergeur 1&1-Ionos - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Hors ligne

#4 2021-02-11 17:29:17

Katryne
Membre
Provence
2016-12-03
1289

Re: [Résolu] Modus : remonter la barre de menu au-dessus du header

Hello ! Qui aurait une idée pour coller la barre de menu au plafond dans Modus, au-dessus de la bannière ? Si je lui mets une position fixed et top : 0, il est caché par la barre d'outil de l'administration. En fait, je voudrais plutôt intervertir bannière et menu.
Merci de toute suggestion.


https://photos.revestou.fr/  v.13.1 PHP: 8.0.25 - https://dardennes.revestou.fr/ v.13.2 php 8.0.25 - http://photos.katrynou.fr/ v.13.1.0 PHP: 8.0.25 https://album.chauvigne.info/ v.13.2  PHP: 8.0.25
Système d'exploitation: Linux - Hébergeur 1&1-Ionos - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Hors ligne

#5 2021-02-11 21:10:39

ddtddt
Équipe Piwigo
Quetigny (21) - France
2007-07-27
16292

Re: [Résolu] Modus : remonter la barre de menu au-dessus du header

Bonjour

Je dirais faire un template extension de header.tpl et de déplacerais dedans les 2 blocs


Vous aimez Piwigo alors n'hésitez pas à participer avec nous, plus d'infos sur la page "Contribuer à Piwigo". Si vous n'avez pas beaucoup de temps et que vous souhaitez nous soutenir vous pouvez aussi le faire par un don.

Hors ligne

#6 2021-02-11 22:27:01

Katryne
Membre
Provence
2016-12-03
1289

Re: [Résolu] Modus : remonter la barre de menu au-dessus du header

Merci mais ...
heu ...
Je n'ai pas de header.php, seulement un page_header.php dans /include et un header.tpl dans modus/template.
Mais ni dans l'un, ni dans l'autre, je ne trouve trace de #menubar.
Je suis dans le brouillard.


https://photos.revestou.fr/  v.13.1 PHP: 8.0.25 - https://dardennes.revestou.fr/ v.13.2 php 8.0.25 - http://photos.katrynou.fr/ v.13.1.0 PHP: 8.0.25 https://album.chauvigne.info/ v.13.2  PHP: 8.0.25
Système d'exploitation: Linux - Hébergeur 1&1-Ionos - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Hors ligne

#7 2021-02-12 16:06:32

TOnin
Membre
2010-08-10
73

Re: [Résolu] Modus : remonter la barre de menu au-dessus du header

Bonjour,
après avoir recherché dans le code 'page_banner', et tenté de dupliquer le code de la bannière après #menubar dans menubar.tpl, je me rends compte que ça ne marche pas...
Donc je propose cette solution rapide et loin d'être la plus élégante : copier le code HTML de la bannière, le coller à la fin de menubar.tpl, puis désactiver le rendu de la bannière dans les options de Piwigo, et ça devrait donner le résultat escompté.

Code:

<div id="theHeader"><h1 class="container-fluid" style="text-align: center;">
  La vallée de Dardennes et du Las<br>
  Cartes postales et photos anciennes</h1>
</div>

Le fait est qu'il n'y a pas, dans include/menubar.inc.php, d'assignation pour créer la variable $PAGE_BANNER dans menubar.tpl.

Hors ligne

#8 2021-02-12 16:39:53

Katryne
Membre
Provence
2016-12-03
1289

Re: [Résolu] Modus : remonter la barre de menu au-dessus du header

Merci TOnin, c'est du merveilleux bidouillage. Juste ce que je veux. J'ai même fait ça via les template extension et j'ai ajouté un peu de padding à gauche pour l'icône fermée des admins.

J'ai encore un petit souci pour la bannière en mode mobile portrait ou paysage, mais comme ça vire sur SmartPocket à ce moment-là, c'est tout bon.
Enfin, je crois.

Dernière modification par Katryne (2021-02-12 16:51:23)


https://photos.revestou.fr/  v.13.1 PHP: 8.0.25 - https://dardennes.revestou.fr/ v.13.2 php 8.0.25 - http://photos.katrynou.fr/ v.13.1.0 PHP: 8.0.25 https://album.chauvigne.info/ v.13.2  PHP: 8.0.25
Système d'exploitation: Linux - Hébergeur 1&1-Ionos - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Hors ligne

#9 2022-11-01 19:16:08

Katryne
Membre
Provence
2016-12-03
1289

Re: [Résolu] Modus : remonter la barre de menu au-dessus du header

Hello !
Je voudrais faire pareil avec BootStrap Darkroom. Je veux dire coller le menu tout en haut et avoir le titre du site en-dessous. Ou l'inverse, mais sur 2 lignes séparées. Le menu est trop long et quand on y ajoute les albums liés et les tags liés, on perd parfois le dernier item de menu (celui de la connexion)
J'ai essayé successivement (sans réussir) une template-extension de menu.tpl, puis de header.tpl. Mais j'ai été assez nullissime sur ce coup-là.
Qui aurait une suggestion, s'il vous plait ?

http://photos.katrynou.fr/


https://photos.revestou.fr/  v.13.1 PHP: 8.0.25 - https://dardennes.revestou.fr/ v.13.2 php 8.0.25 - http://photos.katrynou.fr/ v.13.1.0 PHP: 8.0.25 https://album.chauvigne.info/ v.13.2  PHP: 8.0.25
Système d'exploitation: Linux - Hébergeur 1&1-Ionos - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Hors ligne

#10 2022-11-04 11:11:40

gbo
Membre
Martigues
2006-11-01
1182

Re: [Résolu] Modus : remonter la barre de menu au-dessus du header

Katryne,
Juste une ébauche:
il fraudait dans header.tpl inverser l'ordre du menu et du titre
pour obtenir comme ci-dessous
<div class="collapse navbar-collapse" id="navbar-menubar">.........</div>
<a class="navbar-brand mr-auto" href="/">Carnets de balades</a>

Puis enlever le nowrap sur:
  @media (min-width: 992px)
.navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid {
  flex-wrap: nowrap;
}

je ne sais pas si c'est ce que tu souhaites et n'utilisant plus Darkroom, je n'ai aucune idée des effets de bord.

RQ:Tu as un petit  souci avec l'affichage des drapeaux des langues.
sur pwg-icon langflag-fr_FR le height:26px est de trop....

Hors ligne

#11 2022-11-04 13:38:29

Katryne
Membre
Provence
2016-12-03
1289

Re: [Résolu] Modus : remonter la barre de menu au-dessus du header

Merci gbo.
Déjà pour les drapeaux, je trouve pas où agir. J'ai regardé le css de Bootstrap, ma customisation dans LFE, le css du plugin SwitchLang. Mais ai-je besoin des drapeaux de langue ? Si je trouve pas, je vais désactiver Switchlang ...


https://photos.revestou.fr/  v.13.1 PHP: 8.0.25 - https://dardennes.revestou.fr/ v.13.2 php 8.0.25 - http://photos.katrynou.fr/ v.13.1.0 PHP: 8.0.25 https://album.chauvigne.info/ v.13.2  PHP: 8.0.25
Système d'exploitation: Linux - Hébergeur 1&1-Ionos - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Hors ligne

#12 2022-11-04 14:06:34

Katryne
Membre
Provence
2016-12-03
1289

Re: [Résolu] Modus : remonter la barre de menu au-dessus du header

Et pour le menu en haut .. ben un peu comme mes 13 essais précédents, j'ai bien réussi à inverser menu et titre, mais c'est toujours sur la même ligne (même en essayant un br juste avant.

C'est à cause du nowrap ? Et pourquoi le supprimer dans un des media-queries seulement, celui à min-width: 992px ?
Je te dis, je suis une quiche ...


https://photos.revestou.fr/  v.13.1 PHP: 8.0.25 - https://dardennes.revestou.fr/ v.13.2 php 8.0.25 - http://photos.katrynou.fr/ v.13.1.0 PHP: 8.0.25 https://album.chauvigne.info/ v.13.2  PHP: 8.0.25
Système d'exploitation: Linux - Hébergeur 1&1-Ionos - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Hors ligne

#13 2022-11-04 14:08:35

dreamer
Membre
St Cyr/mer (83)
2006-02-26
923

Re: [Résolu] Modus : remonter la barre de menu au-dessus du header

Katryne a écrit:

Merci GB.
Déjà pour les drapeaux, je trouve pas où agir. J'ai regardé le css de Bootstrap, ma customisation dans LFE, le css du plugin SwitchLang. Mais ai-je besoin des drapeaux de langue ? Si je trouve pas, je vais désactiver Switchlang ...

Salut voisine

je remarque que tes drapeaux sont un peu à la one-again., donc dans .pwg-icon, peux-tu mettre le width à 24px et le height à 16px

A+


beauxvoyages.fr/photos (photos), beauxvoyages.fr/jukebox (musiques) et tout nouveau beauxvoyages.fr/camping (camping-car) le tout en version 12.2

Hors ligne

#14 2022-11-04 14:30:29

Katryne
Membre
Provence
2016-12-03
1289

Re: [Résolu] Modus : remonter la barre de menu au-dessus du header

Pour les drapeaux, j'arrive à rien Dreamer. Alors, j'ai désactivé le plugin.


https://photos.revestou.fr/  v.13.1 PHP: 8.0.25 - https://dardennes.revestou.fr/ v.13.2 php 8.0.25 - http://photos.katrynou.fr/ v.13.1.0 PHP: 8.0.25 https://album.chauvigne.info/ v.13.2  PHP: 8.0.25
Système d'exploitation: Linux - Hébergeur 1&1-Ionos - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Hors ligne

#15 2022-11-04 14:38:28

gbo
Membre
Martigues
2006-11-01
1182

Re: [Résolu] Modus : remonter la barre de menu au-dessus du header

​Pour le drapeau tu peux ajouter simplement
#languageSwitch .pwg-icon {
  height: auto;
}

Pour le menu c'est un peu plus compliqué:
il faut​ gérer deux cas en fonctions de la taille de l'écran​​ et donc avoir:
<a class="navbar-brand mr-auto" href="/">Carnets de balades</a>
(visible seulement si moins de 992px avec flex-wrap:wrap  pour les petits écrans )
le texte 'balades..' restera à gauche de l’icône.


<div class="collapse navbar-collapse" id="navbar-menubar">.........</div>

<a class="navbar-brand mr-auto" href="/">Carnets de balades</a>
(visible seulement si plus de 992px avec flex-wrap: nowrap pour les grands écrans )
le texte 'balades..' sera sous le menu ....
en principe..

Tu as de la chance, j'ai refait la mise en page de mon menu, il y a peu de temps ....

Hors ligne

  •  » Styles
  •  » [Résolu] Modus : remonter la barre de menu au-dessus du header

Pied de page des forums

Propulsé par FluxBB

github twitter newsletter Faire un don Piwigo.org © 2002-2022 · Contact