CSS Classes for JSF Components

, ,
1

Hello guys,

I started the development of a new CAF Portlet application and i also need to style it.

My concert is that i cannot find a resource to point me the classes for CSS.

For the Property Group component I have tryed to style it with the .section-group-bg class but with no success.

Could you please provide me a resource/information in how can I access the components and the css class references ?

Kind Regards,
Sil

2

I assume you know how to create and reference a css file in CAF, and set the “CSS Class” properties of ProeprtyGroup control to “section-group-bg”, and the css definition is something like:


.section-group-bg{
    background-color:#999999;
}

In run-time, PropertyGroup will be rendered as:


<fieldset id="jsfwmp7671:defaultForm:propertyGroup" class="caf-property-group section-group-bg">
    <div class="caf-property-group-inner-border">
        <div class="portlet-form-label">
            Title
            <span class="caf-label-separator">:</span>
        </div>
        <div class="caf-content">
            <div id="jsfwmp7671:defaultForm:blockPanel">Anything you set in PropertyGroup will be here</div>
        </div>
    </div>
</fieldset>

So even you set the class “section-group-bg” correctly, it won’t affect the sub-div, because there is already default style and you can’t modify it. You need the css definition below to change the priority.


.section-group-bg{
    background-color:#999999;
}
.caf-content div{
    background-color:#999999;
}
.caf-property-group-inner-border div {
    background-color:#999999;
}