l'ottobar

dimanche 15 mars 2009

compact add-ons manager

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 ====== */

mardi 10 mars 2009

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 ====== */

mardi 3 mars 2009

toolbars' backgrounds : stripes

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)
pin-stripes

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 )

that's all folks

cursor : pointer on...

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

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;
}

dimanche 1 mars 2009

centered tabs on tabbar

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

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

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 ====== */

samedi 28 février 2009

merge stop & reload & throbber

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 ====== */

dimanche 22 février 2009

light-iconic-menu

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