personnaliser Firefox avec le userChrome.css
Modérateurs : myahoo, nico@nc, Mori, jpj
Dans le même genre, ma barre URL après modifications présente une anomalie avec un lien sécurisé avec flux, cela se passe uniquement sur la gauche de la barre. Auriez vous une idée ?
Merci d’avance pour vos réponses.
/* coins arrondis */
#urlbar-container,
#urlbar {
background : transparent url('bar.png') no-repeat center left !important;
color : #000 !important;
}
#urlbar-container,
#urlbar {
height : 22px !important;
padding : 0 !important;
margin : 1px !important;
}
#urlbar {
background-position : right !important;
-moz-appearance : none !important;
border : 0px solid !important;
margin : 0px !important;
padding : 0px 0px 0px 5px !important;
height : 22px !important;
}
#urlbar > .autocomplete-history-dropmarker {
-moz-appearance : none !important;
margin : 0 !important;
padding : 2px !important;
border : 0px solid !important;
background-color : transparent !important;
background-image : none !important;
}
#urlbar .textbox-input-box {
background : transparent url('barmid.png') repeat-x !important;
height : 22px !important;
color: rgb(255,255,255) !important;
}
#urlbar .textbox-input-box {
margin : 0 !important;
padding : 1px 3px !important;
}
#urlbar[level] > .autocomplete-textbox-container {
background-image: url('barmid.png') !important;
background-color: none !important;
font-weight: 600 !important;
}
un sélecteur: l'élèment auquel s'applique le code
une déclaration: la propriété et la valeur de propriété que l'on veut donner à l'élément
le sélecteur : on peut appliquer la même propriété à plusieurs sélecteurs, auquel cas, ils sont séparés par une virgule
attention pas de virgule à la fin, juste avant la déclaration
Code : Tout sélectionner
selecteur1, selecteur2 { .... }
Code : Tout sélectionner
{propriété: valeur}
le ';'(point-virgule) à la fin des déclarations, donc juste avant la '}' fermante est facultatif (mieux vaut prendre l'habitude de le mettre pour ne l'oublier ailleurs)
Code : Tout sélectionner
{propriété1: valeur; propriété2: valeur;}
eczèmepeul:
Code : Tout sélectionner
#baudet, #cochon { saucisson: àl'ail !important; boudin: alacancoillotte !important; }
à chacun sa manière de présenter le code, pourvu que tout soit dedans
liens trézzzzzzzzutiles:
comprendre: http://www.tuteurs.ens.fr/internet/web/html/css.html
les propriétés: http://wiki.media-box.net/documentation/css
tout sur les feuilles CascadingStyleSheet: http://www.openweb.eu.org/css/ et http://css.alsacreations.com/ pour d'autrezorizons webmestriens
si vous voulez vous y retrouvez dans ces pages, commencez par la page... 1 du post-it, c'est à jour !
Edith me dit, t'as fini? va faire ta sieste, tu fais les courses c'tap!
d'abord, expliquez dans l'oreille du panda ce qu'on attend de lui, sinon, lui pas ni bouillir, ni binder (bindings=liens)
le code qui suit, donc obligatoire avant le reste pour que le panda capte
Code : Tout sélectionner
menuitem[label] {
-moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic") !important;
}
menupopup menu[label],
popup menu[label] {
-moz-binding: url("chrome://global/content/bindings/menu.xml#menu-iconic") !important;
}
Code : Tout sélectionner
menu[label]
menuitem[label],
menupopup menu[label],
menupopup[label]
{
-moz-appearance: none !important;
list-style-image: url("file:///D:/images/FF_generic16.png") !important;
margin: 0 !important;
padding: 0 !important;
}
menuseparator
{
margin: 0 !important;
border: 0 !important;
}
si vous ne voulez pas que les items à checkbox (items cochés), que les marque-pages (sans favicônes) et les dossiers soient ainsi défigurés, en sélecteur
Code : Tout sélectionner
menu[label]:not([type="checkbox"]):not(.bookmark-item):not(.folder-icon),
menuitem[label]:not([type="checkbox"]):not(.bookmark-item):not(.folder-icon),
menupopup menu[label]:not([type="checkbox"]):not(.bookmark-item):not(.folder-icon),
menupopup[label]:not([type="checkbox"]):not(.bookmark-item):not(.folder-icon)
Code : Tout sélectionner
menu[label],
menupopup menu[label]
{
-moz-appearance: none !important;
list-style-image: url("file:///D:/images/FF_genericMenu16.png") !important;
margin: 0 !important;
padding: 0 !important;
}
bien sûr, le top du top, c'est une icône par menu! 2 ou 3 solutions
la première : installer l'extension cuteMenus http://extensions.geckozone.org/CuteMenus, ou un thème qui en est pourvu (par exemple mostly crystal (trés trés abouti, mostly))
la seconde, si vous voulez bien des icônes, mais pas du thème! vous téléchargez (pas installez) Mostly, vous le dégnappez dans un coin de votre dd, vous récupérez toutes les icônes et le fichier menuitems-fx-fr.css dans un dossier à part, vous ouvrez le css et vous changez toutes les cibles des list-style-image de mostly par le chemin vers vos icones et dans votre userchrome.css, vous inscrivez au-dessus de la ligne namespace
Code : Tout sélectionner
@import url("file:///D:/cheminVers/menuitems-fx-fr.css");
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
Code : Tout sélectionner
menu[label="Fichier"]
{
list-style-image: url("file:///D:/images/Mostly/icons/page.png") !important;
}
menu[label="Edition"]
{
list-style-image: url("file:///D:/images/Mostly/icons/edit.png") !important;
}
menu[label="Outils"]
{
list-style-image: url("file:///D:/images/Mostly/icons/dominspector.png") !important;
}
#viewTextZoomMenu, menu[label="Taille du texte"]
{
list-style-image: url("file:///D:/images/Mostly/icons/font-normal.png") !important;
}
menuitem[label="Plein écran"]
{
list-style-image: url("file:///D:/images/Mostly/icons/fullscreen.png") !important;
}
menuitem[label="eReader"]
{
list-style-image: url("file:///D:/images/Mostly/icons/ereader16.png") !important;
-moz-image-region: rect(0px 16px 16px 0px) !important;
}
dans le cas où ça merdouille avec les label[], la seule solution, c'est le domimspector pour trouver l'id du menu (comme dans le cas du [taille du texte] qui ne veut rien savoir ici!)
le domInspector, c'est pas simple comme bonjour, mais pas loin, suffit d'un peu d'ordre, d'autant plus qu'il a la bonne idée de faire clignoter bon nombre d'éléments. Il sert à donner la structure de la page qui se présente sous la forme d'une arborescence: des contenants qui contiennent des contenants qui contiennent des contenants qui contiennent... des élèments parfois!
1/ ouvrez le dom
2/ dans le menu fichier > Examiner une fenêtre > vous cochez le nom de la fenêtre en cours (de toute manière, si vous n'avez que le dom d'ouvert, vous n'avez le choix qu'entre la fenêtre et lui)
3/ développez l'arborescence de la page, en cliquant sur la petite flèche à côté de 'window', scrollez jusqu'à 'toolbox', le conteneur des barres de menu va clignoter : vous êtes bons!
développez 'toolbox', vous allez voir 4 ou 5 'toolbar' avec à droite dans le champ 'id', leur... id (#)
en principe les menus sont dans la 'toolbar-menubar', développez, allez jusqu'à 'toolbaritem', développez, et miracle, surgissent de la nuit comme des pandas zirsutes nouveaux-nés, vos... menus!
et toujours selon le même principe, vous allez trouvez tous les menus, leurs menuitems, les id en #, et dans la zone de droite du dom, leur [label]
c'est toujours plus sur et plus radical par les #id que par les [label]
j'espère, ça est clair.
pas baudet, hein! seulement halof!
Have
A
Lot
Of
Fun
Amusez-vous bien
si vous voulez vous y retrouvez dans ces pages, commencez par la page... 1 du post-it, c'est à jour !
2/ l'est pas frais, mon poisson ???
3/ vous mets en inspection par l'inspecteur en punition
j'en suis où avec ce b.. de p.. de m... de cookie?
j'espère que le trés gentil modo verra rien!
fini l'utf8 pour le menu <aller à> !
Code : Tout sélectionner
#go-menu { display: none !important;}
Fichier = #file-menu
Edition =#edit-menu
Affichage = #view-menu
Marque-pages = #bookmarks-menu
Outils = #tools-menu
? = #helpMenu
mise à jour incessante du 1er post...
mise à jour cessée!
bon, c'est une bête à chagrin, ça!
Code : Tout sélectionner
menu[label="Aller à"] { display: none !important;}
2 petites précisions
les images de boutons et leurs :hover n'exportent aucun message subliminal (ceci pour Mori qui va encore supputer je ne sais quoi), je me déclare responsable mais innocent au sens biblique du terme, mais j'avoue alof !
les 2 fenêtres sont redimensionnables en faisant poignet, donc redimensionnez !
le code est utilisable tel que : toutes les images sont chez imageShack, simplement copiez-collez dans votre userChrome.css
pour vos boutons, bannières, images, fonds d'écrans (mon préféré), avatars, posters, affichettes, charmantes photos, rouges pandas Firefox, le site de Jean Pierre Bardiau (n'oubliez pas entre Jean et Pierre : une espace)
si Calimo, Mori, Myahoo, Edith voient un inconvénient à l'usage de leurs avatars (et leurs adresses), je rectifierai, bien sûr
Code : Tout sélectionner
/*=========== FENETRES EXTENSIONS ET THEMES ============ */
/* fond du cadre et des boutons */
#extensionsManager
{
background-image: url("http://img396.imageshack.us/img396/2875/redpanda8fs.jpg") !important;
}
/* fond des boutons */
#extensionsManager .box-inherit
{
background-image: url("http://img227.imageshack.us/img227/5351/redpanda0920029xv.png")
}
/* empêcher l'image de fond sur le menu contextuel (conséquence de .box-inherit) */
#extensionContextMenu .box-inherit
{
background-image: none !important;
}
/* resizer et getmore cachés */
#windowResizer,
#getMore
{
display: none !important;
}
/* fond de la barre de boutons */
#commandBar
{
padding: 8px !important;
background-image: url("http://img396.imageshack.us/img396/2875/redpanda8fs.jpg") !important;
}
/* Bouton de désinstallation */
#uninstallButton .button-icon
{
height: 90px !important;
width: 90px !important;
}
#uninstallButton
{
list-style-image: url("http://img509.imageshack.us/img509/8739/chatmyahoo90hover8vf.png") !important;
-moz-image-region: rect(0px, 90px, 90px, 0px) !important;
font-size: 1em !important;
}
#uninstallButton:hover
{
list-style-image: url("http://tgx.free.fr/1967L.png") !important;
}
#uninstallButton[disabled="true"]
{
list-style-image: none !important;
color: gray !important;
}
/* Bouton d'options */
#optionsButton .button-icon
{
height: 128px !important;
width: 128px !important;
}
#optionsButton
{
list-style-image: url("http://img211.imageshack.us/img211/5646/baudetmori128hover29uq.png") !important;
-moz-image-region: rect(0px, 128px, 128px, 0px) !important;
font-size: 1em !important;
}
#optionsButton:hover
{
list-style-image: url("http://ersplus.free.fr/spip/IMG/auton15.png") !important;
-moz-image-region: rect(0px, 128px, 128px, 0px) !important;
}
#optionsButton[disabled="true"]
{
list-style-image: none !important;
}
/* Bouton de mise à jour */
#updateButton .button-icon
{
height: 88px !important;
width: 100px !important;
}
#updateButton
{
list-style-image: url("http://cui.unige.ch/~robin0/Avatars/FSM.png") !important;
-moz-image-region: rect(0px, 100px, 100px, 0px) !important;
font-size:1em !important;
}
#updateButton:hover
{
list-style-image: url("http://img227.imageshack.us/img227/8029/cerveau8rg.png") !important;
-moz-image-region: rect(0px, 100px, 100px, 0px) !important;
}
#updateButton[disabled="true"] {
list-style-image: none !important;
color: gray !important;
}
/* Bouton utiliser le thème */
#useThemeButton .button-icon
{
height: 75px !important;
width: 75px !important;
}
#useThemeButton
{
list-style-image: url("http://img227.imageshack.us/img227/7775/avataredith755ly.png") !important;
-moz-image-region: rect(0px, 75px, 75px, 0px) !important;
font-size: 1em !important;
}
#useThemeButton:hover
{
list-style-image: url("http://img214.imageshack.us/img214/5466/avataredith75hover1ql.png") !important;
-moz-image-region: rect(0px, 75px, 75px, 0px) !important;
}
#useThemeButton[disabled="true"] {
list-style-image: none !important;
}
/* Les extensions */
extension[selected="true"]
{
background-image: url("http://img214.imageshack.us/img214/6044/06uv.png") !important;
color: Papayawhip !important;
}
extension
{
min-height: 50px!important;
border-bottom: 5px solid lightgray!important;
background-image: url("http://img214.imageshack.us/img214/9048/0g5gk.png")!important;
color: white !important;
}
extension[disabled="true"]
{
color: Lightgrey !important;
background-image: url("http://img214.imageshack.us/img214/4691/0d1va.png") !important;
}
extension[disabled="true"][selected="true"]
{
background-image: url("http://img211.imageshack.us/img211/1375/0ds8lw.png") !important;
}
extension[disabled="true"] .extension-icon
{
opacity: 0.5 !important;
}
.extension-item-name
{
font-size: 24px !important;
}
/* Le fond de la boite de prévisualisation des thèmes */
#previewImageDeck
{
background-image: url("http://img396.imageshack.us/img396/2875/redpanda8fs.jpg") !important;
}
/*========= FIN FENETRES EXTENSIONS ET THEMES ========== */
Le truc de la fenêtre extensions/thèmes, c'est tout de même un peu lourd (et long) à charger : pensez à utiliser des images en local (sur votre disque dur) plus lègères (png 256 couleurs passées à pngOptimizer)
Qui est en ligne ?
Utilisateurs parcourant ce forum : Google [Bot] et 26 invités