Css Reuse-Css inheritance in ADF

In most of time we are getting different requirements related look and feel of the components.
For example,In application we have 10 buttons with different background colors, But remaining look and feel is same like width,height and padding e.t.c

If we observe above buttons almost same look and feel only difference background color.
Normally we can achieve this we will create different styleclass and apply skinning for each individual components.

Actual Css:

af|commandButton.greenButton
{

-webkit-border-radius: 28;

-moz-border-radius: 28;

border-radius: 28px;

font-family:  Verdana, Arial, Helvetica, sans-serif;

color: #ffffff;

font-size: 20px;

padding: 10px 20px 10px 20px;

text-decoration: none; 

background-image: none; 

border: none;

outline:none;

cursor: pointer;

background: #3498db;

}

af|commandButton.blueButton

{

-webkit-border-radius: 28;

-moz-border-radius: 28;

border-radius: 28px;

font-family:  Verdana, Arial, Helvetica, sans-serif;

color: #ffffff;

font-size: 20px;

padding: 10px 20px 10px 20px;

text-decoration: none; 

background-image: none; 

border: none;

outline:none;

cursor: pointer;

background: royalblue;

}

In the above css code, Almost all css propertys are same except background, Imagine in application having more than 10 buttons, we will get a chance to increase the css code. It will be affecting the performance of  application. Not only buttons we can use for all components.

One of the way that we can achieve the above functionality by reducing CSS is by applying -tr-rule-ref property.

The below are the steps to implement the -tr-rule-ref property.

1.We need to identify common css in the components.
2.Create one styleclass with alias and put all common css in to that.

.commonButtonCss:alias 

{

-webkit-border-radius: 28;

-moz-border-radius: 28;

border-radius: 28px;

font-family:  Verdana, Arial, Helvetica, sans-serif;

color: #ffffff;

font-size: 20px;

padding: 10px 20px 10px 20px;

text-decoration: none; 

background-image: none; 

border: none;

outline:none;

cursor: pointer;

}

3.-tr-rule-ref synatax.

  -tr-rule-ref: selector("styleclassName:alias ");

af|commandButton.greenButton

{

  -tr-rule-ref: selector("commonButtonCss:alias");

background: #3498db;

}

af|commandButton.blueButton

{

  -tr-rule-ref: selector("commonButtonCss:alias");

background: royalblue;

For reference check in oracle documentation

http://docs.oracle.com/cd/E16162_01/user.1112/e17456/adfsg_selectors.htm#ADFSG544

commandButton Skinning in ADF

These are the skinning selectors for the commandButton.

Normal Button Css:

af|commandButton.myNewButtonClass{

background: #3498db;

-webkit-border-radius: 28;

-moz-border-radius: 28;

border-radius: 28px;

font-family:  Verdana, Arial, Helvetica, sans-serif;

color: #ffffff;

font-size: 20px;

padding: 10px 20px 10px 20px;

text-decoration: none; 

background-image: none; 

border: none;

outline:none;

cursor: pointer;

}

Pseudo-classes css:

The below are the pseudo classes like hover,focus,active e.t.c.

af|commandButton.myNewButtonClass:focus,
af|commandButton.myNewButtonClass:hover,
af|commandButton.myNewButtonClass:active,
af|commandButton.myNewButtonClass:focus:hover, 
af|commandButton.myNewButtonClass:focus:hover:active {

 background: royalblue;

-webkit-border-radius: 28;

-moz-border-radius: 28;

border-radius: 28px;

font-family:  Verdana, Arial, Helvetica, sans-serif;

color: #ffffff;

font-size: 20px;

padding: 10px 20px 10px 20px;

text-decoration: none; 

background-image: none;

border: none;

outline:none;

cursor: pointer;

}

Panel Box Skinning in ADF

Panel Box is most usage components in ADF. In this post I want to show the complete skinning and how we can achieve the good look and feel.

I hope this post should useful for you requirement.

The below screenshot shows that how the panel box component looks without applying skinning.

The below screenshot shows that how the panel box component looks with applying skinning.

These are the selectors to achieve above look and feel.

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

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

af|panelBox::header-center:core:default {
    background-image: none;
    background-color: #e0eff9;
    padding: 10px;
}

af|panelBox::header-element {
    font-size: 13px;
    color: #565656;
}

af|panelBox::center:core:default {
    background-image: none;
    border: 1px solid #E1E1E8;
    background: #F9F9F9;
}


af|panelBox::footer-start:core:default {
    display: none;
}

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

af|panelBox::footer-end:core:default {
    display: none;
}

af|panelBox::disclosed-icon-style {
    width: 22px;
    height: 22px;
    background-image: url("../images/open.gif");
    outline: none;
    cursor: pointer;
}

af|panelBox::disclosed-icon-style:hover {
    width: 22px;
    height: 22px;
    background: url("../images/open.gif")!important;
    outline: none;
}

af|panelBox::disclosed-icon-style:active {
    width: 22px;
    height: 22px;
    background: url("../images/open.gif")!important;
    outline: none;
}

af|panelBox::undisclosed-icon-style {
    width: 22px;
    height: 22px;
    background-image: url("../images/close.gif");
    outline: none;
    cursor: pointer;
}

af|panelBox::undisclosed-icon-style:hover {
    width: 22px;
    height: 22px;
    outline: none;
    background: url("../images/close.gif")!important;
}

af|panelBox::undisclosed-icon-style:active {
    width: 22px;
    height: 22px;
    outline: none;
    background: url("../images/close.gif")!important;
}

If you want sample apllication for reference download below link,

Download:PanelboxPoc

ADF Popup Skinning

If you want to skinning the ADF popup,First remove the defalut background look and feel.

The below are the global selectors for removing popup background

.AFPopupSelector {
    background-color: #fdfdfe; 
   box-shadow: none !important;

    -webkit-box-shadow: none !important; 

   -moz-box-shadow: none !important;
}
.AFPopupSelectorContentStart 
{  
  background-color: none;
}
.AFPopupSelectorContentEnd
 {   
 background-color: none;
}
.AFPopupSelectorHeaderEnd
 {  
  background-color: none;
}
.AFPopupSelectorHeaderStart 
{   
 background-color: none;
}
.AFPopupSelectorHeader
 {  
  background-color: none;

}