userContent.css : trucs et astuces

[FF_Olivier]

Pour compléter ce que dit bormat, la notation h2 a signifie que l'on s'intéresse à l'élément a quand il est imbriqué dans l'élément h2. h2 pourrait contenir du texte directement, mais il se trouve qu'il ne contient que l'élément a (anchor) qui, lui, contient le texte et l'hyperlien.

Tu peux voir sur le tout premier msg de ce sujet un hyperlien pointant vers les sélecteurs CSS si tu souhaites t'informer plus amplement sur ceux-ci.

[patrick67]

Bonjour,

Quand on fait monter la page elle passe en dessous du menu, on la voie de travers et c'est pas trop esthétique.
Que faut-il mettre ou changer pour ne plus voir la page en dessous

Merci d'avance.

[FF_Olivier]

Quand on fait monter la page elle passe en dessous du menu, on la voie de travers et c'est pas trop esthétique.
Que faut-il mettre ou changer pour ne plus voir la page en dessous

Il faut supprimer la ligne de la propriété opacity.

[helenic]

Adopté !!
Juste un hic cependant.. les boutons "répondre" ne passent pas SOUS le bandeau mais SUR celui ci...semblerait qu'il soient défini par la class topic.action ( et même reply.icon) mais je trouve pas...

[FF_Olivier]

Juste un hic cependant.. les boutons "répondre" ne passent pas SOUS le bandeau mais SUR celui ci...semblerait qu'il soient défini par la class topic.action ( et même reply.icon) mais je trouve pas...

Ah oui, bien vu, bravo ! Bizarre, ce truc...
En fait, c'est défini dans #page-body > div.topic-actions > div.buttons, mais il n'y a pas besoin d'y toucher, il suffit d'ajouter un z-index: 1 !important; à h2 et ça semble corriger le pb chez moi (sans en créer d'autres...).

Voici le nouveau code (complet) :

Code : Tout sélectionner

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

/* 
    phpBB - Forum Geckozone

    version 0.2.0 - 2010/04/18
    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: 6em !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, #cde, #abc) !important;
    margin-top: 0px !important;
    border: 1px solid #abc !important;
    padding-top: 1em !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.25em !important;
    right: 0px !important;
    left: 0px !important;
  }
  #menu .node > * { color: #55a !important; }
  #menu .node dl {
    border: 1px solid #888 !important;
    -moz-border-radius: 0 0 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;
  }
  .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;
  }
  .pagination > span > a,
  .pagination > span > strong {
    -moz-border-radius: 5px !important;
  }

}

[helenic]

Bien vu j'étais en train de me faire des noeuds dans la tête à coup de Web Developper...
Bravo !

[patrick67]

Bonsoir FF_Olivier,

Il faut supprimer la ligne de la propriété opacity.

Je l'avais bloqué pour voir mais ça marchais pas,alors j'ai vu sur le sujet précédant qu'on pouvait changer"opacity: 0.90 !important;".
Je l'ai mis sur 2.00 maintenant c'est bon.

PS arlé trop vite sur la page "Mozilla : Le navigateur" ça marche pas par contre si j'ouvre un sujet ça marche étonnant non
Voici une copie :


Encore merci.

[bormat]

Bonsoir FF_Olivier,
]Il faut supprimer la ligne de la propriété opacity.

Je l'avais bloqué pour voir mais ça marchais pas,alors j'ai vu sur le sujet précédant qu'on pouvait changer"opacity: 0.90 !important;".
Je l'ai mis sur 2.00 maintenant c'est bon.

PS arlé trop vite sur la page "Mozilla : Le navigateur" ça marche pas par contre si j'ouvre un sujet ça marche étonnant non
Voici une copie :

normal opacity ça va de 0 .0 à 1.0
si tu met 2 ça l'annule

[patrick67]

Bonsoir,

normal opacity ça va de 0 .0 à 1.0
si tu met 2 ça l'annule

J'ai mis "1.0" pareil, ça marche pas non plus

[bormat]

il faut changer la couleur

/* 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: black/*remplacer black par la couleur*/ !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;
}

[patrick67]

Bonjour,

Pareil on voie de travers,mais seulement sur la page "Mozilla : Le navigateur"et"Mozilla Thunderbird : Le courrielleur".
je trouve ça vraiment bizarre.

[bormat]

Bonjour,

Pareil on voie de travers,mais seulement sur la page "Mozilla : Le navigateur"et"Mozilla Thunderbird : Le courrielleur".
je trouve ça vraiment bizarre.

ha pourtant moi j'ai un bandeau noir et on voit rien à travers
edit j'ai oublié en plus de changer le fond faut enlever opacity

[patrick67]

Bonjour bormat,

Toujours pareil,j'ai bloqué "opacity"on voie de travers.
En voici la preuve :

[FF_Olivier]

Toujours pareil,j'ai bloqué "opacity"on voie de travers.

Tu le fais par Stylish ou par userContent.css ? Dans le second cas, as-tu bien redémarré Firefox pour activer les modifs ?

Sinon, affiche-nous ici -- entre deux balises [code]...[/code] -- le code complet que tu utilises, pcq sans opacity ça devrait marcher...

[patrick67]

Bonjour FF_Olivier,

J'utilise le "userContant.css".
Voici le code :

Code : Tout sélectionner

@namespace url(http://www.w3.org/1999/xhtml);

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

    /* phpBB - Forum Geckozone */

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

      /* Ménager de l'espace pour les éléments fixes */
      #wrap {
        margin-top: 6em !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 a { 
	    color: #FFFFFF !important;
        text-shadow: 2px 2px #000000 !important;
        position: fixed !important;
        top: 0px !important;
        right: 0px !important;
        left: 0px !important;
        background: #000000 !important;
		/*background: -moz-linear-gradient(top, #fff, #cde, #1462FF) !important;*/
        /*background-color: #cde !important;*/	
	    margin-top: 0px !important;
        border: 1px solid #1462FF !important;
        padding-top: 1.4em !important;
        padding-right: 0.5em !important;
        /*opacity: 1.0 !important;*/
        -moz-box-shadow: 0px 3px 10px #888 !important;
        font-variant: small-caps !important;
        text-align: right !important;
		font-weight: bold !important;
      }

      /* Bloquer le menu en haut de la page */
      #menu  {
        font-weight: bold !important;
		position: fixed !important;
        top: 0.25em !important;
        right: 0px !important;
        left: 0px !important;
		
      }
      #menu .node > * { color: #55a !important; }
      #menu .node dl {
        border: 1px solid #888 !important;
        -moz-border-radius: 0 0 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 dela 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;
      }
      .pagination > span > a,
      .pagination > span > strong {
        /*background: -moz-radial-gradient(#fa0,#fff) !important;*/
        -moz-border-radius: 5px !important;
      }

    }

Merci d'avance.