The ultimate guide for skinning ADF table

In ADF, Most common used component is table. Previously, I searched for so many blogs, I didn't get any skinning related stuff to fulfill my requirement then I realized and explored myself to learnt. Finally i could accomplish skinning for table component.

I hope this post should definitely useful for your requirement.

The below image is how the table look and feel without applying any custom skinning.

The below image is how the table look and feel after skinning.

The below are the steps to achieve above look and feel .

It's not straight forward approach, We need to apply skinning for each section.

af|table {

background: none;

border: 1px solid #A65B1A;

}

1. ColumnHeader:

af|table af|column::column-header-cell 
{   
height:35px;
color:#ffffff; 
text-align: center;
font-size: 12px;
font-family:'OpenSans-Bold';  
font-weight: bold;
background-image: none;
background-color: #A65B1A;
vertical-align: middle;
border-left: 1px solid #BF691E;
}

2. Data row:

af|table::data-table-VH-lines af|column::data-cell

{ 
background-color:#fff;
color: #7F4614;
font-size:12px;
font-family:'OpenSans-Regular';
height:30px;
vertical-align: middle;
text-align: left;
} 

3.Data row- Alternative:

For implementing different css for alternative rows,we need to be change table rowBandingIntervel property to 1.

af|table::data-table-VH-lines af|column::banded-data-cell{ 

background-color:#F0E5CC; 

color: #7F4614;

font-size:12px;   

font-family:'OpenSans-Regular';  

height:30px;   

vertical-align: middle;

text-align: left; 

}

4.Table default row selection:

Some of the requirements like want to show row selection color for the default selected row.

At the time of page load,The default row should selected, It depends on row index value.Normally, First row would be selected.

af|table::data-row:selected af|column::data-cell
{  
background-color: #eeaa00;
color: #ffffff;  
}
af|table::data-row:selected af|column::banded-data-cell
{  
background-color: #eeaa00; 
color: #ffffff;  

}

5.Table row selection:

The row color will be changed based in your row selection.These are the following selectors for that.

af|table::data-row:selected:focused af|column::data-cell
{  
background-color: #eeaa00;  
color: #ffffff; 
}
af|table::data-row:selected:focused af|column::banded-data-cell {
background-color: #eeaa00;   
color: #ffffff;    

}

6.Table row hover:

af|table::data-row:hover af|column::data-cell
{ 
background-color: #9bafc8;  
color: #ffffff;  
}
af|table::data-row:hover af|column::banded-data-cell { 
background-color: #9bafc8;
color: #ffffff; 

}

These all are the common requirements for table skinning.

JQuery Id selector in ADF

Some times we have a requirement like have to write some css changes based on id selector.

The ADF components will rendered with some mixed special characters. For this case if you want to find the id, We need do add '\\' before to the special character.

Example:

ADF Actual Rendered ID:pt1:r1:0:pgl13

JQuery ID selector:

 $("#pt1:r1:0:pgl13");----------It doesn't work

$("#pt1\\:r1\\:0\\:pgl13")-------It works.

ADF Menu | MenuBar | commandMenuItem Skinning

Drop down menus are a common requirement for web applications, In html we can create using elements like ul, li, div e.t.c. In ADF, We can achieve using menuBar and menu components.

The below image is how the dropdown look and feel without applying any custom skinning.

The below image is how the dropdown look and feel after applying skinning.

These are the component structure in an source page.

The below are the skinning selectors for getting above look and feel.

af|menu::bar-item-open-icon-style {

    background-image: url("/images/select-arrow.png");

    height: 16px;

    width: 16px;

    padding-top: 2px;

}

af|menu::bar-item-text {

    color: #666;

    font-size: 14px;

    font-family: openSans-Regular;

}

af|menu::bar-item-text:hover {

    color: #eeaa00;

    font-size: 14px;

    font-family: openSans-Regular;

}

af|menu::bar-item {

    padding: 0px;

    height: 25px;

}

af|menu::bar-item:highlighted {

    background-image: none;

    background: transparent;

    border: none;

    border-bottom: 2px solid #c00;

    padding: 0px;

}

af|menu::bar-item:depressed {

    background-image: none;

background: transparent;

    border: none;

    border-bottom: 2px solid #c00;

        padding: 0px;

}

af|menu:highlighted af|menu::bar-item-open-icon-style {

    background-image: url("/images/select-arrow.png");

    padding-top: 2px;

}

af|menu:depressed af|menu::bar-item-open-icon-style {

    background-image: url("/images/select-arrow.png");

    padding-top: 2px;

}

af|menuBar

{

    overflow: visible !important;

    background: transparent;

    height: 25px;

}

af|commandMenuItem::menu-item-text {

    font-family: openSans-Regular;

    font-size: 13px;

    padding: 5px;

    font-weight: 400;

    color: #333;

    background-color: #f9f9fa;

}

af|menu::child-container

{

    background-color:#f9f9fa;

    min-width: 180px;

    border-top: none;

}

af|commandMenuItem::menu-item-text:hover {

    background: #fcc200 !important;

}

af|commandMenuItem::menu-item-text:active {

    background: #fcc200 !important;

}

af|commandMenuItem::menu-item-icon-style {

    display: none;

}

af|commandMenuItem::menu-item-open-indicator {

    display: none;

}

af|commandMenuItem::menu-item-accelerator {

    display: none;

}

For reference download below sample application.