[Résolu] barre personnelle au-dessus de la barre navigation

Vos requêtes concernant Mozilla Firefox, le navigateur Gecko alternatif, ne trouvèrent point de réponses lorsque vous cherchâtes ? Toute l'équipe Geckozone est prête à vous aider.

Modérateurs : myahoo, nico@nc, Mori, jpj

Freddy
Lézard à collerette
Messages : 498
Inscription : 15 nov. 2009, 11:37

Re: [résolu] barre personnelle au-dessus de la barre navigat

Message par Freddy »

Merci pour vos félicitations, c'est sympa :)
C'est vrai qu'en langage humain c'est plus long à décrire.

► Alors sinon, pour choisir l'affichage des barres en haut ou en bas, je sais pas si tu veux dire au moyen d'un genre de boite de dialogue où on coche soit l'une ou soit l'autre des deux options, mais ça je pense que ça dépasse la manipulation du CSS.
En revanche, comme tu utilises Stylish le même principe peut se faire:
en créant un style pour chaque cas, ensuite il suffit de décocher l'un et ensuite cocher l'autre, youpiii !!! \o/

Et donc ça peut se faire par exemple ( y aurait plusieurs solutions) comme ça:

→ Style pour les barres en haut ( faut que l'option "barre-onglet au-dessus" soit décochée)

Code : Tout sélectionner

/****** Barre en haut ******/

/*====== barre-Modules ======*/
#browser-bottombox
{ -moz-box-ordinal-group: 1 !important; }


/*====== toutes les barres ======*/
#navigator-toolbox
{  -moz-box-ordinal-group: 2 !important; }


 /*--- barre-perso au-dessus ---*/
#PersonalToolbar 
{ -moz-box-ordinal-group: 6 !important; }



/*====== fenêtre-page ======*/
#browser
{ -moz-box-ordinal-group: 3 !important; }




/***** Si toutefois "Barre-Onglet au-dessus" cochée *****/
/* mais normalement pas utile dans ton choix */
#titlebar[style="margin-bottom: -45px;"]
{ margin-bottom: 0 !important; }

#titlebar[style="margin-bottom: -45px;"] + #tab-view-deck > vbox #TabsToolbar
{
 margin-left: -118px !important;
  margin-right: -140px !important; 
}

Par contre en effet, pour les barres en bas c'est possible de mettre la barre-titre aussi en bas, mais ça peut être un problème par rapport aux bouton-commandes de la fenêtre de Windows (en haut à droite). Ils seront cachés par la page pcq eux ils restent en haut, mais tout en restant actifs, ça risque peut-être de pas être pratique ???
Donc là j'ai laissé la barre-titre en haut (mais à toi de voir)

→ Style pour les barres en bas ( faut que l'option "barre-onglet au-dessus" soit décochée)

Code : Tout sélectionner

/****** Barre en bas ******/

/*======= fenêtre-page =======*/
#browser
{ -moz-box-ordinal-group: 2 !important; }



/*======= toutes les barres =======*/
#navigator-toolbox
{  -moz-box-ordinal-group: 3 !important; }


 /*--- ordre des barres ---*/
#TabsToolbar
{ -moz-box-ordinal-group: 1 !important; }

#nav-bar,
#PersonalToolbar
{ -moz-box-ordinal-group: 2 !important; }



/*======= barre-Modules =======*/
#browser-bottombox
{ -moz-box-ordinal-group: 4 !important; }

Euh, pis sinon ça
lucette a écrit :-perso (qui s'ajoutent les unes au dessous des autres)
j'ai pas bien saisi :?:
T'as plusieurs lignes pour la barre-perso ?
Si oui, ç'est avec une extension (laquelle) ?
Ou avec ce genre de code → http://www.geckozone.org/forum/viewtopi ... 4a#p616186



► Et 2° question:
D'après tes précédentes captures je pense que tu utilises le thème "Noia 4" (voir Noia Fox, mais je penche plus pour le premier), mais ta dernière capture me met le doute pcq j'ai pas tout capté...
Sinon j'avais bien saisi ton code, mais:

- de 1, je sais pas trop si c'est utile de traiter la zone de texte pour les onglets épinglés vu qu'il y en a pas justement pour les épinglés...
- de 2, si c'est une question de meilleure lisibilité je me demande si se serait pas mieux de faire autrement, pcq au final tu te retrouves avec des onglets pratiquement entièrement blancs, et du coup ça atténue pas mal la distinction entre l'onglet "actif" et les autres (et aussi le look du beau boulot de ce thème - mais ça c'est question de goût perso)
Est-ce qu'un truc dans ce genre ça t'irai pas ?
Image
en plus en même temps ça résoudrait les trois points qui t'embête.

Voilà le code si tu veux essayer:

Code : Tout sélectionner

 /*--- Onglet Actif ---*/
.tabbrowser-tab[selected="true"] .tab-text 
{
text-shadow: white 2px 1px 1px, white -2px -1px 1px, white 2px -1px 1px !important
}


/*--- autres Onglets ---*/
.tabbrowser-tab:not([selected="true"]) .tab-text 
{
color: white !important;
text-shadow: black 2px 2px 2px, black -2px -1px 2px !important;
}


/*--- Favicone ---*/
.tab-icon-image
{
 opacity: 1 !important;
 /*background: rgba(100%,100%,100%,0.7) !important; /*ajouter un fond*/
}
Tu peux bien sûr arranger tout ça à ta sauce (couleur, ombre,...).
Et si tu veux ajouter un fond aux favicone tu supprime les /* devant /*background: rgba(100%,100%,100%,0.7) !important;


Je sais pas si tout est clair pour toi, pcq
lucette a écrit :puisque tu as l'air de très bonne constitution
moi j'sais même plus si tout est ok avec tout ces trucs, si ça se trouve c'est moi qui suis passer en mode "reverse" :lol:
lucette
Lézard à collerette
Messages : 210
Inscription : 29 oct. 2008, 16:58

Re: [résolu] barre personnelle au-dessus de la barre navigat

Message par lucette »

bonjour,

waouh, y'a de quoi faire, merci!
Freddy a écrit :En revanche, comme tu utilises Stylish le même principe peut se faire:
en créant un style pour chaque cas, ensuite il suffit de décocher l'un et ensuite cocher l'autre, youpiii !!! \o/
c'est exactement ce que je voulais...mais c'est ma faute aussi, j'ai pas posé la question en humain mais en lucette :mrgreen:
Freddy a écrit :
lucette a écrit ::-perso (qui s'ajoutent les unes au dessous des autres)
j'ai pas bien saisi :?:
lucette a écrit :encore une fois... : c'est normal! décidément :oops:

T'as plusieurs lignes pour la barre-perso ?
non non, c'est pour qu'en cas de rajout (simplement par la fenêtre personaliser)la barre s'installe directement dans l'ordre voulu. ça marchera comme ça, avec tes codes?
no comprendo a écrit :cette phrase non plus, je la sens pas :roll:
Freddy a écrit :- de 1, je sais pas trop si c'est utile de traiter la zone de texte pour les onglets épinglés vu qu'il y en a pas justement pour les épinglés...
Image
8-) ça fait un p'tit repère :wink:
Freddy a écrit :pcq au final tu te retrouves avec des onglets pratiquement entièrement blancs
non, parce que ça ne fait ce gros platras qu'avec tree style tabs option metal, et c'est justement ça que je voulais utiliser, grrr! une solution doc freddy? :cry:

avec les autres ça va mieux :
Image
bon mélangé a ton code c'est peu être un peu beaucoup, (oublié :oops: ), même si ces ombrages sont super beau (s'is ne son pas mélangés à mon code :wink: )

pour le favicône dans la zone blanche tu as raison, ce serait trop mais alors, je vois pas comment distinguer certains favicônes (genre laposte.net ou orange) dans des onglets colorés :?
Image :shock: faut vraiment que j'arrête de cliquer partout et que j'en désactive un des deux, parce que là, le geckozone, il fait mal aux yeux :mrgreen:

mais je préfèrerais avoir ma petite zone blanche :
-pour la hauteur c'est réglé (en dehors de tree style tabs "métal", snif)
-le favicône dehors mais pas d'idée pour distinguer ceux qui se fondent dans la couleur de l'onglet
-reste la largeur auto-réglage, tu penses que c'est possible?

grand merci :D
Freddy
Lézard à collerette
Messages : 498
Inscription : 15 nov. 2009, 11:37

Re: [résolu] barre personnelle au-dessus de la barre navigat

Message par Freddy »

lucette a écrit :non non, c'est pour qu'en cas de rajout (simplement par la fenêtre personaliser)la barre s'installe directement dans l'ordre voulu. ça marchera comme ça, avec tes codes?
→ si tu veux dire que si tu la supprime en la glissant dans la fenêtre "Personnaliser", et que plus tard tu la remets, alors oui c'est bon puisque elle aura toujours le même nom.

→ si c'est pas ça ta question alors
lucette a écrit : no comprendo a écrit:cette phrase non plus, je la sens pas :roll:
lu et approuvé :mrgreen:



► Je respect les choix et les goûts de chacun, mais j'avoue que c'est spécial quand-même: tu veux des onglets colorés, tout en préférant le seul thème de "tree style tab" qui les recouvre d'un autre fond, tout en voulant un autre fond pour la zone qui prend le plus de surface dans l'onglet.....
La solution de doc Freddy → une prise régulière d'une dose de "Daltonisme" par le mode de ton choix: comprimé, sirop, suppo, homéopatie,...
A prendre jusqu'a ce que tu ne différencies plus aucune couleur, comme ça tu seras plus embêté avec ces choix et ça simplifira les choses, et voilà le tour est joué :mrgreen: :lol:


Plus sérieusement, non j'ai pas réussi pour la hauteur ni pour l'auto-réglage de la largeur :?
Et d'ailleurs, je sais pas si ça vient de l'extension qui colorie tes onglets, pcq pour moi, même avec les autres thèmes de "tree style tab" ton code me donne le même résultat pour tous ???
Ca n'a pas l'air d'être "ColorfulTabs", j'ai essayé avec mais j'ai pas trop cherché non plus.

Mais je reviens sur la solution qui me parait plus simple, si c'est bien une question de meilleure lisibilité (?) ,qui est de modifier la couleur (de ton choix) du texte, et pourquoi pas de renforcer la lisibilité avec l'option des ombres.
Après, si c'est une question esthétique ou autre, je te laisse libre de choisir.

Je te met différents exemples pour te donner une idée de ce qu'on peut faire, et en même temps tu pourras voir une solution pour distinguer les favicones, et aussi une autre solution pour repérer l'onglet actif épinglé (au cas où)

• sans le mode "métal"
Image

• avec le mode "métal" (ex 1)
Image

• avec le mode métal (ex 2)
Image

v'là les codes pour voir ça:
• première capture: le code qui suit intègre la différence si c'est pas le thème "métal".

• "métal" (ex 1)

Code : Tout sélectionner

/*=== Favicone ===*/
.tabbrowser-tab:not([selected="true"]):not([pinned]) .tab-icon-image
{ 
opacity: 1 !important;
-moz-box-shadow: black 0px 0px 2px 2px !important;
}


/*=== Favicone Onglet Actif et Pinglé :) ===*/
.tab-content[selected="true"][pinned] 
{
opacity: 1 !important;
-moz-box-shadow: inset aqua 0px 0px 2px 2px  !important;
}


/*=== texte Onglets ===*/
.tabbrowser-tabs[treestyletab-style~="metal"] 
.tabbrowser-tab:not([selected="true"]) .tab-text
{
text-shadow:
 white 2px 2px 1px, white -2px -2px 1px, white 2px -2px 1px, white -2px 2px 1px,
 white 4px 3px 2px, white -4px 3px 2px, white 4px -3px 2px, white -4px -3px 2px
 !important
}
• "métal" (ex 2)
Y a juste cette partie qui change:

Code : Tout sélectionner

/*--- texte Onglets ---*/
.tabbrowser-tabs[treestyletab-style~="metal"] 
.tabbrowser-tab:not([selected="true"]) .tab-text
{
color: white !important;
font-weight: bold !important;

text-shadow:
 black 1px 1px 0px, black 2px 2px 1px, black 2px 2px 2px,
 black -2px -1px 4px, black 2px 1px 4px
 !important
}
Si tu trouves la couleur du favicone trop prononcée tu peux jouer sur son opacité/transparence par cette méthode

Code : Tout sélectionner

-moz-box-shadow: rgba(0%,0%,0%,0.7) 0px 0px 2px 2px !important;
Et bien entendu, toutes les valeurs ne sont sont que des exemples, tu es libre d'essayer tes propres envies, ça risque rien :wink:

Voilà. Sorry pour le reste. Ptêt que si un Ottomar ou un Pastisman ou autre(s) passent par ici ils seront te dire ???
lucette
Lézard à collerette
Messages : 210
Inscription : 29 oct. 2008, 16:58

Re: [résolu] barre personnelle au-dessus de la barre navigat

Message par lucette »

Bonjour,
Freddy a écrit :
lucette a écrit : non non, c'est pour qu'en cas de rajout (simplement par la fenêtre personaliser)la barre s'installe directement dans l'ordre voulu. ça marchera comme ça, avec tes codes?
→ si tu veux dire que si tu la supprime en la glissant dans la fenêtre "Personnaliser", et que plus tard tu la remets, alors oui c'est bon puisque elle aura toujours le même nom.
→ si c'est pas ça ta question alors
no comprendo a écrit :cette phrase non plus, je la sens pas :roll:
lu et approuvé :mrgreen:
nonpu :mrgreen: :

je clique droit sur barre de navigation/personnaliser, j'ajoute : barre 1, puis barre 2, puis barre 3...
et j'obtiens l'ordre d'affichage :

je choisi toutes les barres en haut :
(de haut en bas)
-titre
-statut
-barre3
-barre2
-barre 1
-perso (qui s'ajoutent les unes par dessus les autres)
-navigation
-onglets

je choisi en bas (ben, l'inverse) :
(toujours de haut en bas)
-onglets
-navigation
-perso (qui s'ajoutent les unes au dessous des autres)
-barre1
-barre2
-barre3
-statut
-titre

bon, ben, ce coup çi, je me suis trouvé super clair, non? :mrgreen:

merci...
Freddy
Lézard à collerette
Messages : 498
Inscription : 15 nov. 2009, 11:37

Re: [résolu] barre personnelle au-dessus de la barre navigat

Message par Freddy »

bonjour,

T'as pas essayé ?

Si tu parles bien de l'ajout de barre d'outils (propres à Fx)
► pour l'option des barres en bas, apparemment c'est ok.
► pour les barres en haut, c'est toujours faisable par le principe des "-moz-box-ordinal-group" ,sachant que le nom du sélecteur sera (au choix):
#__customToolbar_Nom-de-la-barre

ou

toolbar[toolbarname="Nom-de-la-barre"]


Si c'est des barres venues d'extensions, faudra trouver leur nom avec "DomInspector"
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 19 invités