l'ottobar

compact add-ons manager

2009-03-15T17:35:00.007+01:00

Compacte fenêtre des modules complémentaires,
et des extensions,
et des thèmes,
et des plug-ins,
et des mauvais conseils

in your userChrome.css
~/.mozilla/firefox/profile name/chrome/userChrome.css
(if it does not exist : create folder and file)

/* ====== ADD-ONS MANAGER ====== */

#viewGroup
{
font-size:0!important;
border:0!important;
}
#viewGroup image
{
height:16px!important;
width:16px!important;
}
.viewSelector
{
-moz-box-pack:center!important;
}
richlistitem,
richlistitem *
{
padding:0!important;
border: 0 !important;
}
#searchPanel,
/* cachement du baratin */
richlistitem .addon-description,
richlistitem[selected="true"] .descriptionWrap,
/* commenter si pas cachage des dessins */
richlistitem .addonIconStack,
#getMore
{
display: none !important;
}
#extensionsManager richlistitem .addon-name-version
{
font-size: 90% !important;
}
#extensionsManager richlistitem
{
max-height:15px!important;
min-height:15px!important;
}
#extensionsManager richlistitem[selected="true"]
{
max-height:none!important;
}
#extensionsManager richlistitem[selected="true"] .addon-name-version
{
font-size: 100% !important;
font-weight:bold!important;
}
.selectedButtons
{
margin-top:-3px!important;
}

/* ===/// ADD-ONS MANAGER ====== */

about firefox

2009-03-10T08:54:00.010+01:00

A propos de Mozilla Firefox

About firefox in the help menu : change the background / dans le menu aide, < à propos de mozilla firefox > changez l'image de fond
choose an image nearly 256x256, anyway, it's to you to easily scale the code / choisissez une image d'environ 256x256 : vous pouvez adapter facilement le code

crunchbang logo by rfquerin

in your userChrome.css
~/.mozilla/firefox/profile name/chrome/userChrome.css
(if it does not exist : create folder and file)

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

/* ====== A PROPOS DE ====== */

#aboutDialog #clientBox
{
-moz-appearance: none !important;
background-color: black !important;
background-image: url("/data/images/crunchbang/logo-rfquerin-254.png") !important;
background-position : 24px 0 !important;
max-height: 254px !important;
min-width: 300px !important;
max-width: 300px !important;
color:#2f2f2f!important;
}
#aboutDialog #version
{
display:none!important;
}
#copyright
{
margin-top:48px!important;
padding-left:12px!important;
}
#aboutDialog #userAgent
{
background-color:black!important;
color:#2f2f2f!important;
padding-left:12px!important;
font-weight:bold!important;
}

/* ===/// A PROPOS DE ====== */

toolbars' backgrounds : stripes

2009-03-03T17:39:00.009+01:00

Une image en fond des barres d'outils

take a (random) image, this one is transparent with black stripes / avec n'importe quelle image : celle-ci est transparente avec des rayures noires (in gimp patterns / motifs)

to make your toolbars' background, choose first a background-color (not too black) !

in your userChrome.css
~/.mozilla/firefox/profile name/chrome/userChrome.css
(if it does not exist : create folder and file)

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

/* ====== IMAGE-BACKGROUND ====== */

toolbox
{
-moz-appearance: none !important;
background-color:#424242!important;
background-image:url("/data/images/gimp/pins-nasa.png")!important;
}
#toolbar-menubar, #nav-bar, #PersonalToolbar
{
-moz-appearance:none!important;
background:transparent!important;
border:none!important;
}

/* ===/// IMAGE-BACKGROUND ====== */

In the userChrome.css, your image-address can be local ( ~/images/blablabla.png )

cursor : pointer on...

2009-03-03T17:10:00.004+01:00

La petite mimine

transforme le pointeur de souris au passage sur les boutons, les boutons de barre d'outils, les marque-pages et les menus / mouse-pointer = little hand on # buttons

in your userChrome.css
~/.mozilla/firefox/profile name/chrome/userChrome.css
(if it does not exist : create folder and file)

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

/* ====== CURSOR ====== */

menu,
toolbarbutton:hover,
button:hover,
.bookmark-item:hover
{
opacity:1!important;
cursor:pointer!important;
}

/* ===/// CURSOR ====== */

toolbars' & others backgrounds

2009-03-03T16:32:00.010+01:00

Fonds et bas-fonds

in your userChrome.css
~/.mozilla/firefox/profile name/chrome/userChrome.css
(if it does not exist : create folder and file)

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

/* for a dark theme */
#navigator-toolbox toolbar#toolbar-menubar,
#navigator-toolbox toolbar#PersonalToolbar,
#navigator-toolbox toolbar#nav-bar,
#urlbar,
#urlbar *,
#searchbar .searchbar-textbox,
#searchbar .searchbar-engine-button,
statusbar,
statusbar *
{
-moz-appearance:none!important;
background:#121212!important;
}
/* color of text in urlbar, searchbar & statusbar */
#searchbar .searchbar-textbox,
#urlbar .textbox-input-box,
statusbar
{
color:#ffffff!important;
}

evidently, you can separate the code for toolbars, statusbar, etc
& you can only write for all toolbars

#navigator-toolbox toolbar

use gColor2 to find the hexacode of your colors
or see here for a basic color code, in this case, you can write i.e. (much more poetic)

statusbar
{
color:lightsalmon!important;
}

centered tabs on tabbar

2009-03-01T11:56:00.011+01:00

Centre les onglets sur la barre d'... onglets

in your userChrome.css
~/.mozilla/firefox/profile name/chrome/userChrome.css
(if it does not exist : create folder and file)

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

.tabbrowser-tabs .scrollbox-innerbox
{
-moz-box-pack:center!important;
}

/* ===/// CENTERED TABS ====== */

change autoscroller : animated gif

2009-03-01T11:10:00.013+01:00

Le petit manchot tourneur

autoscroller is that thing who appears when you middle-click in firefox to scroll the web page : that's an horrible design ! change it in a kind rolling tux ! /
l'autoscroller, c'est cet affreux machin qui apparait dans firefox quand vous cliquez milieu pour faire défiler la page (défilement doux)

in your userChrome.css
~/.mozilla/firefox/profile name/chrome/userChrome.css
(if it does not exist : create folder and file)

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

/* ====== MANCHOT TOURNEUR ====== */

#autoscroller
{
-moz-appearance: none !important;
height: 28px !important;
width: 28px !important;
border: none !important;
margin: -14px !important;
padding: 0 !important;
background-image: url("http://www.enregistrersous.com/images/59e95014fa7d83a7ddc62c212a65dbff.gif") !important;
background-color: transparent !important;
background-position: right top !important;
}

/* ===/// MANCHOT TOURNEUR ====== */

center images

2009-03-01T05:53:00.017+01:00

Centre les images dans la page

when you right-click on an image to display it alone & centered /
quand vous cliquez à droite sur une image > afficher l'image, centre l'image dans la page

in your userContent.css
~/.mozilla/firefox/profile name/chrome/userContent.css
(if it does not exist : create folder and file)

@namespace url(http://www.w3.org/1999/xhtml);

/* ====== CENTRER LES IMAGES ====== */

HTML > BODY:only-child > IMG:only-child
{
display: block !important;
margin: auto !important;
}

/* ===/// CENTRER LES IMAGES ====== */

merge stop & reload & throbber

2009-02-28T10:47:00.013+01:00

Fusion actualiser/arrêter/indicateur de chargement (throbber)

first of all / en premier
your stop button must be at the left of the refresh button / placez le bouton stop à la gauche du bouton actualiser

in your userChrome.css
~/.mozilla/firefox/profile name/chrome/userChrome.css
(if it does not exist : create folder and file)

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

/* ====== THROBBER DANS LE BOUTON ARRETER ====== */

#stop-button[disabled="true"] { display:none; }
#stop-button:not([disabled]) + #reload-button { display:none; }
toolbar[iconsize="small"] #stop-button:not([disabled])
{
list-style-image: url("data:image/gif;base64,R0lGODlhEAAQAOMIAAAAABoaGjMzM0xMTGZmZoCAgJmZmbKysv///////////////////////////////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgAIACwAAAAAEAAQAAAESBDJiQCgmFqbZwjVhhwH9n3hSJbeSa1sm5GUIHSTYSC2jeu63q0D3PlwCB1lMMgUChgmk/J8LqUIAgFRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+UKgmFqbpxDV9gAA9n3hSJbeSa1sm5HUMHTTcTy2jeu63q0D3PlwDx2FQMgYDBgmk/J8LqWPQuFRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+YSgmFqb5xjV9gQB9n3hSJbeSa1sm5EUQXQTADy2jeu63q0D3PlwDx2lUMgcDhgmk/J8LqUPg+FRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+cagmFqbJyHV9ggC9n3hSJbeSa1sm5FUUXRTEDy2jeu63q0D3PlwDx3FYMgAABgmk/J8LqWPw+FRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+QihmFqbZynV9gwD9n3hSJbeSa1sm5GUYXSTIDy2jeu63q0D3PlwDx3lcMgEAhgmk/J8LqUPAOBRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+UqhmFqbpzHV9hAE9n3hSJbeSa1sm5HUcXTTMDy2jeu63q0D3PlwDx0FAMgIBBgmk/J8LqWPQOBRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+YyhmFqb5znV9hQF9n3hSJbeSa1sm5EUAHQTQTy2jeu63q0D3PlwDx0lEMgMBhgmk/J8LqUPgeBRhV6z2q0VF94iJ9pOBAAh+QQBCgAPACwAAAAAEAAQAAAESPDJ+c6hmFqbJwDV9hgG9n3hSJbeSa1sm5FUEHRTUTy2jeu63q0D3PlwDx1FIMgQCBgmk/J8LqWPweBRhV6z2q0VF94iJ9pOBAA7") !important;
-moz-image-region: auto !important;
}

/* === /// THROBBER DANS LE BOUTON ARRETER ====== */

light-iconic-menu

2009-02-22T08:53:00.027+01:00

just change the firefox' text menu in light little icons 16x16
/
remplace le menu texte de firefox par de petites et légères icônes

before / avant

after / après

in your userChrome.css
~/.mozilla/firefox/profile name/chrome/userChrome.css
(if it does not exist : create folder and file)

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

/* ====== MENUBAR ====== */

menubar > menu > .menu-iconic-text,
menubar > menu > hbox[anonid="accel"],
menubar > menu > .menu-right
{
display:none!important;
}
menubar > menu
{
padding:0!important;
margin:0!important;
}
/* File / fichier */
menubar > menu#file-menu
{
-moz-binding:url("chrome://global/content/bindings/menu.xml#menu-iconic")!important;
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9kCFAUmML+SBYwAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAA8ElEQVQoz4WRMS9FQRSEv3NySxGNnkKhERq1TuNP+A/+AomG6NWvoHiJhIS86CjlhagVIloFGt6M5tzk5oZnmj3ZnZl8uws9SZqTtGN7Q9KipAOmyfaWbUvat70nyVMDko4k2faSpDvbH/8Fhm1rBYe/Yay5I0ku86QznwNkBSa2T4H76riKCIBP4CwiBrYPARqAiFi2/QDM2wZ4rqIv4Al4y8xRl3vUonTXDuJ3/6Krknbr/EbScc0ntjclrbfeBiAzx7YXau8FmC2kQWZe/vVh19W6bXtcKDN9X9MJXETEK3BreyUiHjPz3Tb1YgD8AIr++LYesC0RAAAAAElFTkSuQmCC") !important;
}
/* Edit / édition */
menubar > menu#edit-menu
{
-moz-binding:url("chrome://global/content/bindings/menu.xml#menu-iconic")!important;
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9kCFAUpODbRkXEAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAA1klEQVQoz52QMUoDQBBF/9eATfAI5gJiYWFhF2xsAh7AG3gBG8EcQRvvYCOawkawSUAQvICNpXgG+c9mFtaQIDjNzs7M3zf7pf8GMEzyQUWSdj70c4MuP5Y0kvQJLGxvAge2J+sIJ/XirNWS3CVhnWBQgm/g7K/9BUzb7rX/tHpeJbhonwROk8wrb6Ln6p83AcArsFP3LeCliO81fNUTSHK7RN1IsujIw1+22t4FLnuR7UPgTdK+pKckR82+L1bHddFuyox7V2EE7EnKEuHRdpJsSxrb9g/l0/tBfCkA1AAAAABJRU5ErkJggg==") !important;
}
/* View / affichage */
menubar > menu#view-menu
{
-moz-binding:url("chrome://global/content/bindings/menu.xml#menu-iconic")!important;
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9kCFAUrNXpWj04AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAzElEQVQoz72Rvy4DcBSFvyvE1pVBdGCTkAgSi1fwPNKn0KSDxYw3kHTpxmIxMCFMDAymIuez/Czd2sEd773nXw7826jT39Vd9SzJq/qtPqjH6tLk47o6TPKh3qkmsYFu1S+1n6Qzp64CI+AZ2FGvVaoKdR4YAPvAdlVdoN6oV+oiQJJhY7cp9dp+LckTald9STJI0lUPk7w30L26kWSrWb6svwzACbCpjoBPYKGqxupKVR2op1V1NBl+Tz1P8qb+qI9qX12euocksxX8C+C417ch/Sf/AAAAAElFTkSuQmCC") !important;
}
/* History / historique */
menubar > menu#history-menu
{
-moz-binding:url("chrome://global/content/bindings/menu.xml#menu-iconic")!important;
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9kCFAUxOy3DWJIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAA10lEQVQoz5WRMUqDURCE53v8INZ2phCEXMJCUgo2MRfIHbxMGi8gNoJFPIMHSGNjE0EsJUUgmbHIU34jD3TK3dnZmV3pn0CSbB8C55K6fUKSIumtlPKUZFe0fZcGbMf2h+1JXyW2L1s2av9BfQvA1vZQ0gzYVOKxpFF/uOuprIGppIGka0kHwDjfxncoewfYSFoCc+Be0hWwbQ2kbjxKcpbksQqcJBGw+hEqyUWSYZJn2/MkY9uzJO+2X2yP/nylX49LcluzLZtEWAA3X5/ugNOao4UV8PoJxE2etmUkn+EAAAAASUVORK5CYII=") !important;
}
/* Bookmarks / marque-pages */
menubar > menu#bookmarksMenu
{
-moz-binding:url("chrome://global/content/bindings/menu.xml#menu-iconic")!important;
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9kCFAUnAfdXNPcAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAA50lEQVQoz32RPy7EURRGv/tGMTqVSIRGdFNjAaLQqCQ6WhVRKazCLhCJTdgAlZIVGAUJk3M0v5Hxb77qJffc5Nz3JX9EbepGpgUYw33gAlDdnQp37xvVbuFN3Z9kWpK01gLMqPNVNUySqkqSXpJndbm19s25r14BQ2ANuAQ+gEP16JcecG0X4AnYVreAU3UECLwCe02dq6rBeLmqFpL0k9wmGai9qkpVzSZZGistAvfqe6dxor4A6xM/dq7W5B2r6o56Aow66FHdVA/U3n+FPXTwOGf5p90vPfWug79rTGl9BThW28/ZJwORCUoM13E2AAAAAElFTkSuQmCC") !important;
}
/* Tools / outils */
menubar > menu#tools-menu
{
-moz-binding:url("chrome://global/content/bindings/menu.xml#menu-iconic")!important;
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9kCFAU5M+vBWqgAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAA10lEQVQoz52RsS6EQRhF7/xZUago9CSCSuIBdOIZvADxLhqPstGsTbRqhQdQiKxNFIJG/pyj2CnGH0TcZma+O3fmzHzJf6QO1+cutNnWgXRJUkoJUJrAbp1utYGu6xYBdTvJTJ2qy0n6uqcHjtRXddxetQHcVIwX9VEVuK3jB3DRUkRdV0+BmV81AQ7UUZIFUn3HPMlTkpXBnyyVUu5KKX2LtKaOAdW3iiXwUGsCZ21gR31Xr4F94KriHKsn1Zv81pfLeurh0Bv9ELhP8pxk/tfOr6p733mfizzcFB+ZsssAAAAASUVORK5CYII=") !important;
}
/* Help / aide */
menubar > menu#helpMenu
{
-moz-binding:url("chrome://global/content/bindings/menu.xml#menu-iconic")!important;
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9kCFAUEM4EpEhYAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAtElEQVQoz5WQMYpCQRBEXw0mi2C0eBNBjAxEsz2KqUf4B/AgZrK5YGLiPQw0E0W7TL4wjl/RlzTTVE11t8iwPQRGwCXr/aSUZjQREZUzIsIR4VzTKjxbYAmc6/dV0h/fYHvdmGAbSdjuA7+AgRPQfffbOCLiPv+dXJMKz0CSAOpCoX8y7G3vgLlqUkrKBSrO2gY6ko6SDk1jPyRI6gFT25OPThgRVb3s/ytNq0jYAAtg9cpwA9yeZZzMPzbwAAAAAElFTkSuQmCC") !important;
}

/* ===/// MENUBAR ====== */

see the first at userstyles.org