Hauteur de la barre de navigation [Résolu]

[Chrige]

Bonjour
Je recherche le script à inclure dans UserChrome pour paramétrer la hauteur de la barre de navigation,
ainsi que la taille des icones pour cette même barre.

Merci

[Bob49]

Bonjour
Hauteur de la barre de navigation:

Code : Tout sélectionner

#nav-bar
{
min-height: 35px !important;
max-height: 35px !important;
}

Taille des boutons :

Code : Tout sélectionner

#nav-bar .toolbarbutton-icon
{
   display: -moz-box !important;
   width: 20px !important;
   height: 20px !important;
   padding: 0px !important;
}

***************************************************************************************************************************
Mais peu être plus intéressant :

Code : Tout sélectionner

/*réglage hauteur barre d'adresse et boutons barre de navigation*/
#urlbar
{
min-height: 30px !important;
max-height: 30px !important;
}

/*fond de la barre d'adresse*/
#urlbar .textbox-input-box
{
min-height: 24px !important;
max-height: 24px !important;
background-color: #00B6B6 !important;
margin-top : -1px !important;
}

/*Taille font*/
#urlbar
{
font-size: 15pt !important;
}

/*hauteur de la barre de recherche*/
#searchbar
{
min-height: 30px !important;
max-height: 30px !important;
}

Pour ce qui est dedans :
#urlbar : Hauteur de la barre de navigation et des boutons.
#urlbar .textbox-input-box : pour un fond de couleur..
#urlbar ..font-size : Pour ajuster la taille de la police de la barre d'adresse.
#searchbar : Si tu utilise la barre de recherche sur la même ligne..
Si tu augmente de trop la hauteur de l'urlbar, il faudra y rajouter le code pour la taille des boutons qui se trouve plus haut, pour y réglé aussi la largeur.
Je t'en ai mis un peu plus, à toi de voir si tu en à l'utilité..et de régler les chiffres.
J'ai vérifié tous ses codes (quoi que j'en utilise) et ça fonctionne

[Chrige]

Bonsoir Bob49

Merci beaucoup pour ta réponse

Très complète

Cependant je me trouve devant un problème
Tes scripts permettent bien de régler à peu près tout
Sauf la fenêtre de l’adresse URL

Du coup, comme je réduis au maximum la barre de navigation
Cette fenêtre déborde sur la barre personnelle

Même conséquence pour la barre de recherche (Moteur de recherche)

Est-il possible de diminuer la hauteur des 2 fenêtres

[Bob49]

Bonjour

Est-il possible de diminuer la hauteur des 2 fenêtres

On les appelle des barres, des fenêtres http://www.geckozone.org/articles/2005/ ... s-partie-4

Je comprends pas ! je t'ai bien mis le code pour la barre d'adresse et un autre pour la barre de recherche..leurs noms : urlbar et searchbar (d'ailleurs déjà expliqué à la fin de mon précédent message !)
Dans la 2ème fenêtre codée que j'ai mis, tu peux enlevé et modifier ce que tu veux.

Il est vrai que j'ai vérifié les codes en augmentation de l'hauteur Donc dés que j'aurais le temps, je vérifierais en diminution ceux que je t'ai proposé..

[Chrige]

Bonjour

Merci pour le tutoriel sur la terminologie
(Ca va améliorer la compréhension !)

J’ai fait pas mal d’essais
En fait, j’ai trouvé en partie ce qui posait problème :

Concernant la Barre d’adresse, j’ai modifié la valeur du « margin-top »
Je l’ai mis à : -7px
Maintenant toute la barre d’adresse est de la même hauteur.

Le seul problème en suspend pour cette barre d’adresse, c’est la couleur
La zone couleur reste figée, de fait si on diminue l’hauteur de la barre, la zone couleur dépasse par le dessus.

Pour la barre de recherche :
Les réglages n’ont aucun effet
(Ce n’est pas très grave, car elle est symétrique avec la barre d’adresse)

J’ai essayé de lui joindre un fond en couleur, mais le problème est le même que pour la barre d’adresse.

[Freddy]

Bonjour,

D'après mes essais, ça devrait marcher avec ça:

Code : Tout sélectionner

#nav-bar
{
height: 20px !important;
}

#urlbar
{
height: 18px !important;
background: rgba(80%,90%,0%,0.6) !important;
}


#searchbar > textbox
{
height: 18px !important;
background: rgba(100%,90%,0%,0.4) !important;
}

[Chrige]

Bonjour Freddy

Chapeau, ça marche impec !

Reste un autre problème qui ressemble un peu à celui de la taille du fond de couleur pour la barre d’adresse.
C’est la police !

Si on sélectionne une grande police, l’adresse dépasse de la barre d’adresse (par le dessus)

Je réduis donc la police de manière à cela ne dépasse pas
Mais pour cela je suis obligé de choisir une très petite police
Car l’adresse ne se centre pas sur la barre, mais se place vers le haut

Un peu compliqué :

En fait on dirait que l’adresse se centre sur un espace différent de celui de la barre d’adresse.

Des images seront peut-être plus parlantes !!

Pour information quel est la différence entre

Code : Tout sélectionner

height: 18px !important

et

Code : Tout sélectionner

{min-height: 20px !important;
max-height: 20px !important;}

[Bob49]

Les codes ne donnent pas les mêmes choses selon la taille de l'écran...

Le code de Freddy me donne ceci sur mon p'tit écran (à 20px):

Ce qui fait pas beau pour moi
Mais coté police, en adaptant la taille.. :


Mais j'ai réessayer avec ce que j'avais proposé plus haut, en rectifiant les valeurs mais pas de trop car les favicons se tassent !...:

Code : Tout sélectionner

    /*réglage hauteur barre d'adresse et boutons barre de navigation*/
    #urlbar
    {
    min-height: 20px !important;
    max-height: 20px !important;
    }

    /*fond de la barre d'adresse*/
    #urlbar .textbox-input-box
    {
    min-height: 14px !important;
    max-height: 14px !important;
    background-color: #00B6B6 !important;
    margin-top : -1px !important;
    }

    /*Taille font*/
    #urlbar
    {
    font-size: 10pt !important;
    }

    /*hauteur de la barre de recherche*/
    #searchbar
    {
    min-height: 20px !important;
    max-height: 20px !important;
    }

@ Chrige, sur ta 2ème capture, ta police n'est pas un peu exagéré

[Chrige]

SI j’ai exagéré, mais c’était pour bien faire voir.

Le problème ne tient pas à la taille de la police
Mais à la position de l’adresse dans la barre.

Regarde bien, avec la grande police,
L’adresse dépasse uniquement au-dessus.

Avec la petite police, l’adresse ne dépasse pas
Mais elle ne correspond pratiquement qu’à la moitié de la hauteur de la barre.

L’adresse n’est en fait pas du tout centrée à l’intérieur de la barre.

[Freddy]

Pour le min-height et max-height j'ai retrouvé ça, en gros c'est plutôt utilisé pour les blocs avec un contenu variable, comme les onglets ou les menus par exemple.


Pour la taille de la police je sais pas quel code tu utilise exactement, j'ai pas rencontré de problème de centrage, mais j'ai essayé de diminuer au maximum les espaces haut et bas qui séparent les caractères des bordures de la barre, pour pouvoir avoir la taille de police maxi par rapport à la hauteur de barre choisie sans que les "pattes" des caractères soient rognées, voilà ce qui marche chez moi:

Code : Tout sélectionner

#nav-bar
{
 height: 20px !important;
}

/*==== barre d'Adresse ====*/
#urlbar
{
 height: 20px !important;
 background: rgba(80%,90%,0%,0.6) !important;
 padding-bottom: 0px !important;
}

#urlbar .textbox-input-box
{
 margin-top: -8px !important;
 font-size: 18px !important;
 /*font-weight: bold !important*/
 }

#identity-box
{ margin-bottom: 0 !important }


/*==== barre de Recherche =====*/
#searchbar > textbox
{
 height: 20px !important;
 background: rgba(100%,90%,0%,0.4) !important;
 padding-bottom: 0 !important;
}

#searchbar .textbox-input-box
{
 margin-top: -8px !important;
 font-size: 18px !important;
}

Et donc si tu veux exactement les mêmes propriétés pour les deux barres, tu peux regrouper ça:

Code : Tout sélectionner

#nav-bar
{
 height: 20px !important;
}


#urlbar,
#searchbar > textbox
{
 height: 20px !important;
 background: rgba(80%,90%,0%,0.6) !important;
 padding-bottom: 0px !important;
}

#urlbar .textbox-input-box,
#searchbar .textbox-input-box
{
 margin-top: -8px !important;
 font-size: 18px !important;
 /*font-weight: bold !important*/
 }

#identity-box
{ margin-bottom: 0 !important }

Le font-weight: bold !important c'est au cas où ça t'intéresse de mettre la police en gras pour avoir une meilleure lisibilité malgré une taille assez petite...

[Chrige]

Bonjour Freddy

Merci pour les renseignements pour « min-height et max-height »
J’y vois plus clair

J’ai mis ton script, mais cela ne changeait rien
Mais j’ai fini par trouver grâce à toi

En fait j’ai joué sur « margin-top » en modifiant la valeur
Maintenant mon adresse est bien centrée
C’est le top !!!

Si, il me reste un curieux problème

Dans cette barre de navigation, j’ai deux icones que je ne vois pratiquement plus, tant ils sont petits
Ils concernent :
« Afficher la liste des onglets ouverts » et
« Afficher la liste des fenêtres récemment fermées »

Tous les autres icones sont biens, sauf ces 2 là !
Je pense que cela peut provenir de la définition même de ces icones ?
Mais alors je ne pense que l’on puisse intervenir pour augmenter la taille de seulement ces 2 icones

[Freddy]

Je vois pas trop de quelles icones il s'agit, alors:

- soit c'est peut-être le bouton "Lister tous les onglets" qui se trouve par défaut au bout de la barre d'onglet à droite, et que tu as déplacé, mais pour l'autre je vois pas...

- soit j'ai des neurones qui sont pas rentrés ou repartis en vacances

- soit ces icones proviennent d'une extension que tu as installé, et dans ce cas il faudrait le nom de la coupable


Sinon une ptite capture d'écran pourrait éclaircir tout ça.

[Chrige]

Bonjour

Une petite photo, pas de problème

J'aurai du commencer par là




C'est vrai que l'on peut arriver à la même chose autrement
Mais je trouve ces 2 icones bien pratiques ...

[Freddy]

Oui donc

- soit ces icones proviennent d'une extension que tu as installé, et dans ce cas il faudrait le nom de la coupable

et aussi le code que tu as utilisé pour redimensionner les autres boutons.

[Chrige]

Bonjour

- soit ces icones proviennent d'une extension que tu as installé, et dans ce cas il faudrait le nom de la coupable

Le module : Tab Mix Plus

et aussi le code que tu as utilisé pour redimensionner les autres boutons.

Code : Tout sélectionner

#nav-bar .toolbarbutton-icon
{display: -moz-box !important;
width: 25x !important;
height: 20px !important;
padding: 1px !important;}