2 résultats trouvés pour FF0000

Voici un petit libre service / tuto expliquant comment changer le style des messages de connexion et déconnexion sur la chatbox. Je fournis directement le code CSS, puis les explications suivent pour les intéressés

Code en libre service

CSS
PA > Affichage > Couleurs > Feuille de style CSS

Code:

/* Message de connexion CB */
.msg span[style*="green"] strong {
    color: #2980b9; /* couleur */
    font-variant: small-caps; /* petites majuscules */
}

/* Message de déconnexion CB */
.msg span[style*="red"] strong {
    color: #8e44ad; /* couleur */
    font-variant: small-caps; /* petites majuscules */
}


Explications

Je vous invite à lire ces 2 tutoriels de Manumanu pour en savoir plus sur les sélecteurs CSS que nous allons utiliser : Principe du CSS : Les sélecteurs (Partie 1 : CSS2) et Principes du CSS - Les sélecteurs (Partie 2 : CSS3).

Prérequis

Je n'ai pas l'intention de faire un doublon du tuto sur les sélecteurs, donc si vous êtes intéressés, prenez le temps de le lire. (◕‿◕✿)

Voici les sélecteurs que l'on va utiliser (ils sont dans les tutoriels de Manumanu, pour vous rafraichir la mémoire, je vous met un exemple pour chaque) :

• Sélectionner une balise.
  

  Code:

  strong { }

  
  
  
• Sélectionner une classe.
  

  Code:

  .msg { }

  
  
  
• Sélecteur de descendance.
  

  Code:

  .msg span { }

  
  
  
• Sélecteur d'attribut :
  

  Code:

  a[href="#top"]

  
  
  

Le HTML

Voilà à quoi ressemble la structure HTML d'un message de connexion sur la chatbox (il y a juste la classe chatbox_row_1 qui change une ligne sur 2 pour être chatbox_row_2) :

Code:

<p class="chatbox_row_1 clearfix">
    <span title="27 Déc 2014" class="date-and-time">[17:52:55]</span> 
    <span class="msg">
        <span style="color:green"><strong>Truc a rejoint le chat le Sam 27 Déc 2014 - 17:52</strong></span>
    </span>
</p>

Pour comparer:

La partie qui nous intéresse étant celle ci :

Code:

<span class="msg">
    <span style="color:green"><strong>Truc a rejoint le chat le Sam 27 Déc 2014 - 17:11</strong></span>
</span>

1. Les messages sont dans une span avec la classe "msg".
   
   
2. Ensuite pour les messages de connexion il y a une span avec du CSS directement appliqué : style="color:green" pour un message de connexion et style="color:red" pour un message de déconnexion.
   
   
3. Et enfin, le texte est dans une balise strong qui permet de mettre en gras. C'est celle ci que nous allons tenter de cibler
   

Le CSS

Il nous suffit de reprendre ce qu'il y a au dessus :

1. Sélectionner une span avec la classe "msg" :
   

   Code:

   .msg

   
   
   
2. Ensuite, on va sélectionner à l'intérieur de la classe "msg" une balise span :
   

   Code:

   .msg span

   
   
   Cette span a du CSS directement appliqué, avec l'attribut style (style="color:green")
   Pour sélectionner une span avec l'attribut style :
   

   Code:

   span[style]

   
   
   Pour sélectionner une span avec l'attribut style qui a une valeur (eh oui, on veut pouvoir sélectionner seulement les couleurs de connexions et de déconnexions !)
   Ici notre HTML est :
   

   <span style="color:green"><strong>Truc a rejoint le chat le Sam 27 Déc 2014 - 17:11</strong></span>

   
   Le sélecteur CSS est donc :
   

   Code:

   span[style="color:green"]

   
   
   
3. Et enfin... On veut sélectionner la balise strong à l'intérieur, ce qui donne donc :
   

   Code:

   .msg span[style="color:green"] strong {
   /* personnaliser ici */
}

   
   
   

Ensuite pour le message de déconnexion c'est exactement la même chose, il suffit de changer "green" en "red".

Bonjour!

Ah, les codes hexadécimaux! Ces bé-bêtes donnent du fil à retordre à bien des codeurs, expérimentés comme débutants, et nombreux sont ceux qui doivent se fier à des générateurs de code pour produire la couleur idéale, souvent par essais et erreurs. Eh bien, l'astuce que je vous sers aujourd'hui ne remplacera certes pas lesdits générateurs, mais peu à peu, vous serez probablement capable de les utiliser moins souvent, voire pas du tout dépendant des situations. :)

Pour ceux qui ne le savent pas, il y a quatre façon de générer des codes de couleur sur le web.

white, black, blue, etc. → ce sont les noms des couleurs en anglais.
rgb(XXX,XXX,XXX) → ce sont les quantités de rouge, vert et bleu dans la couleur, représentées par une valeur allant de 0 à 255.
rgba(XXX,XXX,XXX,0.X) → même principe que le rgb, mais avec la transparence en nombre décimal entre 0 et 1.
#XXXXXX → codes hexadécimaux.

Les codes hexadécimaux sont nommés ainsi car ils comportent, vous l'aurez deviné, 6 chiffres ou lettres. Les deux premiers chiffres donnent la quantité de rouge, les seconds de vert et les derniers de bleu, comme ceci:

#XXXXXX

En effet, les couleurs primaires sur le web ne sont pas les mêmes que celles des arts plastiques (magenta, cyan et jaune). Les codes hexadécimaux vont de 00 à FF de la manière suivante:

00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 2A, 2B, 2C, 2D, 2E, 2F, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 3A, 3B, 3C, 3D, 3E, 3F, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 4A, 4B, 4C, 4D, 4E, 4F, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 5A, 5B, 5C, 5D, 5E, 5F, etc.

00, c'est le noir, c'est l'absence absolue de la couleur. FF, c'est la saturation maximale. Ainsi:

#000000 = noir
#FF0000 = rouge
#00FF00 = vert
#0000FF = bleu
#FFFF00 = jaune
#00FFFF = cyan
#FF00FF = rose
#FFFFFF = blanc

Lorsque les codes de rouge, vert et bleu sont les mêmes, la saturation de la couleur est nulle; ces codes correspondent aux différentes nuances de gris.

#000000 = noir #111111 = gris 1 #222222 = gris 2 #333333 = gris 3 #444444 = gris 4 #555555 = gris 5 #666666 = gris 6 #777777 = gris 7 #888888 = gris 8 #999999 = gris 9 #AAAAAA = gris 10 #BBBBBB = gris 11 #CCCCCC = gris 12 #DDDDDD = gris 13 #EEEEEE = gris 14 #FFFFFF = blanc

#000000 = noir #101010 = gris A #202020 = gris B #303030 = gris C #404040 = gris D #505050 = gris E #606060 = gris F #707070 = gris G #808080 = gris H #909090 = gris I #A0A0A0 = gris J #B0B0B0 = gris K #C0C0C0 = gris L #D0D0D0 = gris M #E0E0E0 = gris N #F0F0F0 = gris O

#0F0F0F = gris AA #1F1F1F = gris BB #2F2F2F = gris CC #3F3F3F = gris DD #4F4F4F = gris EE #5F5F5F = gris FF #6F6F6F = gris GG #7F7F7F = gris HH #8F8F8F = gris II #9F9F9F = gris JJ #AFAFAF = gris KK #BFBFBF = gris LL #CFCFCF = gris MM #DFDFDF = gris NN #EFEFEF = gris OO #FFFFFF = blanc

Lorsque tous les chiffres d'un code sont les mêmes, il est possible de n'en mettre que les trois premiers (note: ça ne fonctionne pas en BBCode). Les majuscules sont facultatives:

#FFF, #EEE, #DDD, #CCC, #BBB, #AAA, #999, #888, #777, #666, #555, #444, #333, #222, #111, #000,
#fff, #eee, #ddd, #ccc, #bbb, #aaa
#ff0000, #00ff00, #0000ff, #ffff00, #00ffff, #ff00ff, #ffffff

Voyons donc comment ces belles informations peuvent vous être utiles! :) Supposons que nous partons d'un rouge:

Lorem ipsum
(#FF0000)

Finalement, ce rouge est trop vif et trop pâle. Nous voudrions le rendre plus foncé.

Lorem ipsum
(#CC0000)

Et puis, il est encore trop vif, nous allons ajouter du vert et du bleu pour en baisser la saturation.

Lorem ipsum
(#CC3333)

Comme nous avons ajouté de la couleur, elle est à nouveau trop pâle.

Lorem ipsum
(#BB2222)

Et puis, ça serait bien que ça tire un peu sur le bourgogne, nous allons donc ajouter du bleu.

Lorem ipsum
(#BB2244)

Et on aimerait que ça soit encore un peu plus foncé.

Lorem ipsum
(#AA1133)

Et voilà! Bon, certes si vous êtes daltonien, il se peut que vous ne voyez pas ou peu la différence des nuances entre ces différentes étapes, mais sinon vous devriez le voir. :)

En espérant que ça serve! ^^