Comment changer la couleur de <f:facet> en-tête?

Exactement, comment puis-je faire cela? Essayé:

<f:facet id="form" name="header" class="customHeader">
   <h:outputText value="HELLO!"/>
</f:facet>

et mon CSS:

.customHeader th{
    background-color:  activeborder;
    background-image: none;
}

Je remebered pour inclure un fichier CSS dans la page JSF:

<link type="text/css" ref="stylesheet" href="./newcss.css"/>

Mais aucun résultat, je ne peux pas modifier l'en-tête de couleur, simplement, je ne vois aucun changement. Toute aide?

Voici le code HTML généré:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="j_idt2">
        <title>Facelet Title</title>
        <link type="text/css" 
              ref="stylesheet" 
              href="./newcss.css" />
    </head
    ><body>
        <form id="j_idt5" 
              name="j_idt5" 
              method="post" 
              action="/HTableJSF/faces/newjsf.xhtml" 
              enctype="application/x-www-form-urlencoded">
            <input type="hidden" name="j_idt5" value="j_idt5" />
            <table style="background-color: black">
                <thead>
                    <tr>
                        <th colspan="1" scope="colgroup">HELLO!</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <span class="row1">HELLO</span>
                        </td>
                    </tr>
                </tbody>
            </table>
            <input type="hidden" 
                   name="javax.faces.ViewState" 
                   id="j_id1:javax.faces.ViewState:0" 
                   value="-3603525257247985306:-5087066467544098625" 
                   autocomplete="off" />
        </form>
    </body>
</html>

Vérifier la structure HTML de la réponse. Vérifiez que la feuille de style est vraiment inclus (body{background-color:red;}).

OriginalL'auteur Brian Brown | 2014-10-08

2

Vous pouvez définir headerClass sur h:column :
```
<h:column headerClass="customHeader">
    <f:facet name="header">
        HELLO!
    </f:facet>
</h:column>
```
Dans ce cas pour des colonnes spécifiques <th class="customHeader"> sera généré.

Donc, vous avez besoin de changer le sélecteur css. Supprimer th:

.customHeader {/**/}

ou le modifier à partir d' descendant à element.class

th.customHeader {/**/}

Merci beaucoup, j'ai été à la recherche pour un long moment.

OriginalL'auteur n1k1ch
1

Je pense que vous avez de mettre votre classe CSS (class="customHeader") l'une des composantes ci-dessus à partir de la facette

ex:
```
<p:panel styleClass="customHeader">
  <f:facet name="header">
    ....
  </f:facet>
</p:panel>
```
ou
```
<p:column styleClass="customHeader">
  <f:facet name="header">
    ....
  </f:facet>
</p:panel>
```
Cela n'a pas fonctionné 🙁
Pouvez-vous nous envoyer votre morceau de code HTML ?
bien sûr, édité ma question

OriginalL'auteur Lucas Campos
0

Dans ce navigateur/système travaillez-vous?

activeborder est la couleur de l'actif par défaut de la frontière. Mais considérez le nom de Système de Couleurs sont déconseillés dans CSS3, n'est donc pas la norme. Vous ne pouvez pas être sûr si tous les systèmes d'exploitation définis système de couleurs.

Essayez quelque chose comme:
```
background-color: cyan;
```
ou
```
background-color: #00FFFF;
```
Essayé avec FF et Chormium. Changé de cyan, sans résultat

OriginalL'auteur JosEduSol

Vous devez vous connecter pour publier un commentaire.