(Si vous êtes intéressé-e par la modification de l'apparence de Firefox lui-même, alors vous n'êtes pas dans le bon topic, dirigez-vous plutôt vers l'excellentissime personnaliser Firefox avec le userChrome.css, par ottomar.)
Certaines astuces ayant été récupérées à droite et à gauche sur ce forum, je remercie les auteurs respectifs que j'ai pillés sans scrupules
...
Toutes ces astuces sont des exemples, n'hésitez pas à les adapter à vos besoins.
Des tutoriels sur le CSS :
http://css.alsacreations.com/ (fr)
http://www.openweb.eu.org/css/ (fr)
Des liens utiles sur les sélecteurs :
http://www.w3.org/TR/css3-selectors/#selectors (en)
http://wiki.media-box.net/documentation/css (fr)
Un lien sur les URL :
http://www.commentcamarche.net/internet/url.php3 (fr)
Bonne nouvelle : depuis Firefox v1.5, il est possible de définir des styles CSS qui ne s'appliqueront qu'à certaines pages plutôt que globalement. La sélection peut se faire sur un nom de domaine, un ensemble de pages ou une page donnée.
La syntaxe :
- Code: Tout sélectionner
@-moz-document domain(nom_de_domaine){ code CSS habituel }
@-moz-document url-prefix(adresse_http_partielle) { code CSS habituel }
@-moz-document url(adresse_http_précise) { code CSS habituel }
Exemples :
- @-moz-document domain(geckozone.org) { code CSS habituel } : le CSS défini ici s'appliquera à toutes les pages issues du nom de domaine geckozone.org ;
- @-moz-document url-prefix(http://www.geckozone.org/forum/) { code CSS habituel } : le CSS défini ici s'appliquera à toutes les pages issues du seul forum de www.geckozone.org ;
- @-moz-document url(http://www.geckozone.org/forum/search.php?search_id=newposts) { code CSS habituel } : le CSS défini ici s'appliquera à la seule page des nouveaux messages depuis la dernière visite du forum de www.geckozone.org.
- Code: Tout sélectionner
@-moz-document
domain(domaine_1),
domain(domaine_2),
url(adresse_page_1),
url-prefix(début_adresse_1),
url-prefix(début_adresse_2),
url(adresse_page_2),
domain(domaine_3)
{
règles CSS communes à toutes ces adresses
}
Par exemple, il peut être intéressant de définir un jeu de règles CSS s'appliquant aux seuls forums phpBB, on ajoutera alors au fur et à mesure les adresses des forums que l'on fréquente :
- Code: Tout sélectionner
@-moz-document
url-prefix(http://franquin.org/forum/),
url-prefix(http://www.geckozone.org/forum/)
{
/* Agrandir les zones de saisie */
textarea {
min-width: 75em !important;
font-family: monospace !important;
}
}
Une dernière chose : si vous définissez beaucoup de règles spécifiques à certains sites, la taille et la complexité de votre fichier userContent.css vont exploser, rendant sa gestion difficile.
Je vous suggère dès lors d'utiliser une série de fichiers séparés, dans lesquels vous développerez les instructions CSS spécifiques à chacun des sites, et auxquels vous ferez appel avec une série de commandes @import url(...); dans le fichier-maître userContent.css, un peu comme ceci :
- Code: Tout sélectionner
/*/////////////////////////////////////////////////////////////////////////////
/ /
/ u s e r C o n t e n t . c s s /
/ /
/ pour FF v1.5+ /
/ /
/ For more examples see http://www.mozilla.org/unix/customizing.html /
/ /
/////////////////////////////////////////////////////////////////////////////*/
/* Insérer ici les styles communs à tous les sites ------------------------- */
@import url(commun.css);
/* ------------------------------------------------------------------------- */
/* Insérer ici les styles dédiés par site----------------------------------- */
@import url(CambridgeDictionary.css);
@import url(phpBB.css);
@import url(Yahoo.css);
/* ------------------------------------------------------------------------- */
/* Insérer ici les essais provisoires -------------------------------------- */
@import url(essais.css);
/* ------------------------------------------------------------------------- */
Ces fichiers séparés sont à placer par défaut dans le même répertoire /chrome que le fichier-maître userContent.css.
Et attention, toutes les commandes @import url(...); doivent impérativement précéder toutes les autres, sinon elles ne seront pas prises en compte.
Encore un dernier mot en général sur les commentaires /* ... */ dans un fichier .css : ils ne peuvent en aucun cas être imbriqués les uns dans les autres, ils doivent impérativement se succéder les uns les autres.
Pour désactiver ceci :
- Code: Tout sélectionner
/* Agrandir les zones de saisie */
textarea {
min-width: 75em !important;
font-family: monospace !important;
}
...faites ceci :
- Code: Tout sélectionner
/* Agrandir les zones de saisie */ ==> un 1er commentaire sur une ligne
/* ==> début du 2è commentaire
textarea { |
min-width: 75em !important; |
font-family: monospace !important; |
} |
*/ ==> fin du 2è commentaire
...mais pas celà :
- Code: Tout sélectionner
/* ==> début du commentaire
/* Agrandir les zones de saisie */ ==> suite ET FIN de ce même commentaire
textarea { ==> code toujours actif
min-width: 75em !important; " " "
font-family: monospace !important; " " "
} " " "
*/ ==> caractères ignorés
Voilà, c'est tout. Bonne découverte
!- Tout site
- Code: Tout sélectionner
/* Changer la couleur associée à l'option "Surligner tout" de
la barre de recherche rapide [Ctrl+F] */
span#__firefox-findbar-search-id {
color:#000 !important;
background-color:#0F0 !important;
font-weight: bold !important;
}- Code: Tout sélectionner
/*
Barres de défilement horizontales et verticales
Jusqu'à 4 boutons possibles :
scrollbarbutton[sbattr="scrollbar-up-top"]
scrollbarbutton[sbattr="scrollbar-down-top"]
scrollbarbutton[sbattr="scrollbar-up-bottom"]
scrollbarbutton[sbattr="scrollbar-down-bottom"]
2 valeurs possibles pour chacun des boutons :
display: none !important
display: -moz-box !important
*/
scrollbarbutton[sbattr="scrollbar-up-top"],
scrollbarbutton[sbattr="scrollbar-down-top"],
scrollbarbutton[sbattr="scrollbar-up-bottom"],
scrollbarbutton[sbattr="scrollbar-down-bottom"] {
display: -moz-box !important;
}- Code: Tout sélectionner
/* Modifier le curseur de la souris sur les liens ouvrant une nouvelle fenêtre */
:link[target="_blank"],
:link[target="_new"],
:visited[target="_blank"],
:visited[target="_new"] { cursor: crosshair; }- Code: Tout sélectionner
/* Modifier le curseur de la souris sur les liens JavaScript */
a[href^="javascript:"] { cursor: move; }- Code: Tout sélectionner
/* Distinguer les liens externes non garantis, non suivis ou
non créés par le webmestre de la page lui-même. */
a[rel~="nofollow"] {
border: 1px dashed #f00 !important;
padding: 1px !important;
color: #000 !important;
background-color: #e3eaf3 !important;
}- Code: Tout sélectionner
/* Empêcher les textes clignotants */
blink { text-decoration: none !important; }- Code: Tout sélectionner
/* Mettre les boutons à la mode Mac */
input[type="button"],
input[type="submit"] {
-moz-border-radius: 18px !important;
border: 1px solid #CCC !important;
border-bottom: 2px solid #999 !important;
padding: 1px 6px !important;
color: #000 !important;
background-color: #EEE !important;
font-family: 'Lucida Grande' !important; /* Cela marche à condition d'avoir
cette police sur son PC. */
font-size: 12px !important;
}- Code: Tout sélectionner
/* Mettre les boutons à la mode Mac (bis) */
input[type="text"],
textarea {
border-top: 2px solid #989898 !important;
border-right: 2px solid #C3C3C3 !important;
border-bottom: 1px solid #DDD !important;
border-left: 2px solid #C3C3C3 !important;
padding: 1px 3px !important;
font-family: 'Arial' !important;
font-size: 12px !important;
}- Code: Tout sélectionner
/* Mettre les boutons à la mode Mac (pour le survol) */
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
-moz-border-radius: 18px !important;
border: 1px solid #CCC !important;
border-bottom: 2px solid #999 !important;
padding: 1px 6px !important;
color: #FFF !important;
background-color: #800 !important;
font-family: 'Tahoma' !important; /* Cela marche à condition d'avoir
cette police sur son PC. */
font-size: 12px !important;
font-weight: bold !important;
}- Code: Tout sélectionner
/* Mettre les boutons à la mode Mac (pour l'activation) */
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
-moz-border-radius: 18px !important;
border: 1px solid #CCC !important;
border-bottom: 2px solid #999 !important;
padding: 1px 6px !important;
color: #FFF !important;
background-color: navy !important;
font-family: 'Tahoma' !important; /* Cela marche à condition d'avoir
cette police sur son PC. */
font-size: 12px !important;
font-weight: bold !important;
}- Code: Tout sélectionner
/* Stopper les balises <marquee> */
marquee {
-moz-binding: none !important;
display: block;
height: auto !important;
}- Code: Tout sélectionner
/* Supprimer les barres de défilement verticales */
scrollbar[orient="vertical"] { display: none !important; }- Code: Tout sélectionner
/* Changer les couleurs de la sélection dans la page */
::-moz-selection {
color: #D1FFFF !important;
background-color: #006699 !important;
}- phpBB - certains forums (dont GZ)
- Code: Tout sélectionner
td.genmed --> la zone de la signature.
td.postbody --> la zone du message.
td.postbody td.code --> une zone de code dans le message.
tb.postbody td.quote --> une zone de citation dans le message.
td.postdetails --> la zone des renseignements au-dessus du message.
td.row1Poster --> la zone de l'avatar (première couleur de fond).
td.row2Poster --> la zone de l'avatar (deuxième couleur de fond).- Code: Tout sélectionner
/* phpBB - Changer l'apparence des citations QUOTE */
td.quote {
quotes: "\201C" "\201E" "\00AB" "\00BB" !important;
border: 1px #888 dashed !important;
padding: 1em 1em 1em 4em !important;
}
td.quote:before { content: open-quote !important; }
td.quote:after { content: " " close-quote !important; }
td.quote:before,
td.quote:after {
color: #557 !important;
font-family: "Times New Roman", Times, serif !important;
font-size: 300% !important;
font-weight: bold !important;
}
td.quote:first-letter { margin: -1em !important; }- Code: Tout sélectionner
/* phpBB - Utiliser une police à chasse fixe dans
les balises CODE, et en augmenter la taille */
td.code {
font-family: monospace !important;
font-size: 120% !important;
}- Code: Tout sélectionner
/* phpBB - Limiter la hauteur de la fenêtre associée aux balises CODE.
Si le texte contenu dans la balise est plus long que la hauteur de
la fenêtre, une barre de défilement verticale apparaîtra. */
td.code {
display: block !important;
max-height: 20em !important;
overflow: auto !important;
}- Code: Tout sélectionner
/* phpBB - Présenter les balises CODE comme un vieux terminal */
td.code {
-moz-border-radius: 10px !important;
padding: 5px !important;
color: #0F0 !important; /* vert sur fond noir */
background-color: #000 !important;
}- Code: Tout sélectionner
/* phpBB - Ajouter aux balises CODE une image de fond embarquée dans le CSS */
td.code {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAPCAMAAAEzEIgrAAAABGdBTUEAAK%2FINwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAEmUExURS5iqv%2F%2F%2FwAAAPvu1GGFtZWovztrrUh0r8jLynuXulV8sm6Ot%2B%2Fm0tXUzGyQwbvDx8nW6KKxwuLdz6%2B6xDxrrYifvDpqrK7C3T9trjRlqkNxsDdnqzZmqujPpsW21ueNkfDz9oG7kMGuxIivhc%2FQ1%2BLZ6JWu0ZKx33OgrfrEd%2FXY2YeHW%2B3gzHapi9fk8ffixPT1%2BN7azPLg4s7i3mWh2HGRxMm72aTGv5yPwmOi3OiyuN3n59vE2X2Wt%2BRjZ8V%2Bjdbc3prC57jC2o2wkLXDqYOm0IOgyaK62VaLxY2mgdbdxee4vezw9IadvNBhd8e4o9q1p5lxkM%2FDsNe60Wej2cmsg56%2FwoCFu8e7ovjs2cywzcTNoYq6pWeueoitusjd1JuRw7tidU%2Fhp24AAAIuSURBVHjaYmCCAwamYEYWfmYOBlZmgABiQBJ1D2NmZuDiZmBmAAggBiZpHxFGfgYgYGWAAyZGKUZGBlQAEEBI%2BpFMYoxwYQQZw8ACV8fIwGgZy8ggzMzMxsLJysDLzAO0HSjIx4duJCNAAAEtYuQT4WPEtAxTYYi%2BcqQ5I9gyHiFOdmZmFn4eBqA3OHhYOJg5WZl5QRyQQjF5PzMJRpADuDiYOdiAClmZGZhBalkEgWygARCFRAKAACJeISOjgKSMACG%2FMAAVCrjqWMcJMDIAHQcVZMauUFJPM1pBjJGBg4sB5GqQL3i4hJlZOTnAvgAiHiFukEIZU3VPXRGQQmZWkAREOQiycXMCg4YDyOcAW51oFZUAtRqIeIEkC78oMzdYlxBIIQczKwPYM2IixHiG2OABCNBK2bREDMRgOGsyk52Z1tLujhVFQVERvfh18OC3IKKIHyBeBP%2F%2Fv%2FBNu1W8edgcEpgkT99O0tqs52kLHbBdPX9%2Fe35aakezJdIc%2FypUJ%2FQf64GL99drh8cbD1%2B7%2FVbWXMkE2eAU3mcXSNhFBBIXzcF0lheXLPi%2BuAdOT24eX%2FZvt64%2BVzpgNzhJXAtXlDlQBJAZqGLsy9IexRNSrj3yzlaYEjvB2aDw7uJo%2B2zvYH1nUDjOLBENMaDXaTaFTeGpaaQpKRalhyauEhj4EgC0YpEBOGqnr5ebpx%2FLv3cYtPOCRvwmlLwoWYNPOFGBWQxWJBTtfjXJzyvPdcrfzzwfU8ifTT0AAAAASUVORK5CYII%3D) !important;
background-position: bottom right !important;
background-repeat: no-repeat !important;
}- Code: Tout sélectionner
/* phpBB - Centrer les avatars en largeur */
td.row1Poster img,
td.row2Poster img {
display: block !important;
margin: auto !important;
margin-top: 10px !important;
}- Code: Tout sélectionner
/* phpBB - Élargir la zone de saisie des posts,
augmenter la taille de la police de caractères */
textarea.post {
width: 800px !important;
font-family: monospace !important;
font-size: 110% !important;
}- Code: Tout sélectionner
@-moz-document
url-prefix(http://franquin.org/forum/viewtopic.php),
url-prefix(http://www.geckozone.org/forum/viewtopic.php)
{
/* phpBB - Bloquer le titre de l'article en haut de la page */
a.maintitle,
td.maintitle {
position: fixed !important;
top: 0px !important;
right: 0px !important;
left: 0px !important;
background-color: #DDE !important;
font-variant: small-caps !important;
text-align: right !important;
opacity: 0.75 !important;
}
}- Yahoo!
- Code: Tout sélectionner
/* Cacher les pubs sur Yahoo! Search */
#yschsec, .yschspns, #yschiy { display: none !important; }
Les classes (.) et les identifiants (#) utiles :
La valeur data: d'une image peut être calculée dans The data: URI kitchen.
tu veux avoir aussi ton post-it comme ottomar pour le userChrome.css ?
...