Customize af:button (font, shape, size, color etc)

Hello all
this post is about styling to customize af:button component in ADF 12.1.3
how can we customize a button, change its color, background color, shape, size, font and many more
In 12.1.3 JDeveloper, some features are supported like the width of a button directly from inline style property (this was not supported in 11g)

you can see new features for client-side CSS- http://www.oracle.com/technetwork/developer-tools/jdev/documentation/1213nf-2222743.html

So let’s start
I hope everyone knows how to create CSS (skin) file in JDeveloper if don’t then follow this

Right click on viewController project → New from Gallery → Categories → Web Tier → JSF/Facelets → ADF Skin

Dropped 3 buttons on the page, the third one is disabled

Changing button properties (width, font, color for different client event) –

I think no description needed as tags are self-descriptive

af|button {
    width: 150px;
    text-align: center;
    vertical-align: bottom;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
}

Output-

Now change background color – to do this we have to use af|button::link  selector

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
}

Output-

In the same way, we can change button behavior for hover, disabled and depressed client event

Hover event–

af|button:hover::link {
    background-color: #c7660b;
    border: skyblue 2.0px solid;
    color: White;
}

af|button:disabled::link {
      background-color: Gray;
    border: skyblue 2.0px solid;
    color: White;
}

Output- (hover on the first button)

Depressed event- (Select )
 

af|button:depressed::link {
    background-color: maroon;
    border: skyblue 2.0px solid;
    color: White;
}

Changing the shape of the button-

1.Rounded corner (oval shape)
just change af|button and af|button::link selectors

af|button {
    width: 150px;
    text-align: center;
    vertical-align: bottom;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

Output-

2.Square Button-

af|button {
    text-align: center;
    vertical-align: middle;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
    height: 50px;
    width: 50px;
}

af|button::text {
    padding-top: 12px;
}

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
    height: 43px;
}

Output-

2.Round(Circle) Button-

changing shape is nothing just some hit and try in CSS, see the changes CSS other selectors remain same

af|button {
    text-align: center;
    vertical-align: middle;
    color: blue;
    border: skyblue 2.0px solid;
    font-style: italic;
    font-family: cursive;
    height: 50px;
    width: 50px;
    border-bottom-left-radius: 5em 5em;
    border-bottom-right-radius: 5em 5em;
    border-top-left-radius: 5em;
    border-top-right-radius: 5em;
}

af|button::text {
    padding-top: 12px;
}

af|button::link {
    border: skyblue 2.0px solid;
    background-color: #feffd5;
    height: 43px;
    border-bottom-left-radius: 5em 5em;
    border-bottom-right-radius: 5em 5em;
    border-top-left-radius: 5em;
    border-top-right-radius: 5em;
}

Output-

So the purpose of this post is to give an overview of skinning and different selectors, you can try it on any component. JDeveloper provides built-in skin editor for all component, there you can see all selector and the pseudo-element of a component
Cheers  Happy Learning

Related Posts