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
