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

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;
}