Posted on

skinning of af|panelTabbed in Oracle ADF

With chain of article of ADF skinning i.e. skinning of af:panelBox in Oracle ADF and !important CSS Declarations: How and when to use in ADF Skin. Today i will talk about skinning of panelTabbed

Requirement – To do skinning of panelTabbed in ADF.

Solution- For this, you have to understand this component .Header section contains three part
-> tab-start
-> tab-content
-> tab-end
try below code in your skin file and you can skin your panelTabbed . I am pasting below code for your skin file and explain what all this code is doing

/*it will be applied on header of tab*/
af|panelTabbed::header
{
  background-color:  transparent;
  border: none;
  
}

/*it will be applied on selected header of tab*/
af|panelTabbed::header:selected
{
  background-color:#233977 ; 
  color: White;
   border: none ;
   border-color:transparent ;
  
}

af|panelTabbed::tab-start, af|panelTabbed::tab-end,  af|panelTabbed::tab:hover af|panelTabbed::tab-start, af|panelTabbed::tab:hover af|panelTabbed::tab-end  {
    background-image:none !important;
   background-color:#233977  !important;
   color:#233977  !important;
   border: none ;
   border-color:transparent; 
}


af|panelTabbed::tab:selected af|panelTabbed::tab-content, af|panelTabbed::tab:selected:hover af|panelTabbed::tab-content {
  background-color:#233977 ;
  color:White;
  background: none;
   border: none ;
   border-color:transparent; 

}
af|panelTabbed::tab:hover af|panelTabbed::tab-content {
     background-color: #C3E0F2; ;
     background: none ;

}

/*it will be applied on text in tab of panelTabbed */
af|panelTabbed::tab af|panelTabbed::tab-text-link {
    font-size:14px;
    font-weight:bold;
    color:#233977 ;
    line-height:16px;
} 

/*it will be applied on text in selected tab of panelTabbed */
af|panelTabbed::tab:selected af|panelTabbed::tab-text-link {
    color:White;
    border: none;
    font-size:14px;
    font-weight:bold;
    line-height:16px;
}


af|panelTabbed::tab.p_AFSelected af|panelTabbed::tab-content, af|panelTabbed::tab.p_AFSelected:hover af|panelTabbed::tab-content
{
background-color: #233977 ; background-image:none;
color: White;
border: none;
}


af|panelTabbed::tab.p_AFSelected af|panelTabbed::tab-end, af|panelTabbed::tab.p_AFSelected:hover af|panelTabbed::tab-end
{
background-color: transparent; 
 background-image:none;
}



af|panelTabbed::tab:selected af|panelTabbed::tab-content{
  border: none;
}
af|panelTabbed::body {
    background-color: #233977 ; 
    color: White; 
    border: thick ;
}

Final output is like below picture

Image 1

happy learning with Vinay in Techartifact…

Posted on

skinning of af:panelBox in Oracle ADF

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

blog

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

Posted on

!important CSS Declarations: How and when to use in ADF Skin

While designing in ADF skin.I came across of significance of !important. ADF developer always afraid of CSS like me. 😛

now we should understand meaning of this

What it says; that ‘this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!’

In normal use a rule defined in an external stylesheet is overruled by a style defined in the head of the document, which, in turn, is overruled by an in-line style within the element itself (assuming equal specificity of the selectors). Defining a rule with the !important ‘attribute’ (?) discards the normal concerns as regards the ‘later’ rule overriding the ‘earlier’ ones.

Also, ordinarily, a more specific rule will override a less-specific rule. So:

a {
    /* css */
}

Is normally overruled by:

body div #elementID ul li a {
    /* css */
}

As the latter selector is more specific (and it doesn’t, normally, matter where the more-specific selector is found (in the head or the external stylesheet) it will still override the less-specific selector (in-line style attributes will always override the ‘more-‘, or the ‘less-‘, specific selector as it’s always more specific.
If, however, you add !important to the less-specific selector’s CSS declaration, it will have priority.
Using !important has its purposes (though I struggle to think of them), but it’s much like using a nuclear explosion to stop the foxes killing your chickens; yes, the foxes will be killed, but so will the chickens. And the neighbourhood.
It also makes debugging your CSS a nightmare (from personal, empirical, experience).

Lets take an example of ADF skinning.

af|inputText::label
{
background-color: transparent  !important;
background: transparent ;
color : White;
font-weight: bold;
font-size: small;
 margin: 0px;
padding:0px 4px !important; 
}

We will define now an style class for using inputText anywhere other place with different layout like 

.AfInputSizeBig af|inputText::label
{
background-color: Blue;  // see this
background: transparent ;
color : White;
font-weight: bold;
}

If you use AfInputSizeBig style class any where else but back ground color of input label is always transparent because if !important definition earlier.
You should be very careful while creating ADF skin.If you are very sure about cascading of style then use this !important .

I will post more on ADF Skinning.

Till than happy learning with Vinay in Techartifact….