How to override style of single RichFaces component

Question

I need to override a single RichFaces component. I have a simpleTogglePanel below.

<rich:simpleTogglePanel headerClass="toggleheadder" switchType="client" label="Status">
    <f:facet name="closeMarker">
        <h:graphicImage value="${pageContext.request.contextPath}/img/closeMarker.png" style="cursor:pointer">
        </h:graphicImage>
    </f:facet>
    <f:facet name="openMarker">
        <h:graphicImage value="${pageContext.request.contextPath}/img/openMarker.png" style="cursor:pointer">
    </h:graphicImage>
    </f:facet>
</rich:simpleTogglePanel>

According to the Richfaces document, I can override an entire class's style using CSS like this http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/ArchitectureOverview.html#customstyles

.rich-stglpanel-body {
text-align:left;
padding-top:10px;
padding-bottom:10px;
vertical-align:top;
}

The only problem with this is that it changes every togglePanel's style on the page when I only need to change one. Does anyone know how to change this attribute for a single RichFaces element?

Answer 1

Based on simpleTogglePanel doc you can specify value for bodyClass and headerClass attributes. Simple create your style and use it as value for bodyClass attribute in your panel.