ADF PanelBox CSS customization

Requirement:Customize ADF panelbox css to have different open and closed panelbox icons and background color,border etc

In adf when we use panelbox with detault css it looks like below

<af:panelBox  text="Panel box Header 1" inlineStyle="width:400px;padding-left:20px;">

    

     <af:outputText value="Panel box content" ></af:outputText>

   </af:panelBox>

Customize the css as below and create customPanelbox style class as below

.customPanelBox af|panelBox::header-start:core:default {

    border-top: 1px solid #BFBFBF;

    border-left: 1px solid #BFBFBF;

    display: none;

    background-image: none !important;

    background-color: #ffffff !important;

    padding-left: 0px !important;

}

.customPanelBox af|panelBox::header-center:core:default {

    border: 1px solid #BFBFBF;

    border-bottom: none !important;

    background-image: none !important;

    background-color: #ffffff !important;

}

.customPanelBox af|panelBox::center:core:default {

    background-image: none;

    border: 1px solid #BFBFBF !important;

    background-color: #ffffff !important;

    padding-left: 0px !important;

    padding-left: 0px !important;

    padding-right: 0px !important;

    border-top: none !important;

    border-bottom: none !important;

    padding-left: 24px !important;;

    padding-bottom: 24px !important;;

    padding-right: 24px !important;;

}

.customPanelBox af|panelBox::footer-start:core:default {

    border-top: 1px solid #BFBFBF;

    border-left: 2px solid White;

    background-color: #ffffff !important;

    background-image: none !important;

    width: 0px !important;

    height: 0px !important;

}

.customPanelBox af|panelBox::footer-center:core:default {

    border-top: 1px solid #BFBFBF;

    background-color: #ffffff !important;

    background-image: none !important;

    width: 0px !important;

    height: 0px !important;

}

.customPanelBox af|panelBox::footer-end:core:default {

    border-top: 1px solid #BFBFBF;

    border-right: 0px solid White;

    background-color: #ffffff !important;

    background-image: none !important;

    width: 0px !important;

    height: 0px !important;

}

.customPanelBox af|panelBox::header-text {

    font-size: 22px !important;

    color: #000000 !important;

    font-weight: 300 !important;

    padding-left: 0px !important;;

}

.customPanelBox af|panelBox::header-end {

    background-image: none !important;;

    display: none;

    background-color: #ffffff !important;

}

.customPanelBox af|panelBox::disclosed-icon-style {

    background-image: url("../images/Darrow.png")!important;

    padding-left: 48px;

    padding-top: 24px;

    padding-bottom: 24px;

    background-repeat: no-repeat !important;

    background-position: center;

    background-color: #ffffff;

    align: right !important;

    background-size: 20px 11px !important;;

    width: 20px !important;

    height: 11px !important;

}

.customPanelBox af|panelBox::undisclosed-icon-style {

    background-image: url("../images/UpArrow.png")!important;

    padding-left: 48px;

    padding-top: 24px;

    padding-bottom: 24px;

    background-repeat: no-repeat !important;

    background-position: center;

    background-color: #ffffff;

    align: right !important;

}

.customPanelBox af|panelBox::header-element {

    font-size: 22px !important;

    color: #000000;

    font-weight: 300 !important;

}

The UI code will look like below

 

The New panel box for which customPanelBox style class is applied will look like below and the panelbox for which we have not applied any style class that will continue to look like default adf panelbox