How do I change the color of the <f: facet> heading?
Exactly how can I do this? Tried:
<f:facet id="form" name="header" class="customHeader">
<h:outputText value="HELLO!"/>
</f:facet>
and my CSS:
.customHeader th{
background-color: activeborder;
background-image: none;
}
I remembered adding a CSS file to the JSF page:
<link type="text/css" ref="stylesheet" href="./newcss.css"/>
But no result, I can't change the color of the title, I just don't see any changes. Any help?
Here is the generated HTML:
<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>
source to share
You can install headerClass
on : h:column
<h:column headerClass="customHeader">
<f:facet name="header">
HELLO!
</f:facet>
</h:column>
In this case, for specific columns will be generated <th class="customHeader">
.
So, you need to change your CSS selector. Or remove th
:
.customHeader {/**/}
or change it from child toelement.class
th.customHeader {/**/}
source to share
I think you should put your CSS class (class = "customHeader") one component above from the facet
Example:
<p:panel styleClass="customHeader">
<f:facet name="header">
....
</f:facet>
</p:panel>
or
<p:column styleClass="customHeader">
<f:facet name="header">
....
</f:facet>
</p:panel>
source to share
What browser / system are you running on?
activeborder
- the default color of the active border. Note, however, that named system colors are deprecated in CSS3 and therefore not standard. You cannot be sure that all operating systems support all specific system colors.
Try something like:
background-color: cyan;
or
background-color: #00FFFF;
source to share