Follow by Email

Saturday, 27 February 2016

ADF Skinning: Increase width, Change color of a tab in af:panelTabbed

We can change appearance of ADF Application by applying CSS and changing style properties of ADF Faces Component
Here i am writing a simple CSS to increase tab width of af:panelTabbed component

I hope you all know how to create a skin for ADF Application , If don't know then look at this post
ADF Basics: Using CSS to change appearance of application (Skins and Styles in ADF Faces) 


af:panelTabbed looks like this (Using Alta UI Skin)

Now to changes tab width , background color or font style we can use CSSlike this -


//To Change text style of Tab
af|panelTabbed::tab af|panelTabbed::tab-text-link {
    color: white;
    font-weight: bold;
}

//To Change tab style 
af|panelTabbed::tab {
    background-color: Highlight;
    width: 200px;
}

//To increase size of tab content to match with tab width
af|panelTabbed::tab af|panelTabbed::tab-content {
    width: 200px;
}


After applying Skin tab looks like this -

Cheers :) Happy Learning

6 comments :

  1. Thanks for your post!
    I want to apply reponsive to panel Tab but I don't know what I have to do. Can you show me?

    ReplyDelete
  2. Thank you for the nice post Ashish :)

    ReplyDelete
  3. Hi Ashish,
    Can tabs position be changed to left. (using css)

    Oracle documentation says, valid values are :above, both, below, start, end, left, right. But left isn't available.

    Regards,
    Vishnu

    ReplyDelete
    Replies
    1. You need to use panel drawer for that

      Delete
    2. Thanks for the reply, Ashish.
      We are unfortunately using 11.1.1.7.

      Regards,
      Vishnu

      Delete