Personnalisation (avancée) de la toolbar

par louha Mar 2 Avr 2024 - 14:55

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : non défini
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Il s'agit plutôt d'une demande d'aide pour créer un code
Lien du forum : https://www.thecauldron-rpg.net/

Description du problème

Bonjour à tous,

Merci à ceux qui prendront le temps de m'aider.

Il y a plusieurs choses que j'aimerais faire avec la toolbar, donc je vais essayer d'organiser ma pensée pour que ça soit plus simple à comprendre pour tout le monde.

1. Faire apparaitre la barre de Menu à l'intérieur de la toolbar
J'ai commencé par suivre la solution de ce sujet malheureusement lorsque je fais ça, certains des liens du menu ne fonctionnent plus (notamment le lien "profil", qui renvoie sur une page vide avec juste les liens d'administration en bas). J'ai tenté simplement de mettre la barre de navigation telle quelle sans aucune modification à cet endroit, mais impossible de la faire passer "sur" la toolbar.

Le code du overall_header (uniquement la partie concernée)

Code:: </head> <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}"> <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}"> <tr> <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td> </tr> </table>

Le CSS associé à cette partie :

Code:: /* --------------------------------- Barre de navigation --------------------------------- */ #navigation{ padding-bottom: 3px; opacity: 0.7; position: fixed; valign : center ; width : 100% ; margin-top: -9px; z-index : 99; text-align: center; } a.mainmenu{ color:#fff; font-size:14px!important; font-family: 'Open Sans Condensed', cursive; text-align:center; letter-spacing:1px; width:135px;border-radius:15px 100px/100px 15px; background:#02505C; text-align:center; } a{text-decoration: none;}

Le résultat : https://zupimages.net/up/24/14/pmvu.png

Le but est donc d'avoir le texte dans la toolbar, qui reste fixé en haut de l'écran quand on scroll, et non en dessous et qui disparait au scroll, mais quel que soit le CSS que j'applique, soit la barre disparait totalement, soit soudainement tous les liens du menu se superposent les uns au autres. je ne comprends absolument pas ce qu'il se passe. Si quelqu'un a une idée de comment faire ça je suis preneuse. (Pourtant ça doit être un truc tout simple, je sens que je vais me sentir stupide devant la solution haha)

Pour info le forum de test est (sous hide)

2. Faire disparaitre le "bienvenue user" et externaliser la partie des liens rapides

Ce point là est un peu plus touchy je pense. Je suis en train d'essayer de personnaliser la toolbar, et notamment le menu déroulant qui apparait lorsqu'on clique sur "bienvenue user" soit cette partie : https://zupimages.net/up/24/14/bn1m.png
Le but c'est d'avoir ceci : https://zupimages.net/up/24/14/jctb.png
donc de "sortir" toute la partie des liens qui se trouvent dans "bienvenue User" pour les afficher en permanence sur le header, et de faire disparaitre le "bienvenue user" en haut à droite à la place.

Pour faire disparaitre le "bienvenue user", c'est facile, il suffit d'utiliser ce sujet. Le problème c'est que ça fait aussi disparaitre l'avatar et le contenu que je souhaite conserver.
J'ai testé de bidouiller à partir de ce tuto, mais ça ne fait que faire apparaitre l'avatar, et tout le reste du menu ne bouge pas du tout.

Du coup, chers Devactifs, cette seconde idée que j'ai eue est-elle possible, et si oui : comment est ce qu'on fait pour réaliser mes envies de codage ?

Dans tous les cas, merci à tous d'avoir lu ce pavé et d'avoir pris du temps =)

par **Toryudo** Mer 3 Avr 2024 - 9:06

Bonjour !

Alors, pour le premier point, il faudrait tout d'abord donner un id à l'élément table, qu'on appellerait par exemple "blocmainmenu" :

Code:: <table id="blocmainmenu" cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">

C'est sur cet élément qu'on veut mettre le position fixed, pour que tout ce qu'il contient défile en même temps que la page. Quand je fais ça, les liens ne sont plus centrés, donc on ajoute un left 0 et un right 0 pour les recentrer :

Code:: #blocmainmenu { position: fixed; left: 0; right: 0; }

Ensuite, vous pouvez ajouter un top pour positionner tout ce bloc par rapport au haut de la page, et ajouter un z-index très élevé pour être au-dessus de la toolbar (ou alors, baisser le z-index de la toolbar avant). Par défaut, je vois que le z-index de la toolbar est égal à 20002.

Pour le deuxième point, pour moi, il faut juste ces deux CSS en plus pour faire disparaitre le "Bienvenue xxx" et faire apparaitre le cadre.

Code:: #fa_welcome { display: none !important; } #fa_menulist { display: block !important; }

Si ça ne fonctionne pas chez vous, est-ce que vous auriez un compte test pour que je puisse voir en direct ? (à envoyer par MP)

par louha Mer 3 Avr 2024 - 13:37

Bonjour Toryudo !

Il suffisait effectivement d'ajouter un ID à mon menu pour pouvoir le placer où je le voulais... Merci beaucoup, je pensais que travailler directement avec l'ID "navigation" qui semblait être celle gérant de base le menu serait suffisant.

Et, ce duo de CSS fonctionne bien pour faire ce que je veux pour la seconde question. Je vais tenter de personnaliser tout ça et je reviendrais ouvrir un sujet si jamais quelque chose bug.

Merci beaucoup !

Personnalisation (avancée) de la toolbar