Discussion :

[Blo0d4x3]

Bonjour,

Le CSS c'est pas mon fort, je voudrais depuis un template jinja afficher un <tr> avec une bgcolor differente suivant une variable, et je souhaiterais que le code de cette couleur soit définit dans une variable dans un script css, possible?

Mon bout de code Jinja pour comprendre un peu mieux mon besoin:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
{% if row[15] == 1 %} 
<tr data-id="{{ row[0] }}" bgcolor=color1> 
{% elif row[13] == 1 %} 
<tr data-id="{{ row[0] }}" bgcolor=color2>
{% else %}
<tr data-id="{{ row[0] }}" bgcolor="white">
{% endif %}

Et dans mon script css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
:root
{
  color1: #007bff;
  color2: #0044ef;
  color3: #007bff;
}

MErci !

[gabi7756]

Bonjour,
La première partie de la demande je suis pas sur d'avoir compris mais pour le reste

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
:root {
  --noir-01: #161616;
  --noir-02: #32373C;
  --gris-01: #7D7F83;
  --gris-02: #C4C5C7;
  --gris-03: #D9D9D9;
  --gris-04: #EAEAEA;
}

Et puis pour les utiliser tu fais :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

background-color: var(--gris-04);

Par exemple
Cdt

[Blo0d4x3]

mm ca n'a pas l'air de fonctionner, peut être car je dois assigner la couleur comme ceci dans ma <tr>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<tr data-id="{{ row[0] }}" bgcolor=var(--color2)>

[NoSmoking]

Bonjour,
on affecte les variables CSS en ligne via l'attribut style, bgcolor étant d'ailleurs obsolète !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<tr data-id="{{ row[0] }}" style="background-color:var(--color2);">

Tu peux également cibler tes éléments directement en CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
tr:nth-child(10) td:nth-child(4) {
  background-color: blue;
}

affectera un fond bleu à la 4éme cellule de la ligne 10.

[Blo0d4x3]

Je ne savais pas que bgcolor était obsolète, j'ai tout update avec background-color, c'est nikel tout fonctionne

Merci à vous