userContent.css : trucs et astuces

[renewal]

Super, merci beaucoup et désolé du dérangement !

[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

[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

[Asumbaa]

C'est vraiment joli, j'adopte

[FF_Olivier]

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 !).

[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.
J'ai déjà essayé plusieurs fois mais ça marche pas.

Merci d'avance.

[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).

[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

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

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

[FF_Olivier]

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

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

[patrick67]

Bonjour FF_Olivier,

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

Merci d'avance.

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

[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" :

Et voici une copie d'écran avec le "a" :

Pourquoi ça

[bormat]

le a c'est le texte
si tu regarde le code html du texte tu verra qu'il est dans <a></a>