Tag: header

Requirement – To change the background color of panelBox header in ADF.

Solution- Intial it looks very easy.But its not.You cant change the background color of panelbox because, As the panel box is build using images (because of the rounded border) you have to use a set of images to change the color.

try below code in your skin file and you can skin your panelBox. You have to set the background as none.

af|panelBox::header-center {
background-color:#1F3B88;
color: #1F3B88;
}

af|panelBox::header-text {
color:White;
}

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

af|panelBox::header-center:core:default {
    background-image: none;
    background: #1F3B88 ;
    background-color: #1F3B88;
}

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

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

af|panelBox::footer-start:core:default {
    background-image: none;
    display: none;
    background: #1F3B88;
    background-color: #1F3B88;
}

af|panelBox::footer-end:core:default {
    background-image: none;
    display: none;
    background: #1F3B88;
    background-color: #1F3B88;
}

af|panelBox::center:core:default {
    background-image: none;
    border-left: none;
    background: #1F3B88;
    background-color: #1F3B88;
}

 

You will be able to skin panelbox like below diagram

That’s it. Happy skining with Vinay in techartifact.