Personnalisation de Firefox Quantum 57.0
sans extension(s)
Voici comment vous pouvez personnaliser Firefox 57.0 quantum à défaut de certaines extensions incompatibles
Vous devez tout d’abord créer un dossier du nom de « chrome » dans votre dossier profil de Firefox.
le dossier « chrome » et les fichiers Userchrome.css et userContent.css n’existent pas par défaut, il faut les créer dans votre profile Firefox (c’est un dossier dossier caché dans AppData).
Si le dossier Chrome n’existe il faudra le créer depuis l’explorateur Windows.
Créer deux fichiers Userchrome.css et userContent.css
Le fichier Userchrome.css sert pour personnaliser l’interface de Firefox ou waterfox.
Le fichier userContent.css sert personnaliser les pages web dans Firefox ou les messages ou même la couleur d’un texte selectionné, etc..
Créez un fichier texte à l’aide d’un éditeur de texte avec le Bloc note,notepad++, Subime-text ou brackets, etc..
Les lignes entre /* et */ sont des commentaires et ne seront pas prises en compte.
Si vous avez des images à rajouter il vous faudra les mettre dans le dossier chrome.
Sauvegarder dans le dossier Chrome de ton profil en lui donnant le nom de: Userchrome.css
Si le dossier Chrome n’existe il faudra le créer depuis l’explorateur Windows (voir plus haut).
Code à mettre dans « userContent.css »
1) Mettre une image en page de démarrage Firefox
Vous devez avoir
L’image dans ce dossier « chrome » dans votre profil
Chemin d’origine de l’image chez moi par exemple:
C:\Users\Christian-S\AppData\Roaming\Mozilla\Firefox\Profiles\w285eg5 9.default\chrome\firefox57_logo.gif
en théorie
(« file:\C:\Users\Christian-S\AppData\Roaming\Mozilla\Firefox\Profiles\w285eg5 9.default\chrome\firefox57_logo.gif »)
ensuite
Mettre 3 « / » après file et modifier le sens des slashs du chemin
Il faut remplacer ainsi :
(« file:///C:/Users/Christian-S/AppData/Roaming/Mozilla/Firefox/Profiles/w285eg59.default/chrome/firefox57_logo.gif »)
Code css à ajouter dans fichier userContent.css dans le dossier « chrome » du profil de FF,
Il faut éditer le fichier userContent.css avec un éditeur de texte, Notepad++,Brackets, Sublime-text, etc…
body {
background: url(« file:///C:/Users/Christian-S/AppData/Roaming/Mozilla/Firefox/Profiles/w285eg59.default/chrome/firefox57_logo.gif ») center no-repeat !important;
color: #000 !important;
}
html {
width: 100% !important;
height: 100% !important;
}
}
PS: remplacer l’adresse google dans l’exemple ci-dessus par l’adresse de votre page d’Accueil
ou
@-moz-document url(« about:newtab ») {
body {
background: url(« file:///C:/Users/Christian-S/AppData/Roaming/Mozilla/Firefox/Profiles/w285eg59.default/chrome/firefox57_logo.gif ») center no-repeat !important;
color: #000 !important;
}
html {
width: 100% !important;
height: 100% !important;
}
}
ou
@-moz-document url(« about:home ») {
body {
background: url(« file:///C:/Users/Christian-S/AppData/Roaming/Mozilla/Firefox/Profiles/w285eg59.default/chrome/firefox57_logo.gif ») center no-repeat !important;
color: « 000 !important;
}
html {
width: 100% !important;
height: 100% !important;
}
}
Résultat:
2) Changer les couleurs de la sélection dans la page
/* Sélection url texte blanc et fond rouge */
::-moz-selection {
color: #fff !important;
background: #ff0000 !important;
}
===========================================================
Code à mettre dans « userChrome.css »
Code à mettre dans le bloc-note de Windows
puis enregistrer le fichier sous le nom « userChrome.css »
lui même à mettre dans le dossier « chrome » (userChrome.css sert à modifier l’apparence de l’interface du navigateur)
Sur Windows: C:\Users\lenomPC\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxxx.default\chrome\userChrome.css
Firefox barre personnelle cachée et affichée en hover
Vous devez créer votre dossier du nom de « chrome » dans le dossier profil de Firefox ou waterfox
Créer deux fichiers Userchrome.css et userContent.css
Le fichier Userchrome.css sert pour personnaliser l’interface de Firefox ou waterfox.
Le fichier userContent.css sert personnaliser les pages web dans Firefox ou les messages ou même la couleur d’un texte selectionné, etc..
Ce code à mettre dans Le fichier Userchrome.css
1) Barre personnelle – marque-pages auto-rétractable
/* Barre personnelle Cachée */
#PersonalToolbar {
background: #F9F9FA !important;
font-family: Times, sans-serif !important;
font-size: 13px !important;
color: #000 !important;
height: 6px !important;
min-height: 6px !important;
max-height: 6px !important;
padding:0;
transition: .4s ease;
z-index: 100 !important;
}
#PersonalToolbar #personal-bookmarks{
opacity: 0;
transition: .2s ease;
}
/* Barre personnelle affichée en hover */
#PersonalToolbar:hover{
background: #333 !important;
height: 43px !important;
min-height: 40px !important;
max-height: 43px !important;
padding: 2px 2px;
transition: .2s ease !important;
box-shadow: 1px 1px 2px #000 !important;
}
#PlacesToolbarItems{
opacity: 0.8;
transition-delay: .5s;
transition: .4s ease;
}
#PlacesToolbarItems:hover{
transition: .2s ease;
opacity: 1;
}
#PersonalToolbar:hover #personal-bookmarks{
opacity: 1;
transition: .2s ease;
}
#PersonalToolbar #personal-bookmarks{
transition-delay: .4s !important;
margin-right: 1px !important;
}
#PersonalToolbar:hover #personal-bookmarks{
transition: .2s ease 0s;
}
#personal-bookmarks .bookmark-item {
background-color: #eee !important;
max-height: 38px !important;
color: #000 !important;
min-width: 110px !important;
margin: 2px 1px 0 1px !important;
padding-right: 1px !important;
padding-left: 2px !important;
font-family: Times, sans-serif !important;
font-size: 13px !important;
border-radius: 3px !important;
border: 2px solid #ccc !important;
box-shadow: inset 1px 1px 2px #000, inset -1px -1px 2px #000 !important;
transition: all .5s ease;
}
#PlacesChevron .toolbarbutton-icon {
background-color: #fff !important;
}
#personal-bookmarks .bookmark-item:hover {
background: linear-gradient(#E66565 20%, #000 80%);
color: #fff !important;
transition: all .3s ease;
border: 2px solid #ccc !important;
box-shadow: none !important;
}
#personal-bookmarks #PlacesChevronPopup {
width: 220px !important;
}
autre barre
/* Barre personnelle Cachée */
#PersonalToolbar {
background: #eee !important;
font-family: Times, sans-serif !important;
font-size: 12px !important;
color: #000 !important;
height: 3px !important;
min-height: 3px !important;
max-height: 3px !important;
padding:0;
transition: .5s ease;
box-shadow: inset 1px 1px 2px #000, inset -1px -1px 2px #000 !important;
z-index: 100 !important;
}
#PersonalToolbar #personal-bookmarks{
opacity: 0;
transition: .5s ease;
}
/* Barre personnelle affichée en hover */
#PersonalToolbar:hover{
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
padding: 2px 2px;
transition: height .2s, background .3s ease .3s, color .2s ease .2s !important;
}
#PlacesToolbarItems{
opacity: 0.5;
transition-delay: 1s;
transition: .5s ease;
}
#PlacesToolbarItems:hover{
transition: .3s ease;
opacity: 1;
}
#PersonalToolbar:hover #personal-bookmarks{
opacity: 1;
transition: .3s ease;
}
#PersonalToolbar #personal-bookmarks{
transition-delay: .8s !important;
margin-right: 1px !important;
}
#PersonalToolbar:hover #personal-bookmarks{
transition-delay: 0s !important;
}
.bookmark-item{
margin-left: 0 !important;
margin-right: 0 !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
A la place de box-shadow: inset 1px 1px 1px #000, inset -1px -1px 1px #000 !important;
vous pouvez mettre
border: 1px solid #000 !important;
pour la couleur vous pouvez prendre une autre ex: couleur bleue
Code: blue ou #0000ff ou rgb(0, 0, 255) ou hsl(240, 100%, 50%)
Pour ce qui est de la transition, j’ai mis ease
vous pouvez mettre ease-in-out , linear
Les fonctions suivantes :
ease : Rapide sur le début et ralenti sur la fin.
linear : La vitesse est constante sur toute la durée de l’animation.
ease-in : Lent sur le début et accélère de plus en plus vers la fin.
ease-out : Rapide sur le début et décercler sur la fin.
ease-in-out : Le départ et la fin sont lents.
de même que pour la transition
vous pouvez modifier à souhait , juste une petite sauvegarde de votre dossier chrome
Fonctionne très bien !!
Quelques autres exemples de personnalisation
Liste non exhaustive qui sera complétée au fil du temps
/* Changer les couleurs de la sélection dans la page */
/* Sélection url texte blanc et fond noir */
::-moz-selection {
color: #fff !important;
background-color: #ff0000 !important;
}
/* Couleurs de l’onglet actif ———————————– */
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
background-color: #000 !important;
font-family: Times, sans-serif !important;
height: 40px !important;
color: #fff !important;
font-style: normal !important;
font-size: 14px !important;
border-radius: 4px !important;
border: 2px solid #ff0000 !important;
}
/* Changer la couleur des onglets normaux */
tab:not([selected= »true »]) {
background-color: #050542 !important;
font-family: Times, sans-serif !important;
color: #fff !important;
font-weight: bold !important;
font-size: 14px !important;
border-radius: 4px !important;
box-shadow: inset 1px 1px 2px #fff, inset -1px -1px 2px #fff !important;
border: 2px solid #fff !important;
}
/* Supprimer la barre haut dessus de l’onglet actif */
#TabsToolbar .tabbrowser-tab .tab-line {
visibility: hidden;
}
/* centrer texte onglet */
.tab-label {
margin-top: 1px;
margin-bottom: 0;
-moz-box-flex: 1;
text-align: center !important;
}
/* Couleur de fond bouton nouvel onglet */
.tabs-newtab-button {
font-weight: bold !important;
color: #fff !important;
}
/* croix Rouge sur onglet actif */
.tab-close-button {
background-color: #fff !important;
color: #0000ff !important;
border-radius: 50% !important;
border: 1px solid #0000ff !important;
width: 20px !important;
height: 20px !important;
}
/* Croix de fermeture sur les onglets inactifs */
.tab-close-button:not([selected]) {
color: #ff0000 !important;
border-radius: 50% !important;
width: 20px !important;
height: 20px !important;
border: 1px solid #ff0000 !important;
}
/* Changer taille de la barre d’adresses */
#urlbar {
max-width: 750px !important;
min-width: 400px !important;
background-color: #ccc !important;
height: 45px !important;
color: #000 !important;
font-weight: 600 !important;
border-radius: 3px !important;
margin-top: 4px !important;
margin-left: 5px !important;
border: 1px solid #000 !important;
}
/* Fond de la barre d’adresse */
/* Image (background-image: url(‘Chemin/img.png’) !important;) */
#urlbar .textbox-input-box {
background-color: #000 !important;
color: #fff !important;
padding-bottom: 3px !important;
padding-left: 3px !important;
}
/* Barre de Recherche */
.searchbar-textbox {
max-width: 280px !important;
min-width: 200px !important;
background-color: #000 !important;
color: #fff !important;
font-family: Times, sans-serif !important;
font-weight: bold !important;
border-radius: 3px !important;
box-shadow: inset 1px 1px 3px #fff, inset -1px -1px 3px #fff !important;
height: 35px !important;
}
/* Barre de Recherche */
.searchbar-textbox {
max-width: 280px !important;
min-width: 200px !important;
background-color: #000 !important;
height: 35px !important;
color: #fff !important;
font-family: Times, sans-serif !important;
font-weight: bold !important;
border-radius: 3px !important;
box-shadow: inset 1px 1px 3px #fff, inset -1px -1px 3px #fff !important;
}
/* Croix de fermeture sur les onglets inactifs */
.tab-close-button:not([selected]) {
color: #ff0000 !important;
}
/* Onglets sous la barre d’adresse – barre personnelle au-dessus des onglets */
#TabsToolbar {-moz-box-ordinal-group: 2}
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000 !important; }
/* Barre des menus */
menubar {
max-width: 450px !important;
margin: 4px 0 2px 375px !important;
-moz-border-radius: 5px !important;
border: 1px solid #fff !important;
background-color: #000 !important;
border-radius: 3px 3px 3px 0 !important;
height: 35px !important;
font-size: 14px !important;
}
#helpMenu {
font-family: ‘arial black’!important;
color: #ff0000 !important;
}
#edit-menu {
font-family: ‘times new roman’ !important;
color: #FFA500 !important;
font-size: 14px !important;
}
#tools-menu{
font-family: ‘times new roman’ !important;
color: #FFA500 !important;
font-size: 14px !important;
}
#history-menu {
color: #FFA500 !important;
font-family: symbol !important;
font-size: 14px !important;
}
#bookmarksMenu {
font-family: symbol !important;
color: #fff !important;
font-size: 14px !important;
}
#file-menu {
font-family: symbol !important;
color: #fff !important;
font-size: 14px !important;
}
#view-menu {
font-family: symbol !important;
color: #fff !important;
font-size: 14px !important;
}
/* L’icône grise dossiers des marque-pages en jaune */
.bookmark-item[container], treechildren::-moz-tree-image(container) {
fill: #E0BF18 !important;
}
/* Le bouton d’accueil */
#home-button {
max-height: 30px !important;
margin-top: 3px !important;
margin-left: 50px !important;
border-radius: 50% !important;
box-shadow: inset 1px 1px 2px #000, inset -1px -1px 2px #000 !important;
}