personnaliser Firefox avec le userChrome.css

[Bob49]

Bonsoir

mais je vois souvent dans les captures (comme celle de bormat: http://i.imgur.com/YVaya.png ) une barre supplémentaire - tout en haut -par rapport à windows.
C'est obligatoire ce genre d'affichage avec Linux je trouve que ça fait beaucoup.

C'est le "tableau de bord" d'Ubuntu mais qui peut bouger, être modifié ou disparaitre..
..Perso, je n'ai pas encore étudié le sujet graphique de mon Ubuntu ! Je vais tester d'autres distributions..

Pour te donner quelques idées..: http://ubuntu-francophone.ning.com/photo

[bormat]

il y a la barre de la fenetre puis le tableau de bord tu peux le déplacer en fesant un clic droit dessus/ propriété puis en bas
tu as même une option pour qu'elle apparaisse que quand tu survoles l'emplacement de la bar

[Freddy]

Ok, merci bien à vous deux pour l'info.

[tobi06]

bonjour,

je tente désespérément de personnaliser ma fenêtre d'options.

Voici mon code:

Code : Tout sélectionner

#urlbar:not(dropmarker) {
  -moz-appearance: none !important;
  -moz-border-radius: 4px !important;
  background-color: #444444 !important;
  color: #FFFFFF !important;
  border: 1px #333333 !important;
}
#urlbar dropmarker {
   background-color: #444444 !important;
   -moz-appearance: menulist-button !important;
  -moz-appearance: none !important;
}
#urlbar dropmarker:hover {
  background: #555555 !important;
  border: none !important;
  padding: 2px !important;
}
.autocomplete-richlistitem {
  background: #222222 !important;
  color: #FFFFFF !important;
  padding: 0px !important;
  margin: 0px !important;
}
.autocomplete-richlistitem:hover, .autocomplete-richlistitem[selected="true"] {
  background: #444444 !important;
}

menu, menuitem {
  -moz-appearance: none !important;
  color: #FFFFFF !important;
  background-color: #222222 !important;
  font-size: 14px !important;
}
menu:hover, menuitem:hover {
  -moz-appearance: none !important;
  color: #FFFFFF !important;
  background-color: #444444 !important;
}


menuseparator {
-moz-appearance: none !important;
background: #222222 !important;
border-top: solid 2px #444444 !important;
border-right: none !important;
border-bottom: none !important;
border-left: none !important;
padding: 0px !important;
margin: 0px 0px 0px 0px !important; 
}

#FindToolbar, toolbar {
  -moz-appearance: none !important;
  background-color: #222222 !important;
  color: #FFFFFF !important;
}
toolbarbutton {
  color: #FFFFFF !important;
}


#browser tabs {
  -moz-appearance: none !important;
  background-color: #222222 !important;
  border: 0px !important;
}
.tabbrowser-tab {
  color: #FFFFFF !important;
  background-color: #222222 !important;
  -moz-appearance: none !important;
  -moz-border-radius-topleft: 0px !important;
  -moz-border-radius-topright: 0px !important;
}
tab[selected="true"] {
  background-color: #333333 !important;
  -moz-appearance: none !important;
  -moz-border-radius: 0px !important;
}
tab:hover {
  -moz-appearance: none !important;
  background-color: 222222 !important;
}

#status-bar statusbarpanel {
  -moz-appearance: none !important;
  background-image: none !important;
  border: 0px !important;
  background-color: #222222 !important;
  color: white !important;
}





    /* ===== OPTIONS volet général ===== */

    /* BP: dimensions */
    #BrowserPreferences
    {
       width: 60em !important;
       height: 30em !important;
       background: #222222 !important;
    }
    /* BP: barre des boutons */
    #BrowserPreferences .paneSelector
    {
       background: #222222 !important;
       height: 6em !important;
    }
    /* BP: fond des boutons et libellé */
    #BrowserPreferences radio[pane] 
    {
       background: #333333 !important;
    }
    #BrowserPreferences radio[pane][selected="true"] 
    {
       background: #444444 !important;
       color: #FFFFFF !important;
    }
    /* BP: fond des libellés */
    #BrowserPreferences .paneButtonLabel 
    {
       background: transparent !important;
       color: #FFFFFF !important;
       font-size: 110% !important;
       font-weight: bold !important;
    }
    /* BP: Barre des boutons OK/annuler */
    .prefWindow-dlgbuttons
    {
    background: #222222 !important;
    }
    .prefWindow-dlgbuttons > spacer
    {
    background: #222222 !important;
    }
    .prefWindow-dlgbuttons .dialog-button .button-text
    {
       font-size: 120% !important;
       font-weight: bold !important;
       color: #FFFFFF !important;
       background: #444444 !important;
    }
    /* BP: volet 'général' */
    #paneGeneral
    {
       background: #222222 !important;
       color: #FFFFFF !important;
       font-size: 110% !important;
       font-style: italic !important;
    }

Une partie bien sur est pour le restant des fenetres(tabs, content, toolbar,...).

Mon probleme est que les 'labels' des differentes sections dans la fenêtre d'option reste sur fond blanc avec texte noir. mais vu que je ne connais pas les balise (appart #BrowserPreferences) je n'arrive pas a changer tout cela. Ou trouver toutes ces balises fenetre par fenetre car les' dlgbutton' faut quand meme le savoir... je n'aurais pas trouver ca tout seul.

enfin voici un printscreen de ma fenetre d'option:


Aussi il me faudrai les balises pour les tab dans l'onglet avancé...

Merci d'avance,

Thibault

[ax1]

Je souhaitais faire partager l'ergonomie qui me satisfait depuis plus d'une année terrestre.

[ax1]

Bien que je ne m'y intéresse plus ce n'est pas une raison pour ne pas le partager.

[bormat]

bonjour quelqu'un sait il si on peut forcer l'image en backround à s'étirer pour prendre toute le hauteur de la barre (car là elle est coupé )
ou si il est possible de mettre une photo en background sur 2 barre (pas de fois le haut de l'imagemais que la 2eme barre continue la où c'est arrêtté la 1ere )
j'aimerais faire 1 dégradé de la barre barre de navigation jusqu'a la barre personnelle et je ne vois que ces 2 solutions
Edit je vien de voir qu une propriete moz linear gradient existait

[bormat]

slt
le code ne marche pas

#PersonalToolbar (
background: -moz-linear-gradient(top, blue, white) !important;
)

ou peut etre la faute ?
merci

[Mori]

salut,

ça ne marcherait pas mieux avec des accolades ?

Code : Tout sélectionner

#PersonalToolbar {
background: -moz-linear-gradient(top, blue, white) !important;
}

[bormat]

tient j'ai toujours utiliser les parenthese et ça marchait
avec les acolades ça marche merci

[chri]

Bonjour

J’ai changé les icones de mes marque-pages
Malheureusement cette modification n’est pas visible dans la bibliothèque

Est-ce impossible ?

SI quelqu’un sait, merci d’avance

Salut

[Freddy]

En réponse à "Pmic2" et si toutefois c'est aussi "chri",je lui répond ici pcq ça permettra peut-être à ceux qui connaissent bien l'affaire de mieux aider.

Je me suis pas encore aventuré dans la bibliothèque, mon expérience en CSS ne date que de ce printemps, et je suis loin d'être un expert et apparemment ça se passe pas vraiment pareil que le reste pour définir les sélecteurs

Au mieux, ce que j'ai réussi à obtenir c'est pour les textes; on est bien d'accord c'est uniquement pour les dossiers

Donc d'après ce que j'ai trouvé, ça pourrait peut-être se faire avec ce nom pour sélecteur: treechildren::-moz-tree-cell-text(title, query, folder) ,seulement chez moi ça veut rien savoir... veut pas être sage
Le reste c'est bon, mais comme par hasard celui-ci...

Du coup la solution est d'attribuer le changement à tout le monde, est ensuite de remettre à l'état initial les sélecteurs qu'on ne veux pas changer, et ça donnerait par exemple ça:

Code : Tout sélectionner

/**** Bibliothèque= titre des "Dossier marque-page" ****/

treechildren::-moz-tree-cell-text(title, container)
{
background: grey !important;
color: white !important;
}


treechildren::-moz-tree-cell-text(title, livemarkItem),
treechildren::-moz-tree-cell-text(title, query, OrganizerQuery_History),
treechildren::-moz-tree-cell-text(title, query, OrganizerQuery_History),
treechildren::-moz-tree-cell-text(title, query, tagContainer),
treechildren::-moz-tree-cell-text(container, OrganizerQuery_Tags),
treechildren::-moz-tree-cell-text(title, query),
treechildren::-moz-tree-cell-text(container, OrganizerQuery_UnfiledBookmarks),
treechildren::-moz-tree-cell-text(container, OrganizerQuery_BookmarksMenu), 
treechildren::-moz-tree-cell-text(container, OrganizerQuery_BookmarksToolbar), 
treechildren::-moz-tree-cell-text(container, OrganizerQuery_AllBookmarks)
{
background: none !important;
color: black !important;
}

La même méthode pour les icones impose de retrouver les images initiales des sélecteurs qu'on veut pas changer.
Sinon se serait la même chose en remplaçant treechildren::-moz-tree-cell-text par treechildren::-moz-tree-image

Voilà tout ce que mes connaissances me permettent actuellement.
Si des plus doués savent faire ...

[Chri]

Bonsoir Freddy

C’est super, pour quelqu’un qui ce dit pas un expert, ça devrait pas tarder alors ….

Mais plutôt que de tous changer les containers
Puis après d’exclure ceux que l’on ne veut pas changer
Il serait plus intéressant de changer que les containers désirés
Container par container

Ce qui faudrait c’est l’équivalent de

« .bookmark-item[container="true"][label="NOM DUCONTAINER"]
{color: Green !important; font-weight: bold !important;}”

Et qui s’appliquerait à la bibliothèque.

J’ai commencer à chercher …., mais moi je ne suis vraiment pas un expert, cela fait tout juste 3 semaines que je me suis lancé !

Si tu trouve avant moi …. ce qui risque d’arriver.

Salut,

[Pastisman]

Bonjour,

Le sélecteur que vous cherchez ne serait-il pas simplement

Code : Tout sélectionner

treechildren::-moz-tree-cell-text(title, container)

?

[Chri]

Bonjour,

Le sélecteur que vous cherchez ne serait-il pas simplement

Code : Tout sélectionner

treechildren::-moz-tree-cell-text(title, container)

?

Bonjour

Non celui-ci change trous les containers, et non spécifiquement un seul