Geckozone

Forums d'assistance et de discussion sur les logiciels produits par Mozilla ou créés à partir des technologies Mozilla. Ce site ne dépend pas de la fondation Mozilla et est maintenu par un collectif de bénévoles.
https://forums.mozfr.org/

userContent.css : trucs et astuces

https://forums.mozfr.org/viewtopic.php?t=29039

Page 13 sur 17

Re: userContent.css : trucs et astuces

Publié : 20 mars 2010, 01:53
par renewal
Super, merci beaucoup et désolé du dérangement ! :)

Re: userContent.css : trucs et astuces

Publié : 09 avr. 2010, 18:50
par FF_Olivier
Allez zou, renouons un peu avec ce topic, et amusons-nous avec GZ/FF/CSS3 :
blocage du titre du topic et du menu GZ en haut de la page, ombres portées pour les sous-menus :

Code : Tout sélectionner

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

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

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

  /* phpBB - 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-color: #cde !important;
    margin-top: 0px !important;
    border: 2px solid #abc !important;
    padding-bottom: 1em !important;
    padding-right: 0.5em !important;
    opacity: 0.90 !important;
    -moz-box-shadow: 0px 3px 10px #bcd !important;
    font-variant: small-caps !important;
    text-align: right !important;
  }

  /* phpBB - Bloquer le menu GZ en haut de la page */
  #menu {
    position: fixed !important;
    top: 2.5em !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 #555 !important;
    padding: 3px !important;
  }
}
À coller dans userContent.css ou dans Stylish.
Ne marche qu'à partir du style phpBB «Geckozone» dans le panneau de l'utilisateur, et ne marche correctement que si on n'impose pas une taille minimale des caractères. Par contre, on peut zoomer autant qu'on veut, ça «tient».
GZ-userContent-001.png

Re: userContent.css : trucs et astuces

Publié : 14 avr. 2010, 19:44
par FF_Olivier
Toujours à titre d'exercice, poursuivons le relooking du forum de Geckozone.
Utilisation « massive », mais j'espère discrète et heureuse, des ombres, des gradients et des arrondis pour essayer de donner un aspect plus doux, plus graphique, à la page.

(ce code reprend le précédent)

Code : Tout sélectionner

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

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

/*
   phpBB - Forum Geckozone

   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;
    /*background-color: #cde !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;
  }

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

}
Toujours pareil, à coller dans userContent.css ou dans Stylish, et ne marche qu'à partir du style phpBB «Geckozone» dans le panneau de l'utilisateur.
GZ-userContent-002.png

Re: userContent.css : trucs et astuces

Publié : 15 avr. 2010, 11:08
par Asumbaa
C'est vraiment joli, j'adopte :)

Re: userContent.css : trucs et astuces

Publié : 15 avr. 2010, 12:00
par FF_Olivier
Asumbaa a écrit :C'est vraiment joli, j'adopte :)
:) Merci !
Quand j'aurai terminé avec les mises en forme (il reste des choses à peaufiner), j'attaquerai les déclinaisons de couleurs pour offrir plus de choix à l'utilisateur (il n'y a pas que le bleu dans la vie !).

Re: userContent.css : trucs et astuces

Publié : 15 avr. 2010, 18:16
par patrick67
Bonsoir FF_Olivier,
Je viens de voir ce sujet et je le trouve bien.J'ai mis ce code dans un fichier "userContent.css" et ça marche seulement la barre fixe en haut je la voudrais la mettre une couleur plus sombre pour la mettre plus en apparence, mais je trouve pas. :oops:
J'ai déjà essayé plusieurs fois mais ça marche pas. :cry: :cry:

Merci d'avance.

Re: userContent.css : trucs et astuces

Publié : 15 avr. 2010, 19:27
par FF_Olivier
Bonsoir Patrick,

Ça se passe dans cette partie-ci:

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;
    /*background-color: #cde !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;
  }
Et plus précisément sur ces lignes-ci:

Code : Tout sélectionner

    background: -moz-linear-gradient(top, #fff, #cde, #abc) !important;
    border: 1px solid #abc !important;
    opacity: 0.90 !important;
    -moz-box-shadow: 0px 3px 10px #888 !important;
Bref, ce sont les #rgb qui permettent de choisir les couleurs, et opacity permet de régler... l'opacité de l'élément (de 0 à 1).

Re: userContent.css : trucs et astuces

Publié : 16 avr. 2010, 10:57
par Asumbaa
Hier, je n'avais pas redémarré après ma modif du userContent, donc je ne découvre le résultat "en vrai" que ce matin :)
Et c'est vraiment très chouette, surtout les effets dégradé + ombre (par exemple sur le bloc haut) qui donne une illusion de déformation, la boîte ne paraît plus rectangulaire.

En revanche, j'ai remis le bandeau avec les logos que j'aime bien :wink:

Re: userContent.css : trucs et astuces

Publié : 16 avr. 2010, 15:23
par patrick67
Bonjour FF_Olivier,

Ok j'ai trouvé et je vous en remercie, seulement voilà j'ai mis une couleur trop sombre et maintenant on voie plus bien le texte du titre de l'article. :oops:
Faut-il mettre une ligne de code pour changer la couleur de la police(et la quel) ou est-ce dans une autre rubrique :?:

Merci d'avance.

Re: userContent.css : trucs et astuces

Publié : 16 avr. 2010, 17:34
par FF_Olivier
patrick67 a écrit :Ok j'ai trouvé et je vous en remercie, seulement voilà j'ai mis une couleur trop sombre et maintenant on voie plus bien le texte du titre de l'article. :oops:
Faut-il mettre une ligne de code pour changer la couleur de la police(et la quel) ou est-ce dans une autre rubrique :?:
En effet, dans ce cas il faudrait ajouter une simple propriété color sous la propriété background, avec une couleur qui convienne :

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;
        /* Ajouter ci-dessous une propriété color pour la couleur du titre */
        color: #rgb !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;
      }

Re: userContent.css : trucs et astuces

Publié : 16 avr. 2010, 17:41
par FF_Olivier
Asumbaa a écrit :Hier, je n'avais pas redémarré après ma modif du userContent, donc je ne découvre le résultat "en vrai" que ce matin :)
Et c'est vraiment très chouette, surtout les effets dégradé + ombre (par exemple sur le bloc haut) qui donne une illusion de déformation, la boîte ne paraît plus rectangulaire.
C'est vrai qu'elle a l'air trapézoïdale, c'est bizarre :? ...
En revanche, j'ai remis le bandeau avec les logos que j'aime bien :wink:
Oui, ils sont bien en effet, mais un peu envahissants sur mon (relativement) petit écran, c'est pour ça que je les avais "zappés", j'espère que personne ne s'en est formalisé.

Re: userContent.css : trucs et astuces

Publié : 17 avr. 2010, 11:56
par patrick67
Bonjour FF_Olivier,

J'ai mis ce code avec une couleur blanc,mais ça marche pas. :oops: :oops:
J'ai copier le code et je l'ai mis dans le fichier et changé la couleur et c'est tout.

Merci d'avance.

Re: userContent.css : trucs et astuces

Publié : 17 avr. 2010, 12:14
par FF_Olivier
Bonjour Patrick,

Désolé, ma faute, il faut en fait ajouter la propriété color à un autre élément inclus dans h2, pas à h2 lui-même :

Code : Tout sélectionner

h2 {blablabla}
h2 a { color: #rgb !important; }
Comme ça, ça devrait marcher !

Tu peux même en profiter pour ajouter une ombre au texte, il se détachera mieux si les couleurs sont bien choisies :

Code : Tout sélectionner

h2 a {
  color: #rgb !important;
  text-shadow: 1px 1px #rgb !important;
}

Re: userContent.css : trucs et astuces

Publié : 17 avr. 2010, 13:14
par patrick67
Bonjour FF_Olivier,

Ok maintenant ça marche j'ai cherché un bout de temps.J'avais pas compris avec les "accolades" et le "a".J'ai remarqué quelque chose en enlevant le "a" j'ai plus la couleur blanc que j'ai mis seulement le dégradé.
Voici une copie d'écran sans le "a" :
Image
Et voici une copie d'écran avec le "a" :
Image
Pourquoi ça :?:

Re: userContent.css : trucs et astuces

Publié : 17 avr. 2010, 15:24
par bormat
le a c'est le texte
si tu regarde le code html du texte tu verra qu'il est dans <a></a>
Fuseau horaire sur UTC+02:00
Page 13 sur 17

Développé par phpBB® Forum Software © phpBB Limited

Traduction française officielle © Qiaeru