Discussion :

[denisduval75]

Bonjour,

Dans un datatable du framework Primefaces, je souhaite modifier la couleur des entetes de colonne en vert.
Je souhaite aussi modifier la couleur du texte des lignes (texte que j'affiche en bleu), en blanc pour les lignes sélectionnées.
J'ai essayer de modifier en CSS la valeur de Color comme ceci :

Code :

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

1
2
3
4
5
6
7
8
.ui-datatable .ui-datatable-header {
    color: green;
}

.ui-datatable tr.ui-state-highlight {
    color: white;
}

Mais ça ne marche pas !
Merci pour votre aide.

[headmax]

Pour ta première propriété css ciblant .ui-datatable .ui-datatable-header est en arrière plan si le background des enfants sont utilisés son background ne se voit pas car .ui-datatable th.ui-state-default ses enfants on une propriété background-colorAlors que si on change la couleur de ses enfant tu obtiendra se que tu souhaite ou alors met le background des enfants en transparence ou directement la couleur green.

Code css :

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

1
2
3
4
 
.ui-datatable th.ui-state-default{
   color: green;
}

[denisduval75]

Merci headmax pour cette réponse rapide. Çà marche très bien pour les entêtes de colonnes.

Par contre je n'ai pas de solution pour les lignes sélectionnées.
Je voudrais que le texte de la ligne apparaisse en blanc lorsqu'elle est sélectionnée.
Comme je positionne le texte en bleu au départ, le code suivant ne marche pas et je ne vois pas comment faire :

Code :

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

1
2
3
4
.ui-datatable tr.ui-state-highlight {
    color: white;
}

Si tu as une idée...
Merci d'avance.

[headmax]

Salut pour ce que tu souhaite faire faudrait indiquer a ta classe .ui-datatable tr.ui-state-highlight une pseudo class :hover .ui-datatable tr.ui-state-highlight:hover si cela ne marche pas il faut alors toi même la déclarer comme ceci :
(la démo te montre comment customiser les lignes et le over avec un pointer pour faire "cholie" .

Code css :

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

1
2
3
4
5
6
7
8
 
/** pour la ligne en blanc */
tr.ui-widget-content:hover{
/*  background-color:white;*/
  cursor:pointer;
/** pour le texte en blanc */
color:white;
}

Ligne sélectionné en background blanc
Démo : https://codepen.io/headmax/pen/WMQpQg?editors=1100

Ligne sélectionné en texte blanc
Démo : https://codepen.io/headmax/pen/gvamZd?editors=1100

[denisduval75]

Salut. Ca marche super !
MERCIIIIIIIIIIIIII

[denisduval75]

Je reprends cette discussion car j'ai un autre soucis : les cellules de mon tableau sont affichées en gris par défaut, comme ceci :

Code :

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

1
2
3
4
tr.ui-widget-content {
  color: grey;
}

Maintenant je souhaite afficher en rouge les cellules de type taux, celles dont id="taux" ou bien class="taux" : je n'ai pas de préférence.

J'ai essayé beaucoup de chose sans succès.

Pouvez-vous m'indiquer une solution pour afficher les cellules du tableau soit en gris, soit en rouge ?

MERCI.