userContent.css : trucs et astuces

[FF_Olivier]

Le CSS se trouvant dans le fichier <chemin/vers/le/profil>/chrome/userContent.css permet de modifier l'apparence de ce qui se trouve dans la fenêtre de visualisation, càd les pages des sites visités et les barres de défilement.

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

2. Quelques généralités toujours bonnes à connaître
   1. Des tutoriels sur le CSS
   2. Des liens utiles sur les sélecteurs
   3. Des liens sur les URL
   4. Des extensions Firefox bien utiles
3. Comment ça marche
   1. La syntaxe de @-moz-document
   2. Un conseil sur la bonne gestion des règles
   3. Un commentaire sur les commentaires CSS
4. Des styles en vrac
   2. 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;
      }

   3. phpBB - certains forums (dont GZ)
      Les classes (.) et les identifiants (#) utiles :

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

      La valeur data: d'une image peut être calculée dans The data: URI kitchen.

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

   4. Google
      1. Cacher la barre de recherche avancée (la colonne à gauche)
      2. Faire apparaître à la demande la barre de recherche avancée
   5. Yahoo!
      1. Cacher les pubs sur Yahoo! Search

[Mori]

tu veux avoir aussi ton post-it comme ottomar pour le userChrome.css ?
merci en tout cas pour l'initiative.

[FF_Olivier]

Ce n'est pas obligé, mais l'un complétant bien l'autre...

[calimo]

À moi à moi !!! Je veux aussi participer

Code : Tout sélectionner

/* Empêcher les textes clignottants */
blink {
	text-decoration:none !important;
}

/* Stopper les balises <marquee> */
marquee {
	-moz-binding: none !important;
	display: block;
	height: auto !important;
}

/* Cacher les pubs sur Yahoo! Search */
#yschsec,.yschspns,#yschiy {display:none!important}

[FF_Olivier]

Voilà, ajouté, merci !

[ottomar]

excusez...mais ça mérite un post-it
ou Mori, fusionne avec le userChrome ! en changeant le titre

[ottomar]

en tous cas, suis content de mes boutons mac en arial gras

et de mes zones de texte

Code : Tout sélectionner

input[type="text"],
textarea {
    font-size: 12px !important;
    padding: 1px 3px !important;
    font-family: 'Arial' !important;
    border: 1px solid #999 !important;
    border-bottom: 1px solid #ddd !important;
    border-left: 2px solid #c3c3c3 !important;
    border-right: 2px solid #c3c3c3 !important;
    border-top: 2px solid #989898 !important;
}

[Mori]

[Moderation]
je vais le mettre en post-it ... en demandant l'avis au Contrôle
initialement, j'avais l'intention de demander à FF_Olivier de reposter derrière toi et de supprimer ce topic; mais après coup, je me suis dit que ça risquait d'induire en erreur par la confusion entre userChrome.css et userContent.css

FF_olivier, peux-tu stp, rééditer ton premier post, pour qu'il soit moins "explosif" en taille ? merci.

[FF_Olivier]

@ottomar : ajouté, merci. J'ai retiré la ligne border qui me paraît inutile puisque les 4 border-{top/right/bottom/left} sont définis juste après, écrasant ainsi le premier, je ne pense pas me tromper.

@Mori : Euh oui, je peux resserrer le tout, mais ça rend l'édition de ces $#?!] de

• difficile ...
  
  PS : je conseille aussi de maintenir les deux posts séparés pour éviter les confusions, les trucs de l'un ne s'appliquant pas nécessairement à l'autre.
  
  EDIT : grammaire.

[ottomar]

exact, mais, je l'ai piraté tel que sans même y regarder de près !

[FF_Olivier]

Marre des fenêtres

Code : Tout sélectionner

 hautes de plusieurs km dans phpBB ?
[code]/* 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.postbody td.code {
  max-height: 20em !important;
  overflow: auto !important;
  }

Attention, c'est bien max-height et pas height, sinon on impose une hauteur fixe.

EDIT : modif du commentaire dans le code.

[ottomar]

vous en avez marre des fonds blancs des pages web ?

Code : Tout sélectionner

[bgcolor="#FFFFFF"] { background: #d70200 !important; }
[bgcolor="white"] { background: #d70200 !important; } 
[class] { background: #d70200 !important; }
[id] { background: #d70200 !important; }
[style] { background: #d70200 !important; }

[ottomar]

vous pouvez déterminer un modèle unique pour vos liens qui écrase le style des liens de la page (Karsten M. Self)

Code : Tout sélectionner

a:link {
    color: navy !important;    
    font-weight: bold !important;
    text-decoration: underline !important;  
}
a:visited{ 
    color: purple !important;
    font-weight: bold !important;
    text-decoration: none !important; 
}
a:link:hover, a:visited:hover{ 
    color: darkblue !important;
    /* fond de couleur quand vous passez sur un lien */
    background-color: rgb(255,255,144) !important;
    font-weight: bold !important; 
    text-decoration: underline !important; 
}

et pour les liens qui vous font aller sur un autre site (nofollow)

Code : Tout sélectionner

a[rel~="nofollow"] {  
border: 1px dashed #f00!important;  
background: #e3eaf3!important;  
}

[FF_Olivier]

vous en avez marre des fonds blancs des pages web ?

Code : Tout sélectionner

[bgcolor="#FFFFFF"] { background: #d70200 !important; }
[bgcolor="white"] { background: #d70200 !important; }
[class] { background: #d70200 !important; }
[id] { background: #d70200 !important; }
[style] { background: #d70200 !important; }

vous pouvez déterminer un modèle unique pour vos liens qui écrase le style des liens de la page (Karsten M. Self)

Code : Tout sélectionner

a:link {
    color: navy !important;    
    font-weight: bold !important;
    text-decoration: underline !important;  
}
a:visited{ 
    color: purple !important;
    font-weight: bold !important;
    text-decoration: none !important; 
}
a:link:hover, a:visited:hover{ 
    color: darkblue !important;
    /* fond de couleur quand vous passez sur un lien */
    background-color: rgb(255,255,144) !important;
    font-weight: bold !important; 
    text-decoration: underline !important; 
}

Cela ne revient-il pas à aller dans le sous-menu Polices & couleurs..., où on peut imposer ses choix de couleurs pour les liens et le fond justement ?

[ottomar]

je crois pas, ça impose ta config à tous les sites, alors que le menu n'impose que pour les sites qui n'ont pas spécifié de fond ou de couleurs particulières aux liens
euhh...c'est clair?