Windows,Tutoriels, Informatique

Les Infos du Geek - Windows, tutoriels, Informatique

Translate website
mail-argent
paypal-faire-don

Le GEEK.fr


Personnaliser Firefox

Publié le Publié dans Articles, Tutoriels

Personnalisation de Firefox sans extension(s)

 

Personnaliser l’interface de Firefox sans extension.
Certaines extensions permettent de modifier l’apparence de Firefox mais ne sont plus compatibles avec les derniéres versions de Firefox,
Il est possible d’effectuer des personnalisations, masquer un élément de menu, modifier une couleur, la taille d’éléments, etc.., à l’aide de codes placés dans le fichier userChrome.css de votre profil Firefox.
Voici comment vous pouvez personnaliser Firefox quantum à défaut de certaines extensions incompatibles

 

 

firefox-mozilla

 

 

Vous devez tout d’abord créer un dossier du nom de « chrome » dans votre dossier profil de Firefox.

 

dossier-chrome

 

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).

 

dossier-chrome-fichiers

 

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:

 

Firefox-accueil

 

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

 

firefox texte selectionné

 

===========================================================

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

 

Firefox-barre- personnelle-cachée

 

Firefox-barre- personnelle-hover

 

 

 

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

/* Modifier la hauteur des onglets */
#tabbrowser-tabs,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: 45px !important;
}

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

 

barre des menus firefox

 

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