userContent.css : trucs et astuces

[FF_Olivier]

Facile, tu as modifié le "bloc" h2 {...} en h2 a {...}, ce qui est faux. Tu devais ajouter un nouveau "bloc" h2 a {...} en dessous du "bloc" h2 {...}.
Je te conseille de repartir du dernier code complet que j'ai posté.

[patrick67]

re,

Toujours pareil
Voici la partie du code pour voir si c'est juste :

Code : Tout sélectionner

 h2  { 
	  }
	  h2 a {  
		color: #FFFFFF !important;
        text-shadow: 2px 2px #000000 !important;
        position: fixed !important;

Merci d'avance

[FF_Olivier]

Voici la partie du code pour voir si c'est juste :

Non, ce n'est pas juste, tu ne dois pas vider h2 {...} de son contenu !

Code : Tout sélectionner

  /* Bloquer le titre de l'article en haut de la page */
  h2 {
    position: fixed !important;
    top: 0px !important;
    right: 0px !important;
    left: 0px !important;
    background: -moz-linear-gradient(top, #fff, #cde, #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;
  }
  h2 a {
    color: #339 !important; 
    text-shadow: 1px 1px #888 !important;
  }

[bormat]

chez moi ça marche pourtant

Code : Tout sélectionner

h2 {
    position: fixed !important;
    top: 0px !important;
    right: 0px !important;
    left: 0px !important;
    background:black !important;
    margin-top: 0px !important;
    border: 1px solid #abc !important;
    padding-top: 1em !important;
    padding-right: 0.5em !important;
    -moz-box-shadow: 0px 3px 10px #888 !important;
    font-variant: small-caps !important;
    text-align: right !important;
    z-index: 1 !important;
  }

[Fabrice.Tres.Net]

Es-tu sur d'écrire dans le fichier userContent.css (et non Contant) comme tu l'as écrit plus tôt?

[FF_Olivier]

Allez, hop, on continue à bidouiller le forum GZ !
Beaucoup de petites choses dans cette troisième mouture : amélioration du menu, pagination bloquée en haut à droite, rectangles arrondis à peu près partout, des transparences, des dégradés, les citations, les codes, ...

Code : Tout sélectionner

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

/* 
    phpBB - Forum Geckozone

    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 */
  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;
  }
  h2 a {
    color: #339 !important; 
    text-shadow: 1px 1px #888 !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 > 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,
  #page-body {
    background: -moz-linear-gradient(top, #fff, #cde, #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;}

  /* 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;*/
  }
  .button2 {
    background-image: none !important;
    background: -moz-linear-gradient(top, #fff, #cde, #abc) !important;
    margin: -3px 0 0 -5px !important;
    -moz-border-radius: 0px 5px 5px 0px !important;
    font-weight: bold !important;
  }
  .button2:hover {
    background: -moz-linear-gradient(top, #abc, #cde, #fff) !important;
  }
  select {
    -moz-border-radius: 5px 0px 0px 5px !important;
    padding: 1px !important;
  }
  #viewtopic .button2,
  #jumpbox .button2 {
    margin-bottom: -3px !important;
    padding: 2px !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[class="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 */
  [class="postprofile"] > dd:nth-of-type(2),
  [class="postprofile"] > dd:nth-of-type(3),
  [class="postprofile"] > dd:nth-of-type(4),
  [class="postprofile"] > dd:nth-of-type(5),
  [class="postprofile online"] > dd:nth-of-type(2),
  [class="postprofile online"] > dd:nth-of-type(3),
  [class="postprofile online"] > dd:nth-of-type(4),
  [class="postprofile online"] > dd:nth-of-type(5) { display: none !important; }

  /* Modifier fenêtres des citations dans les messages */
  blockquote {
    margin: 10px !important;
    -moz-border-radius: 10px !important;
    -moz-box-shadow: 3px 3px 5px #888 !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,red,orange,yellow,green,blue,indigo,violet) !important;
    padding-left: 0.5em !important;
    -moz-border-radius: 10px 10px 0 0 !important;
  }
  .codebox > dd > code { font-weight: bold !important; }

}

GZ-userContent-003.png

[patrick67]

Bonjour FF_Olivier,

De retour..... j'étais occupé ailleurs
J'ai mis le code comme vous me l'avez indiqué plus haut,mais ça marche toujours pas c'est seulement sur les pages "Mozilla : Le navigateur"et"Mozilla Thunderbird : Le courrielleur" ect.... que ça ne marche pas.

merci d'avance.

[patrick67]

Bonjour FF_Olivier,
En mettant la dernière version du code ça marche.
C'est vraiment formidable de ceux qu'on peut faire avec le CSS.Peut-on utiliser ce code pour un autre forum je pense qu'il faut modifier quelques trucs.

[FF_Olivier]

Super, Patrick, je suis content pour toi, je commençais à m'inquiéter !
Je ne pense pas que tu pourras réutiliser le code tel quel pour un autre forum, tu peux essayer bien sûr, mais je ne crois pas que tu auras des résultats probants, c'est trop spécifiques à GZ...
Il vaut mieux repartir de zéro et réécrire le CSS qui conviendra pour le forum en question.

[FF_Olivier]

Changer l'apparence de la page d'erreur de Firefox (connexion échouée, adresse introuvable, ...) :

Code : Tout sélectionner

html > body > div#errorPageContainer {
  background: url("chrome://global/skin/icons/sslWarning.png") 30px 40px no-repeat,
              -moz-linear-gradient(top left, #f60, rgba(250,250,250,0.5)) !important;
  border: 10px solid #fff !important;
  -moz-box-shadow: 5px 5px 25px #888 !important;
}

Ça donne ceci :

GZ-errorPage-01.png

[patrick67]

re,

Super, Patrick, je suis content pour toi, je commençais à m'inquiéter !

Oui je suis content aussi seulement j'ai remarqué dans le menu en haut de la page"Portail,Extensions,Rubriques et Le site" ne sont pas en gras.

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

Merci d'avance.

[Asumbaa]

Une petite capture de la dernière mouture ?

[FF_Olivier]

j'ai remarqué dans le menu en haut de la page"Portail,Extensions,Rubriques et Le site" ne sont pas en gras.

Oui, en effet, je n'ai pas touché à cela, c'est identique à ce qu'il y a sur GZ par défaut.

Si tu veux tout en gras, tu peux ajouter les 2 lignes suivantes :

Code : Tout sélectionner

#menu > .node > a,
#menu > .node > span { font-weight: bold !important; }

[FF_Olivier]

Une petite capture de la dernière mouture ?

Oui, voilà, ajouté au msg d'annonce : http://www.geckozone.org/forum/download/file.php?id=522

[patrick67]

re,

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