personnaliser Firefox avec le userChrome.css

[pirlouy]

Je viens de retester mon style, et la barre d'onglets est bien transparente.

Tu veux pas installer Stylish (très pratique) et essayer le style pour faire un essai au moins ?

[bormat]

Merci les gars,
Mais j'ai quand même des problèmes avec ces deux scripts.

Script de bormat :


Script de pirlouy :


Aucun des deux n'utilise la barre d'onglets.

Bizarrement, les script le plus convainquant que j'ai pu écrire ressemble étrangement à celui de pirlouy mais a un comportement plus proche de ce que je souhaite. Le seul problème restant étant que, comme avec le script de pirlouy, dès que je trouche à 'window' ou '#main-window', tout le cadre de la fenêtre disparait :


Mon script :

Code : Tout sélectionner

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

window {background-color:white!important;
background: url("http://www.izipik.com/images/20080920/j4w2y7h2ady4iqqfl2-Fluorescent-Blue-Mushroom-2-QL3R4YTHJ6-1280x1024.jpg") !important;
}

toolbox,
.tabbrowser-tabs {
-moz-appearance: none !important;
background-color:transparent!important;
}

D'autres idées ?

désolé j'ai confondu onglet et barre d'onglet voici un code qui marche j'ai comme ta 3 eme capture mais avec les bord des fenêtres

Code : Tout sélectionner

window {background-color:white!important;
background: url("http://www.izipik.com/images/20080920/j4w2y7h2ady4iqqfl2-Fluorescent-Blue-Mushroom-2-QL3R4YTHJ6-1280x1024.jpg") ;
}

toolbox,
.tabbrowser-tabs {
-moz-appearance: none !important;
background-color:transparent!important;
}

il suffisait d'enlever le 1er important

au fait comment tu fait pour enlever les bord entre les barres avec border:none à chaque barre ?

[bormat]

et la miniature

[yfscooby]

J'utilise bien Stylish pirlouy

il suffisait d'enlever le 1er important

Trop fort. Ça marche. Merci !

au fait comment tu fait pour enlever les bord entre les barres avec border:none à chaque barre ?

Je pense que tu voulais dire "sans border:none" ?
Honnêtement, je ne sais pas. Je n'ai rien fait. Même si je créé un nouveau profil, je n'ai pas les séparateurs horizontaux.

[ottomar]

Bon dimanche

il suffisait d'enlever le 1er important

il y a une explication à cela
tu supprimes le !important, tu peux donc supprimer la ligne entière : elle n'a plus aucune conséquence dans le css
!important signale au navigateur qu'il doit "écraser" le style pré-défini
ainsi si tu écris

#machin
{
background:white!important;
background:green!important;
background:black;
}

ton fond sera vert
ou

#machin
{
background:url(/machin/truc.jpg)!important;
background:green!important;
background:black;
}

ton fond sera vert aussi
dans le cas d'un fond en image, il n'est donc pas nécessaire de spécifier une couleur de fond, sauf si ton image est plus petite que ton écran et que tu ne veux pas qu'elle se répète

voilà, en gros et juste pour éclaircissement

[bormat]

Bon dimanche

il suffisait d'enlever le 1er important

il y a une explication à cela
tu supprimes le !important, tu peux donc supprimer la ligne entière : elle n'a plus aucune conséquence dans le css
!important signale au navigateur qu'il doit "écraser" le style pré-défini
ainsi si tu écris

#machin
{
background:white!important;
background:green!important;
background:black;
}

ton fond sera vert
ou

#machin
{
background:url(/machin/truc.jpg)!important;
background:green!important;
background:black;
}

ton fond sera vert aussi
dans le cas d'un fond en image, il n'est donc pas nécessaire de spécifier une couleur de fond, sauf si ton image est plus petite que ton écran et que tu ne veux pas qu'elle se répète

voilà, en gros et juste pour éclaircissement

en fait je voulais dire le 2 eme j'avais pas bu le important de la 1ere ligne
celons ton explication comme j'ai enlever le important de la seconde ligne je peux la supprimer, ben j'ai donc supprimé la seconde ligne et ça ne marche plus


voilà ce que donne le code optimisé

Code : Tout sélectionner

window {
background: url("http://www.izipik.com/images/20080920/j4w2y7h2ady4iqqfl2-Fluorescent-Blue-Mushroom-2-QL3R4YTHJ6-1280x1024.jpg") ;
}
toolbox,
.tabbrowser-tabs {
-moz-appearance: none !important;
background-color:transparent!important;
}

[ottomar]

salut Bormat
strange in the night ! ton code ne marche pas chez moi ! je te mets le sérieux code de pirlouy : tu écrêmes pour arriver à ce que tu veux !

Code : Tout sélectionner

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* this style allows transparent toolbars, tabs bar & status bar */
/* tested on default theme only, firefox 3.0, Windows XP, Vista, Ubuntu 8.04 */

/* Toolbars, urlbar, searchbar and statusbar borderless */
   #urlbar, .searchbar-textbox, toolbox { border-style: none !important; }
    toolbar, #status-bar { border-style: none !important;
                           -moz-appearance: none !important; }

/* Transparency */
   #navigator-toolbox { -moz-appearance: none !important;
                        background-color: transparent !important; }
   #browser .plain { background-color: transparent !important; }
   #urlbar { -moz-appearance: none !important; }
   #urlbar:not([level="high"]):not([level="low"]) {
       background-color: transparent !important; }
   .searchbar-textbox { background-color: transparent !important;
                        -moz-appearance: none !important; }
   #status-bar { -moz-appearance: none !important;
                 background-color: transparent !important; }
   .tabbrowser-tabs { -moz-appearance: none !important;
                      background-color: transparent !important; }

/* wallpaper in background */

   #main-window[windowtype="navigator:browser"] {
       background-position: 0px 0 !important;
       -moz-appearance: none !important;
       background-repeat: no-repeat !important;
/*************************************************************************/
/* a wallpaper will eat RAM ressources so I advise you to compress it...

/* Here, I just put an example so you can see the result but I don't
   think using an image from web is a viable solution. You have 2 solutions:
   - use Data URI like both examples just below, but that's not recommanded
     because Stylish will freeze a little bit because of all these datas;
   - use userChrome.css: I think it's the best solution. Put your wallpaper
     in chrome directory of your profile and you just have to put this:
       #main-window[windowtype="navigator:browser"] {
           background-image: url("yourwallpaper.jpg") !important;}
   /*************************************************************************/

       background-image: url("http://www.enregistrersous.com/images/145679654120071022174003.jpg") !important;

   }


/* Background Image for toolbars & statusbar, more readable */

   #navigator-toolbox, #FindToolbar, .tabbrowser-tabs ,#status-bar {

/* choose your (transparent & clear) image thanks to Stylish > Insert > URI Data */
/* 400x25 is enough I think */

        background-image: url(
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAAZCAYAAAAfd3hoAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjMxN4N3hgAAAUxJREFUeF7t2MGJAzEABMF1hs4/GS12BurnUAf+nT5SQQ/7Oed8H39uwA24ATfgBm5v4BcQP3fAAAMMMHBr4Lk94P8hY4ABBhj4f70CAQQGGGCAgWJAQHzC8wmTAQYYSAYEBJwEp6wVZ6xcBrYMCIiACAgDDDCQDAgIOAmOJbm1JL2n9ywGBERABIQBBhhIBgQEnASnrBVnrFwGtgwIiIAICAMMMJAMCAg4CY4lubUkvaf3LAYEREAEhAEGGEgGBAScBKesFWesXAa2DAiIgAgIAwwwkAwICDgJjiW5tSS9p/csBgREQASEAQYYSAYEBJwEp6wVZ6xcBrYMCIiACAgDDDCQDAgIOAmOJbm1JL2n9ywGBERABIQBBhhIBgQEnASnrBVnrFwGtgwIiIAICAMMMJAMCAg4CY4lubUkvaf3LAYEREAEhAEGGEgGXhwx0gQ1bBHEAAAAAElFTkSuQmCC"
        ) !important;
   }

/* Allows searchbar & urlbar readable */

   .searchbar-textbox, #urlbar:not([level="high"]):not([level="low"]) > 
     .autocomplete-textbox-container {

/* choose your (transparent & clear) image thanks to Stylish > Insert > URI Data */
/* 150x25 should be enough */

         background-image: url(
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAZCAYAAADT59fvAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjMxN4N3hgAAAKNJREFUaEPt1rENxEAMA8Fzr+6/BR3sGrTZPPApA4Ia3zMz7/HTwHYD37D8dbC9gbMdKM9I/6+gIRhCsQHD8hRInkKGZViGVZAts3kKEItYxKJLo0vRK7GIRazismQ2ChKLWMSiS6NL0SuxiEWs4rJkNgoSi1jEokujS9ErsYhFrOKyZDYKEotYxKJLo0vRK7GIRazismQ2ChKLWMSiS6NL0esFdlOKNGiTRiQAAAAASUVORK5CYII="
         ) !important;
   }

/* chose Font color, don't forget to UNcomment -> 
   #main-window toolbarbutton { color: #FFFFFF !important; }
   #main-window toolbarbutton:hover { color:#000000 !important; }
   #status-bar { color: #0000FF !important; }

/* you can also change menubar font color
   but using icons instead of menu is better :P */

on en avait causé en... 2007, page 58 du post... me suis tapé 20 pages en marche-arrière pour retrouver ça !
http://www.geckozone.org/forum/viewtopi ... 97#p410397 c'est de l'anglais de lyonnais, ça se comprend phonétiquement...

mis à l'index : première page du post

[bormat]

salut Bormat
strange in the night ! ton code ne marche pas chez moi ! je te mets le sérieux code de pirlouy : tu écrêmes pour arriver à ce que tu veux !

Code : Tout sélectionner

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* this style allows transparent toolbars, tabs bar & status bar */
/* tested on default theme only, firefox 3.0, Windows XP, Vista, Ubuntu 8.04 */

/* Toolbars, urlbar, searchbar and statusbar borderless */
   #urlbar, .searchbar-textbox, toolbox { border-style: none !important; }
    toolbar, #status-bar { border-style: none !important;
                           -moz-appearance: none !important; }

/* Transparency */
   #navigator-toolbox { -moz-appearance: none !important;
                        background-color: transparent !important; }
   #browser .plain { background-color: transparent !important; }
   #urlbar { -moz-appearance: none !important; }
   #urlbar:not([level="high"]):not([level="low"]) {
       background-color: transparent !important; }
   .searchbar-textbox { background-color: transparent !important;
                        -moz-appearance: none !important; }
   #status-bar { -moz-appearance: none !important;
                 background-color: transparent !important; }
   .tabbrowser-tabs { -moz-appearance: none !important;
                      background-color: transparent !important; }

/* wallpaper in background */

   #main-window[windowtype="navigator:browser"] {
       background-position: 0px 0 !important;
       -moz-appearance: none !important;
       background-repeat: no-repeat !important;
/*************************************************************************/
/* a wallpaper will eat RAM ressources so I advise you to compress it...

/* Here, I just put an example so you can see the result but I don't
   think using an image from web is a viable solution. You have 2 solutions:
   - use Data URI like both examples just below, but that's not recommanded
     because Stylish will freeze a little bit because of all these datas;
   - use userChrome.css: I think it's the best solution. Put your wallpaper
     in chrome directory of your profile and you just have to put this:
       #main-window[windowtype="navigator:browser"] {
           background-image: url("yourwallpaper.jpg") !important;}
   /*************************************************************************/

       background-image: url("http://www.enregistrersous.com/images/145679654120071022174003.jpg") !important;

   }


/* Background Image for toolbars & statusbar, more readable */

   #navigator-toolbox, #FindToolbar, .tabbrowser-tabs ,#status-bar {

/* choose your (transparent & clear) image thanks to Stylish > Insert > URI Data */
/* 400x25 is enough I think */

        background-image: url(
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAAZCAYAAAAfd3hoAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjMxN4N3hgAAAUxJREFUeF7t2MGJAzEABMF1hs4/GS12BurnUAf+nT5SQQ/7Oed8H39uwA24ATfgBm5v4BcQP3fAAAMMMHBr4Lk94P8hY4ABBhj4f70CAQQGGGCAgWJAQHzC8wmTAQYYSAYEBJwEp6wVZ6xcBrYMCIiACAgDDDCQDAgIOAmOJbm1JL2n9ywGBERABIQBBhhIBgQEnASnrBVnrFwGtgwIiIAICAMMMJAMCAg4CY4lubUkvaf3LAYEREAEhAEGGEgGBAScBKesFWesXAa2DAiIgAgIAwwwkAwICDgJjiW5tSS9p/csBgREQASEAQYYSAYEBJwEp6wVZ6xcBrYMCIiACAgDDDCQDAgIOAmOJbm1JL2n9ywGBERABIQBBhhIBgQEnASnrBVnrFwGtgwIiIAICAMMMJAMCAg4CY4lubUkvaf3LAYEREAEhAEGGEgGXhwx0gQ1bBHEAAAAAElFTkSuQmCC"
        ) !important;
   }

/* Allows searchbar & urlbar readable */

   .searchbar-textbox, #urlbar:not([level="high"]):not([level="low"]) > 
     .autocomplete-textbox-container {

/* choose your (transparent & clear) image thanks to Stylish > Insert > URI Data */
/* 150x25 should be enough */

         background-image: url(
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAZCAYAAADT59fvAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjMxN4N3hgAAAKNJREFUaEPt1rENxEAMA8Fzr+6/BR3sGrTZPPApA4Ia3zMz7/HTwHYD37D8dbC9gbMdKM9I/6+gIRhCsQHD8hRInkKGZViGVZAts3kKEItYxKJLo0vRK7GIRazismQ2ChKLWMSiS6NL0SuxiEWs4rJkNgoSi1jEokujS9ErsYhFrOKyZDYKEotYxKJLo0vRK7GIRazismQ2ChKLWMSiS6NL0esFdlOKNGiTRiQAAAAASUVORK5CYII="
         ) !important;
   }

/* chose Font color, don't forget to UNcomment -> 
   #main-window toolbarbutton { color: #FFFFFF !important; }
   #main-window toolbarbutton:hover { color:#000000 !important; }
   #status-bar { color: #0000FF !important; }

/* you can also change menubar font color
   but using icons instead of menu is better :P */

on en avait causé en... 2007, page 58 du post... me suis tapé 20 pages en marche-arrière pour retrouver ça !
http://www.geckozone.org/forum/viewtopi ... 97#p410397 c'est de l'anglais de lyonnais, ça se comprend phonétiquement...

mis à l'index : première page du post

j'avais testé le code sous windows mais sous linux ben ça ne fonctionne pas

[pirlouy]

Quoi, tu veux dire que les 2 heures de calvaire pour tester sous Linux ne sont pas suffisants ?!!

Pour les bordures, c'est possible qu'il n'y ait pas tout à fait le même identifiant. J'ai plus de Linux pour tester.

[ottomar]

pirlouy, ton code marche plein pot, brut de fonderie sous linux
Bormat, il te manquerait un point-virgule ou une embrasse quelque part dans ton css ???

allez, bonne semaine

[bormat]

pirlouy, ton code marche plein pot, brut de fonderie sous linux
Bormat, il te manquerait un point-virgule ou une embrasse quelque part dans ton css ???

allez, bonne semaine

il y a une incompréension là je disais donc que
ce code

Code : Tout sélectionner

window {
background: url("http://www.izipik.com/images/20080920/j4w2y7h2ady4iqqfl2-Fluorescent-Blue-Mushroom-2-QL3R4YTHJ6-1280x1024.jpg") ;
}
toolbox,
.tabbrowser-tabs {
-moz-appearance: none !important;
background-color:transparent!important;
}

ne marche que sous windows et que c'est pour celà que ça ne fonctionne pas cher ottomar
sinon le code qu'il donne marche bien

[pirlouy]

Je pense que cette extension va plaire à quelques uns:
Bookmarks Toolbar Button: Un bouton qui permet de masquer/afficher la barre de marque-pages. (pas essayé)
https://addons.mozilla.org/en-US/firefox/addon/55716
http://en.design-noir.de/mozilla/bookmarks-button/

[Louppo]

Bonjour,

Je cherche à supprimer les dossiers « Barre personnelle », « Menu des marque-pages » et « Marque-pages non classés » pour n'avoir que mes marques pages, sans fioritures, dans le panneau latéral des marque-pages, comment dois-je procéder ?

J'ai essayé :

#bookmarksMenuPopup .bookmark-item[label*="Barre personnelle"],
#bookmarksMenuPopup .bookmark-item[label*="Marque-pages non classés"],
#bookmarksMenuPopup .bookmark-item[label*="Menu des marque-pages"],
{
display: none !important;
}

Mais sans succès.

[relleba]

mis ailleurs,
désolé..

[Richi62]

Bonjour,

j'ai cherché un peu dans ce topic et bidouiller de mon côté userChrome et je n'arrive pas à faire réapparaitre, sur un hover de la barre d'onglet et/ou des onglets, les barre de navigation et barre personnelle, masquées lors de la navigation en mode fenêtré.

Je suis sûr que la solution est sur ce forum mais je ne trouve pas.

Si d'ailleurs il était possible aussi de réduire la barre d'onglet au strict minimum et de la faire réapparaitre en même temps que les deux autres ce serait génial. Merci d'avance.

Ce qui me ralenti le plus c'est de ne pas connaitre tout les noms des composants de l'interface de firefox.

Bonne journée à tous et merci d'avance.

Cordialement,
Richard.