ADF: Customizing the Appearance of Button using Skin

ADF: Customizing the Appearance of Button using Skin

ADF framework provide component specific skin selector to customize look & feel of component. For Button  af|commandButton skin selector is used. This post is about how to customize ADF button.

 af:commandButton have five state

1.normal

af|commandButtonhover

2.hover : when mouse over button.

af|commandButton:hover

3.focus: when the button on focus

af|commandButton:hover

4.disabled : when button  disabled

af|commandButton:disabled

5.active : when button pressed

af|commandButton:active

 

1.Round Corner

<af:commandButton text="Round Button" id="cb1" styleClass="stylesbuttonhdr"/>
af|commandButton.stylesbuttonhdr
{
color:  #df0b0a;
font-weight:bold;
background-image:none!important;
background-color:#f6ec6b!important;
border-radius: 10px;
}

af|commandButton.stylesbuttonhdr:hover
{
color: #df0b0a;
font-weight:bold;
background-image:none!important;
background-color:#f6ec6b!important;
border-radius: 10px;
}

af|commandButton.stylesbuttonhdr:focus
{
color: #df0b0a;
font-weight:bold;
background-image:none!important;
background-color:#f6ec6b!important;
border-radius: 10px;
}

af|commandButton.stylesbuttonhdr:disabled
{
color: #df0b0a!important;
font-weight:bold!important;
background-image:none!important;
background-color:#f6ec6b!important;
border-radius: 10px;
}

af|commandButton.stylesbuttonhdr:active
{
color:#df0b0a!important;
font-weight:bold!important;
background-image:none!important;
background-color:#f6ec6b!important;
border-radius: 10px;
}

2.Change color on hover

<af:commandButton text="Red Button" id="cb2" styleClass="stylesbutton"/>
af|commandButton.stylesbutton {
color: white;
font-weight: bold;
background-image: none !important;
background-color: #df0b0a !important;
}

af|commandButton.stylesbutton:hover {
color: yellow;
font-weight: bold;
background-image: none;
background-color: #df0b0a;
}

af|commandButton.stylesbutton:focus {
color: white;
font-weight: bold;
background-image: none;
background-color: #df0b0a;
}

af|commandButton.stylesbutton:active {
color: white !important;
font-weight: bold !important;
background-image: none;
background-color: #df0b0a;
}


af|commandButton.stylesbutton:disabled {
color: white;
font-weight: bold;
background-image: none !important;
background-color: #df0b0a !important;
}

3.

<af:commandButton text="Add Review" id="cb3" styleClass="reviewbutton"/>
af|commandButton.reviewbutton {
background: #fff;
border: 1px solid #ddd;
padding: 8px 16px;
color: #737373;
border-radius: 4px;
font-weight: bold;
background-image: none !important;

}

af|commandButton.reviewbutton:hover {
background: #fff;
border: 1px solid #ddd;
padding: 8px 16px;
color: #333;
border-radius: 4px;
font-weight: bold;
background-image: none !important;
box-shadow: 0px 1px 0pxrgba(0, 0, 0, .4)
}

af|commandButton.reviewbutton:focus {
background: #fff;
border: 1px solid #ddd;
padding: 8px 16px;
color: #737373;
border-radius: 4px;
font-weight: bold;
background-image: none !important;
}

af|commandButton.reviewbutton:focus:hover {
background: #fff;
border: 1px solid #ddd;
padding: 8px 16px;
color: #737373;
border-radius: 4px;
font-weight: bold;
background-image: none !important;
}

af|commandButton.reviewbutton:active {
background: #fff;
border: 1px solid #ddd;
padding: 8px 16px;
color: #737373;
border-radius: 4px;
font-weight: bold;
background-image: none !important;
}

af|commandButton.reviewbutton:disabled {
background: #fff;
border: 1px solid #ddd;
padding: 8px 16px;
color: #737373;
border-radius: 4px;
font-weight: bold;
background-image: none !important;
}

About Manish Pandey

Manish is a Project Leader at Jagran Prakashan Ltd, focused on Jdeveloper Fusion Web Application(specifically Oracle ADF). He shares his knowledge through the OTN Jdev/ADF Forum. He has written more than 50 article about Oracle ADF and Jdeveloper.

Leave a Reply