userContent.css : trucs et astuces

FF_Olivier · Message par **FF_Olivier** » 21 avr. 2010, 18:49

patrick67 a écrit :re,
patrick67 a écrit :Pour faire pareil pour la fenêtre de "citation"(avec le dégradé de couleur en haut) que dois-je mettre comme code

Ceci devrait faire l'affaire :

Code : Tout sélectionner

  blockquote cite {
    background: -moz-linear-gradient(left,rgba(255,255,255,0.75),rgba(255,255,255,0.75)), 
                -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet) !important;
    margin-left: -0.1em !important;
    margin-bottom: 0.5em !important;
    border: 1px solid #ccc !important;
    padding-left: 0.5em !important;
    -moz-border-radius: 10px 10px 0 0 !important;
  }

FF_Olivier · Message par **FF_Olivier** » 21 avr. 2010, 19:01

Pour les fanatiques : THERE IS ONLY XUL

Code : Tout sélectionner

@-moz-document url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {

  window {
    background-color: -moz-field !important;
  }

  html {
    background: -moz-linear-gradient(top, #fc0, #960) !important;
    margin: 5em !important;
    border: 10px solid #fff !important;
    -moz-border-radius: 1em !important;
    -moz-box-shadow: 10px 10px 25px #999 !important;
    padding: 1em !important;
  }

  a {
    background: -moz-linear-gradient(top, #fc0, #960) !important;
    border: 2px solid #600 !important;
    -moz-border-radius: 0.25em !important;
    padding: 1px 3px !important;
    text-decoration: none !important;
  }
  a:hover {
    background: -moz-linear-gradient(top, #fd0, #970) !important;
  }

}

patrick67 · Message par **patrick67** » 22 avr. 2010, 13:49

Bonjour FF_Olivier,

FF_Olivier a écrit :: Pour les fanatiques : THERE IS ONLY XUL

Code: Tout sélectionner
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("http://www.mozilla.org/keymaster/gateke ... s.only.xul") {

window {
background-color: -moz-field !important;
}

html {
background: -moz-linear-gradient(top, #fc0, #960) !important;
margin: 5em !important;
border: 10px solid #fff !important;
-moz-border-radius: 1em !important;
-moz-box-shadow: 10px 10px 25px #999 !important;

Faut-il mettre se code en dessous ou le remplacer par tout le code du fichier "userContent.CSS"

Merci d'avance.

FF_Olivier · Message par **FF_Olivier** » 22 avr. 2010, 14:47

Bonjour,

patrick67 a écrit :Faut-il mettre se code en dessous ou le remplacer par tout le code du fichier "userContent.CSS"

Tu ajoutes ce code dans userContent.css à la suite du reste, mais sans la ligne @namespace url(...); qui n'est là que pour les utilisateurs de Stylish.

patrick67 · Message par **patrick67** » 22 avr. 2010, 15:02

re,

Ah...OK merci c'est fait,mais il n'y a rien qui a changé

FF_Olivier · Message par **FF_Olivier** » 28 avr. 2010, 13:56

Quatrième mouture de la transformation CSS du forum GZ, beaucoup de travail sur la page «Répondre» du site, sinon dégradés bleu/gris plus cohérents, arcs-en-ciel moins «flashy» (je m'étais un peu lâché, là...), ...

Code : Tout sélectionner

@-moz-document url-prefix("http://www.geckozone.org/forum/") {

/* 
    phpBB - Forum Geckozone

    version 0.4.0 2010/04/28
            + #postform
            + .copyright
            h2 ==> #page-body > h2
            + .codebox > dt {-moz-linear-gradient()}
    version 0.3.0 2010/04/21
            + blockquote
            + .codebox
            + .postprofile
            + .post
            + .pagination
            + #menu
            + #menu {z-index}
    version 0.2.0 2010/04/18
            + h2 a
            + h2 {z-index}
    version 0.1.0 2010/04/14
*/

  html,
  body {background-color: #def !important;}

  /* Ménager de l'espace pour les éléments fixes */
  #wrap {
    margin-top: 7em !important;
    margin-bottom: 2em !important;
  }

  /* Ne plus afficher les logos */
  #page-header { display: none !important;}

  /* Bloquer le titre de l'article en haut de la page */
  #page-body > h2 {
    position: fixed !important;
    top: 0px !important;
    right: 0px !important;
    left: 0px !important;
    background: -moz-linear-gradient(top, #fff, #abc) !important;
    margin-top: 0px !important;
    border: 1px solid #abc !important;
    padding-top: 1.3em !important;
    padding-right: 0.5em !important;
    /*opacity: 0.90 !important;*/
    -moz-box-shadow: 0px 3px 10px #888 !important;
    font-variant: small-caps !important;
    text-align: right !important;
    z-index: 1 !important;
  }
  #page-body > h2, #page-body > h2 a {
    color: #669 !important; 
    text-shadow: 1px 1px #def !important;
    font-weight: bold !important;
  }

  /* Bloquer le menu en haut de la page */
  #menu {
    position: fixed !important;
    top: 0.2em !important;
    right: 0px !important;
    left: 0px !important;
    z-index: 2 !important;
    background-image: none !important;
    background: -moz-linear-gradient(top, #fff, #9ab) !important;
    border: none !important;
    padding: 0.3em !important;
  }
  #menu > .node > * { 
    color: #55a !important;
    border: none !important;
  }
  /*#menu > .node > a,
  #menu > .node > span {font-weight: bold !important;}*/
  #menu > .node > span {
    background-image: none !important;
  }
  #menu > .node > span:hover {
    background-color: #fff !important;
  }
  #menu > .node > dl {
    background: none !important;
    background-color: rgba(170,190,210,0.9) !important; 
    border: 1px solid #888 !important;
    -moz-border-radius: 0 10px 10px 10px !important;
    -moz-box-shadow: 3px 3px 9px #888 !important;
    padding: 3px !important;
  }

  /* Changer l'apparence des barres de navigation */
  div.navbar,
  div.forabg,
  div.forumbg,
  #page-body {
    background: -moz-linear-gradient(top, #cde, #bcd, #abc) !important;
    margin-top:2em !important;
    border: 1px solid #abc !important;
    -moz-border-radius: 10px !important;
    -moz-box-shadow: 3px 3px 10px #888 !important;
  }
  .corners-top , .corners-bottom,
  .corners-top *, .corners-bottom * {background-image: none !important;}

  div.forabg,
  div.forumbg,
  #smiley-box {
    background: -moz-linear-gradient(top, #bcd, #abc, #9ab) !important;
  }

  /* Changer l'apparence de la zone «Recherche» */
  #search-box {
    background: -moz-linear-gradient(top, #fff, #cde, #abc) !important;
    margin: 3px 3px 6px 3px !important;
    border: 1px solid #bcd !important;
    -moz-border-radius: 5px !important;
    padding: 5px !important;
  }
  #search > fieldset > a { color: darkred !important; }
  #search > fieldset > a:hover { color: red !important; text-decoration: none !important;}
  #keywords,
  #add_keywords,
  #search_keywords {
    width: 20em !important;
    margin: -3px -5px 0px 3px !important;
    border: 1px solid #8af !important;
    -moz-border-radius: 5px 0px 0px 5px !important;
    /*padding: 3px 16px !important;*/
  }
  .button1,
  .button2 {
    background-image: none !important;
    background: -moz-linear-gradient(top, #fff, #cde, #abc) !important;
    margin: -3px 0 0 -5px !important;
    -moz-border-radius: 5px !important;
    font-weight: bold !important;
  }
  #topic-search .button2,
  #viewtopic .button2,
  #jumpbox .button2,
  #search .button2 {
    -moz-border-radius: 0px 5px 5px 0px !important;
  }
  #viewtopic .button2,
  #jumpbox .button2 {
    margin-bottom: -3px !important;
    padding: 2px !important;
  }
  .button1:hover,
  .button2:hover {
    background: -moz-linear-gradient(top, #abc, #cde, #fff) !important;
  }
 
  select {
    -moz-border-radius: 5px 0px 0px 5px !important;
    padding: 1px !important;
  }

  div.navbar a.fontsize {
    margin-top: 3px !important;
    border: 1px solid #abc !important;
    -moz-border-radius: 5px !important;
    padding: 1px !important;
  }

  /* Bloquer en haut à droite la première pagination */
  div.rightside.pagination > span,
  div.pagination:nth-of-type(3) > span {
    position: fixed !important;
    top: 0.5em !important;
    right: 0.5em !important;
    left: auto !important;
    z-index: 3 !important;
  }
  /* Modifier l'apparence de tous les blocs pagination */
  .pagination > span > a,
  .pagination > span > strong {
    /*background: -moz-radial-gradient(#fa0,#fff) !important;*/
    -moz-border-radius: 5px !important;
  }

  /* Afficher le descriptif du forum */
  /*#page-body > H2:first-child + DIV {display: block !important; }*/

  /* Arrondir fenêtres des messages */
  .post {-moz-border-radius: 10px !important;}

  /* Ne plus afficher les zones «Inscription», «Messages», «Localisation» du postprofile */
  .postprofile > dd:nth-of-type(2),
  .postprofile > dd:nth-of-type(3),
  .postprofile > dd:nth-of-type(4),
  .postprofile > dd:nth-of-type(5),
  .postprofile.online > dd:nth-of-type(2),
  .postprofile.online > dd:nth-of-type(3),
  .postprofile.online > dd:nth-of-type(4),
  .postprofile.online > dd:nth-of-type(5) { display: none !important; }

  /* Modifier fenêtres des citations dans les messages */
/*  blockquote:before {
    display: block !important;
    background: -moz-linear-gradient(left,rgba(255,255,255,0.75),rgba(255,255,255,0.75)), 
             -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet) !important;
    padding-left: 0.5em !important;
    -moz-border-radius: 10px 10px 0 0 !important;
    content: "CITATION :" !important;
    font-weight: bold !important;
  }*/
  blockquote {
    margin: 10px !important;
    -moz-border-radius: 10px !important;
    -moz-box-shadow: 3px 3px 5px #888 !important;
  }
  blockquote cite {
    background: -moz-linear-gradient(left,rgba(255,255,255,0.75),rgba(255,255,255,0.75)), 
                -moz-linear-gradient(left,blue,indigo,violet,white) !important;
    margin-left: -0.1em !important;
    margin-bottom: 0.5em !important;
    border: 1px solid #ccc !important;
    padding-left: 0.5em !important;
    -moz-border-radius: 10px 10px 0 0 !important;
  }

  /* Modifier fenêtres des codes dans les messages */
  .codebox {
    background: -moz-linear-gradient(bottom,#fff,rgba(250,250,250,0)) !important;
    margin: 10px !important;
    -moz-border-radius: 10px !important;
    -moz-box-shadow: 3px 3px 5px #888 !important;
  }
  .codebox > dt {
    background: -moz-linear-gradient(left,rgba(255,255,255,0.75),rgba(255,255,255,0.75)), 
                -moz-linear-gradient(left,red,orange,yellow,white) !important;
    padding-left: 0.5em !important;
    -moz-border-radius: 10px 10px 0 0 !important;
  }
  .codebox > dd > code { font-weight: bold !important; }

  #postform { padding: 0em !important; }
  #postform input {
    -moz-border-radius: 5px !important;
  }
/*  #postform div.panel,*/
  textarea {
    -moz-border-radius: 10px !important;
  }
  #postingbox, #postform div.panel.bg2 { background: none !important; }
  #smiley-box {
    border: 1px solid #888 !important;
    -moz-border-radius: 10px !important;
    padding: 0.25em !important;
    -moz-box-shadow: 3px 3px 10px #888 !important;
  }
  #format-buttons { margin-left: 1em !important }
  #format-buttons > select {
    margin: -4px 0 0 -5px !important;
  }
  #postform div.panel,
  #options-panel,
  #attach-panel,
  #topicreview {
    width: auto !important;
    margin: 0 2em 2em 2em !important;
  }
  #tabs, #review { margin: auto 2em !important; }
  #postform fieldset.submit-buttons {
    margin: -2em 215px auto auto !important;
    text-align: right !important;
  }
  #options-panel-tab a,
  #attach-panel-tab a {
    background: none !important;
    border: 1px solid #888 !important;
    border-bottom: none !important;
    -moz-border-radius: 10px 10px 0 0 !important;
  }
  #tabs a * {background: none !important;}
  #tabs a {margin: 0 0 -0px 0 !important; padding: 0 !important;}
  #tabs .activetab a {
    background: #cde !important;
    border: none !important;
  }
  #options-panel,
  #attach-panel {
    background: #cde !important;
    -moz-border-radius: 0px 10px 10px 10px !important;
    padding: 0.5em !important;
    -moz-box-shadow: 3px 3px 10px #888 !important;
  }

  div.copyright {
    margin: 1em !important;
    text-shadow: -1px -1px white !important;
  }

}

Comme toujours, à recopier dans userContent.css ou dans Stylish.

GZ-userContent-004.png

patrick67 · Message par **patrick67** » 28 avr. 2010, 18:17

Bonsoir FF_Olivier,
J'ai modifier quelques trucs, dans la fenêtre "citation" et "code" j'ai mis une autre police.
Voici une copie de la fenêtre "citation":

Et une de la fenêtre "code":

Pas mal non !

FF_Olivier · Message par **FF_Olivier** » 28 avr. 2010, 19:21

Bonsoir Patrick,

Oui, bravo, c'est bien !

Je toucherais aussi aux polices de caractères un jour, en implémentant les webfonts maintenant que FF les gère, mais ce n'est pas pour tout de suite.

FF_Olivier · Message par **FF_Olivier** » 13 mai 2010, 11:38

Google : cacher la colonne/le menu à gauche, qui apparemment agace beaucoup de monde

...

Code : Tout sélectionner

@-moz-document url-prefix("http://www.google.") {

  #leftnav { display: none !important }
  #center_col { margin: 0px !important }

}

FF_Olivier · Message par **FF_Olivier** » 13 mai 2010, 12:12

Des tutoriels sur le CSS :
http://css.alsacreations.com/ (fr)
http://www.openweb.eu.org/css/ (fr)

FF_Olivier · Message par **FF_Olivier** » 13 mai 2010, 12:14

Des liens utiles sur les sélecteurs :
http://www.w3.org/TR/css3-selectors/#selectors (en)
http://wiki.media-box.net/documentation/css (fr)

FF_Olivier · Message par **FF_Olivier** » 13 mai 2010, 12:17

Des liens sur les URL :
http://www.commentcamarche.net/internet/url.php3 (fr)

FF_Olivier · Message par **FF_Olivier** » 13 mai 2010, 12:20

Des extensions Firefox bien utiles :

Web Developer
DOM Inspector
Stylish et plein de styles pour nourrir la bête : http://userstyles.org
Firebug
View Source Chart

FF_Olivier · Message par **FF_Olivier** » 13 mai 2010, 12:30

La syntaxe de @-moz-document

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 http://www.geckozone.org ;
@-moz-document url(http://www.geckozone.org/forum/search.p ... d=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 http://www.geckozone.org.

Il est à noter que l'on peut très bien définir un ensemble de règles CSS s'appliquant à n'importe quelles combinaisons de domaines, ensembles de pages et pages précises, séparées par des virgules :

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

}

Bien noter les doubles accolades, une paire pour chaque élément défini, et une autre paire englobant le tout !

FF_Olivier · Message par **FF_Olivier** » 13 mai 2010, 12:38

Un conseil de bonne gestion des règles

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.

Geckozone

userContent.css : trucs et astuces

Re: userContent.css : trucs et astuces

THERE IS ONLY XUL

Re: userContent.css : trucs et astuces

Re: userContent.css : trucs et astuces

Re: userContent.css : trucs et astuces

CSS-FGZ v0.4.0

Re: userContent.css : trucs et astuces

Re: userContent.css : trucs et astuces

Google : cacher la colonne/le menu à gauche

Des tutoriels sur le CSS

Des liens utiles sur les sélecteurs

Des liens sur les URL

Des extensions Firefox bien utiles

La syntaxe de @-moz-document

Un conseil de bonne gestion des règles

Qui est en ligne ?