Fond d'écran du panorama de Firefox 4 Fermé

Question

Bonjour, je ne sais pas si la question a déjà été posée mais je me demandais si il était possible de changer le thème / le fond d'écran du panorama de firefox 4 car le miens est d'un bleu/gris tout fade...
Merci.



Configuration: Windows XP / Firefox 4.0

Haméwitapa · Answer

bonjour,


Oui c'est possible, si on parle bien de la même chose, à savoir panorama => la fenêtre pour la gestion des groupes d'onglets.


Pour l'explication je vais coller un passage d'un post que j'ai déjà eu l'occasion d'écrire, en l'adaptant un peu, ça fait de la lecture mais y a rien de sorcier; c'est parti, on y va:

Pour celles et ceux qui ne veulent pas s'embarrasser d'une extension, la manip est simple, il s'agit de coller quelques petits codes dans un fichier situé dans le dossier "Profiles" de Firefox, là où sont entre-autre stocké toutes les données personnelles, vous savez, celui dont vous faites de temps en temps une ptite sauvegarde quand on y tient, isn't it ;)
Pour se rendre facilement dans ce dossier, sans se casser la tête (ou autre ;)) avec les dossiers cachés si vous l'avez laissé placé par défaut, dans Firefox direction le menu " ? " ou "Aide" -> "Informations de dépannage" -> "ouvrir le dossier correspondant".
Une fois la nouvelle fenêtre ouverte, fermer Firefox.

Ensuite, ouvrir le dossier "Chrome", qui doit contenir deux fichiers, userChrome-example.css et userContent-example.css.
C'est le premier qui nous intéresse ici => userChrome-example.css

note de bibi: si le dossier "Chrome" n'existe pas il faut alors acheter un nouvel ordi dernière génération... oÔ euh... ou pas :)
Non, il suffit de créer ce dossier, par clic-droit -> "nouveau"-> "Dossier", et de le nommer Chrome.
Ensuite ouvrir ce dossier, et par clic-droit -> "nouveau" -> "Document texte", et nommer le fichier userChrome.css ;c'est dans ce fichier qu'il faudra coller les codes.

Pour celles et ceux qui ont déjà tout, il suffira d'ouvrir le fichier userChrome-example.css, de coller les codes, et de passer par "Enregistrer sous" pour renommer le fichier en userChrome.css.

On fini en fermant donc le fichier si c'est pas fait, ainsi que la fenêtre du profil. Ensuite on peut relancer FF.


renote du même auteur: Pour celles et ceux qui l'ont déjà ou qui préfèreraient, il existe aussi la possibilité de passer par exemple par l'extension "Stylish" qui s'occupe de tout pour la gestion du code, pas besoin de fichier userChrome, et qui est bien pratique pour les tests (réglages des positions, de l'apparence des éléments,...), pas besoin d'enregistrer, fermer, ouvrir à chaque essai.
Bon, si on l'a pas déjà, ça fait une extension rien que pour ça, ...c'est un choix.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Tout ce qui est placé entre les /*...*/ n'est pas pris en compte par FF, vous pouvez y noter la liste de vos courses, il ne les fera pas :) ,et donc on peut y inscrire des commentaires pour mieux s'y retrouver. 

Et donc si tu ne veux pas qu'une modif soit appliquée à un élément par rapport ce que j'ai fait, soit tu le place entre les bornes /*...*/ comme je l'ai fait dans mon exemple pour le choix du fond principal, soit tu le supprime tout simplement.


Le glissé/déposé semble moins fluide si on choisi une couleur (du moins assez sophistiquée) plutôt qu'une image pour le fond principal.

Pour savoir comment ça marche au juste la propriété couleur, les tutos ne manquent pas sur le web, sinon passe faire coucou ;)


Pour une image située sur le web, ben y a juste à coller son adresse (voir mon exemple dans le code).

Pour le choix d'une image située sur le disque dur il faut indiquer le chemin d'où elle se trouve (voir mon exemple dans le code) ,il faut garder le "file:/" ensuite le nom de la partition (ici "D")  /puis le(s) répertoire(s)/ et enfin le son nom.


Bon allez hop ! en avant le changement, voilà le code qu'il faut copier/coller:


/*===== DEBUT =====*/

/******** Fond Principal ********/
#tab-view
{ 
  /* => si Image par URL */
background: url("http://www.miglo.net/wallpapers/photos-nature-haute-resolution-1440x900.jpg") !important;

  /* => si Image sur ordi */
/*
background: url(file:/D:/images/fonds/alpages.jpg) !important;
*/

  /* => si Couleur */
/*
background: -moz-radial-gradient( rgba(90%,80%,0%,1) ,rgba(60%,30%,0%,1) ) !important;
*/

}


/********** Groupes **********/

/*--- Fond ---*/
.groupItem.iq-droppable.iq-resizable
{ background: transparent !important; }


/*--- Titre ---*/
.name
{ color: rgb(0%,0%,0%) !important;
 text-shadow: 1px 1px 2px white !important;
font-family: Georgia !important; }





/********** Onglets ***********/

/*--- contour des Onglets ---*/
.tab.tabInGroupItem 
{ 
 background: none !important;
 box-shadow: 0 8px 15px 6px rgba(0%,0%,0%,1) !important;
}


/*--- Titre onglet ---*/
.tab-title
{ color: yellow !important;
text-shadow: 2px 2px 1px red !important;
 }


/*--- contour Onglet sélectionné ---*/
.tab.tabInGroupItem.focus
{ box-shadow: 0 0 7px 4px rgba(100%,80%,20%,1) !important; }





/********** Fond du Groupe sélectionné **********/
.groupItem.iq-droppable.iq-resizable.activeGroupItem
{ background: rgba(100%,100%,100%,0.3) !important }


/*===== FIN :) =====*/





Voilà. Bien entendu c'est qu'un exemple, libre à chacun d'adapter selon ses goûts
 :)

Romaric. · Answer

Avec un Personas : https://addons.mozilla.org/en-US/firefox/themes/ ?

Jenovah · Answer

Haméwitapa 
-->merci pour ta réponse, si j'ai bien compris le copier coller du code tel quel avec juste une modification dans la partie "fond principal" serait suffisant? ( Car moi je n'y arrive pas ^^') 


Romaric. 
--> les personas n'y arrivent pas, ils ne changent que la facade de Firefox... 

°~~Jenova~~°

Haméwitapa · Answer

Oups ! Désolé :/ Comme je passe par Stylish pour faire toutes mes modifs j'ai pas pensé de préciser si on passe par le "userChrome" qu'il faut ajouter au tout début du fichier la ligne suivante, avec les embases d'ouverture (au début) et de fermeture (à la fin):
 @-moz-document url("chrome://browser/content/tabview.html")
{

...tout le code...

}


et du coup pour le nom du sélecteur du fond principal y a un ptit changement:
#tab-view ===> #content

Donc pour résumer, je remet tout l'ensemble pour que ce soit bien clair ;)



/*===== DEBUT =====*/

@-moz-document url("chrome://browser/content/tabview.html")
{


/******** Fond Principal ********/
#content
{ 
  /* =>si Image par URL */
background: url("http://www.miglo.net/wallpapers/photos-nature-haute-resolution-1440x900.jpg") !important;

  /* =>si Image sur ordi */
/*
background: url(file:/D:/images/fonds/alpages.jpg) !important;
*/

  /* =>si Couleur */
/*
background: -moz-radial-gradient( rgba(90%,80%,0%,1) ,rgba(60%,30%,0%,1) ) !important;
box-shadow: 0 0 50px 10px rgba(10%,10%,10%,0.8) inset !important;
*/

}


/********** Groupes **********/

/*--- Fond ---*/
.groupItem.iq-droppable.iq-resizable
{ background: transparent !important; }


/*--- Titre groupe ---*/
.name
{ color: rgb(0%,0%,0%) !important;
 text-shadow: 1px 1px 2px white !important;
font-family: Georgia !important; }


/*--- Titre onglet ---*/
.tab-title
{ color: yellow !important;
text-shadow: 2px 2px 1px red !important;
 }


/*--- Onglet sélectionné ---*/
.tab.tabInGroupItem.focus
{ box-shadow: 0 0 7px 4px rgba(100%,80%,20%,1) !important; }




/********** contour des Onglets ***********/
.tab.tabInGroupItem 
{ 
 background: none !important;
 box-shadow: 0 8px 15px 6px rgba(0%,0%,0%,1) !important;
}




/********** Groupe sélectionné **********/
.groupItem.iq-droppable.iq-resizable.activeGroupItem
{ background: rgba(100%,100%,100%,0.3) !important }


}

/*===== FIN :) =====*/



A moins que tu aies un problème pour créer le fichier userChrome ...?

Jenovah · Answer

En recopiant exactement le code (en gardant l'url de l'image), il n'y a qu'un cadre orange qui s'affiche autour de ma fenêtre (-->1ers pas vers la réussite thanks thanks thanks :p) 

(Pour ce qui est des fichiers j'ai eu un pb car  d'après la démarche il suffisait "d'ouvrir le fichier userChrome-example.css, de coller les codes, et de passer par "Enregistrer sous" pour renommer le fichier en userChrome.css." , ce que je faisait mais mon ordi recréait un autre fichier userChrome.css, il ne modifiait pas celui préexistant, et celui-ci, tout comme le fichier userContent-example, son des fichiers css, des "Document de feuille de style en cascade", et l'enregistré etait un "Document texte" 
-->en renommant le fichier j'ai juste ajouter .css et sa a marché! (je croyais que l'extension était mise d'elle même --') ) 

Maintenant il faut que je vois pour le reste, ce que j'ai pu oublier ou manquer au niveau du code. Sinon tu connaîtrais des tutos couleurs pour le panorama stp?



°~~Jenova~~°

Jenovah · Answer

Ca marche!! Je ne sais pas ce que j'ai changé de bien particulier a part quelques espaces dans les codes mais j'y suis arrivé! Merci beaucoup beaucoup Haméwitapa! 
Sinon c'était juste pour le système de couleur que je ne comprends pas :s

Haméwitapa · Answer

Ah, bien content :) pcq sinon je voyais pas trop pourquoi.

Sinon parfois il peut arriver qu'une modif ne soit pas prise en compte, dans ce cas il faut essayer en ajoutant cette ligne: -moz-appearance: none !important;
soit par exemple:

/*--- Fond ---*/
.groupItem.iq-droppable.iq-resizable
{ 
-moz-appearance: none !important;
background: transparent !important;
 }



Pour les couleurs j'ai pris le plus souvent l'habitude d'utiliser la forme "rgba" qui à l'avantage de permettre d'ajouter en plus l'effet de transparence, mais il y a d'autres formes possibles.

-> pour: rgba(rouge, vert, bleu, transparence) 
Voir par exemple => https://www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html

-> sinon voilà pour l'ensemble des formes => https://fr.wikibooks.org/wiki/Le_langage_CSS/Valeurs_et_unit%C3%A9s#Les_couleurs

Et si tu trouve pas ça pratique de trouver ta couleur par la "rgb" il existe par exemple des outils comme ça: http://www.ficml.org/jemimap/style/color/couleur.html ,mais du coup la transparence... :/
Quoique après tu peux toujours t'amuser à convertir la valeur hexa obtenue, avec la table de correspondance de cette page

-> encore une autre forme, plus récente: https://www.commentcamarche.net/faq/29726-les-differentes-proprietes-en-css3#les-couleurs-en-css3
Voir aussi ici: http://www.w3.org/TR/css-color-3/#hsl-color  (tu remonte la page et t'aura tout le résumé du reste, in english ;) )



Et pour les box-shadow => https://www.commentcamarche.net/faq/29726-les-differentes-proprietes-en-css3#faire-de-l-ombre-en-css3


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Autrement si tu veux, je recolle le code que j'ai juste restructuré pour plus de clarté. C'est la même chose mais disposé différemment pour une meilleure lecture et mieux s'y retrouver dans les éléments:
-et j'ai juste ajouter de quoi agir sur le favicone en coin de chaque onglet, que tu peux aussi choisir de ne pas afficher simplement par ce code:

.favicon 
{ display: none !important; }


-et si la présence de la "barre des titres" est gênante pour l'esthétique, tu peux ajouter ceci:

#tab-view
{ margin-top: -25px !important; }


Voilà ce que ça donne au final:




/*====== DEBUT ======*/

/******** cacher la barre des titres ********/
#tab-view
{ margin-top: -25px !important; }



@-moz-document url("chrome://browser/content/tabview.html")
{


/******** Fond Principal ********/
#content
{ 
  /* =>si Image par URL */
background: url("http://www.miglo.net/wallpapers/photos-nature-haute-resolution-1440x900.jpg") !important;

  /* =>si Image sur ordi */
/*
background: url(file:/D:/images/fonds/alpages.jpg) !important;
*/

  /* =>si Couleur */
/*
background: -moz-radial-gradient( rgba(90%,80%,0%,1) ,rgba(60%,30%,0%,1) ) !important;
box-shadow: 0 0 50px 10px rgba(10%,10%,10%,0.8) inset !important;
*/

}


/********** Groupes d'onglets **********/

/*--- Fond ---*/
.groupItem.iq-droppable.iq-resizable
{ background: transparent !important; }


/*--- Titre ---*/
.name
{ color: rgb(0%,0%,0%) !important;
 text-shadow: 1px 1px 2px white !important;
font-family: Georgia !important; }




/********** Groupe sélectionné **********/
.groupItem.iq-droppable.iq-resizable.activeGroupItem
{ background: rgba(100%,100%,100%,0.3) !important }




/********** Onglets ***********/

/*--- Contour ---*/
.tab.tabInGroupItem 
{ 
 background: none !important;
 box-shadow: 0 8px 15px 6px rgba(0%,0%,0%,1) !important;
}


/*--- Titre ---*/
.tab-title
{ color: yellow !important;
text-shadow: 2px 2px 1px red !important;
 }


/*--- Onglet sélectionné ---*/
.tab.tabInGroupItem.focus
{ box-shadow: 0 0 7px 4px rgba(100%,80%,20%,1) !important; }


/*--- Favicon ---*/
.favicon 
{ background: rgba(0%,0%,0%,0.5) !important; }




/********* Bouton Recherche et Sortie *********/
#actions
{ 
 top: 25px !important;
 background: rgba(0%,0%,0%,0.25) !important;
}


}

/*====== FIN :) ======*/



Voilà :) 
Mais je le répète, c'est qu'un exemple, si tu ne veux pas du tout de bordure (ou contour) pour les onglets, tu supprime la ligne "box-shadow..." Tu peux aussi changer les valeurs de tous les chiffres qui se trouvent dans le code...

Fond d'écran du panorama de Firefox 4

7 réponses

Discussions similaires