Panel Box Skinning in ADF

Panel Box is most usage components in ADF. In this post I want to show the complete skinning and how we can achieve the good look and feel.

I hope this post should useful for you requirement.

The below screenshot shows that how the panel box component looks without applying skinning.

The below screenshot shows that how the panel box component looks with applying skinning.

These are the selectors to achieve above look and feel.

af|panelBox::header-start:core:default {
    background-image: none;
    background-color: #e0eff9;
}

af|panelBox::header-end:core:default {
    background-image: none;
    background-color: #e0eff9;
}

af|panelBox::header-center:core:default {
    background-image: none;
    background-color: #e0eff9;
    padding: 10px;
}

af|panelBox::header-element {
    font-size: 13px;
    color: #565656;
}

af|panelBox::center:core:default {
    background-image: none;
    border: 1px solid #E1E1E8;
    background: #F9F9F9;
}


af|panelBox::footer-start:core:default {
    display: none;
}

af|panelBox::footer-center:core:default {
    display: none;
}

af|panelBox::footer-end:core:default {
    display: none;
}

af|panelBox::disclosed-icon-style {
    width: 22px;
    height: 22px;
    background-image: url("../images/open.gif");
    outline: none;
    cursor: pointer;
}

af|panelBox::disclosed-icon-style:hover {
    width: 22px;
    height: 22px;
    background: url("../images/open.gif")!important;
    outline: none;
}

af|panelBox::disclosed-icon-style:active {
    width: 22px;
    height: 22px;
    background: url("../images/open.gif")!important;
    outline: none;
}

af|panelBox::undisclosed-icon-style {
    width: 22px;
    height: 22px;
    background-image: url("../images/close.gif");
    outline: none;
    cursor: pointer;
}

af|panelBox::undisclosed-icon-style:hover {
    width: 22px;
    height: 22px;
    outline: none;
    background: url("../images/close.gif")!important;
}

af|panelBox::undisclosed-icon-style:active {
    width: 22px;
    height: 22px;
    outline: none;
    background: url("../images/close.gif")!important;
}

If you want sample apllication for reference download below link,

Download:PanelboxPoc

ADF Popup Skinning

If you want to skinning the ADF popup,First remove the defalut background look and feel.

The below are the global selectors for removing popup background

.AFPopupSelector {
    background-color: #fdfdfe; 
   box-shadow: none !important;

    -webkit-box-shadow: none !important; 

   -moz-box-shadow: none !important;
}
.AFPopupSelectorContentStart 
{  
  background-color: none;
}
.AFPopupSelectorContentEnd
 {   
 background-color: none;
}
.AFPopupSelectorHeaderEnd
 {  
  background-color: none;
}
.AFPopupSelectorHeaderStart 
{   
 background-color: none;
}
.AFPopupSelectorHeader
 {  
  background-color: none;

}