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.
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;
}
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.And we can also do skinninng for pagination and detail stamp.
Next post i am planning to post how the table support for responsive.This is the open issue for all developers.
Reach me if you have any doubts.
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;
}
{
background-color:#fff;
color: #7F4614;
font-size:12px;
font-family:'OpenSans-Regular';
height:30px;
vertical-align: middle;
text-align: left;
}
3.Data row- Altrenative:
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;
}
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.And we can also do skinninng for pagination and detail stamp.
Next post i am planning to post how the table support for responsive.This is the open issue for all developers.
Reach me if you have any doubts.
Great stuff.
ReplyDeleteReally helpful...
Thanks alot
Thank you Steve!!!!!
ReplyDeleteThank you a lot great topic ...
ReplyDeleteThanks Ahmad......
Deletecan u share any demo regarding this dear
Deletethanks for post, i have problem with style selector in custom skin (jedv 11.1.1.9.0), for example it's work "af|table" but it doesnt work "af|table::data-row" when in selector :: doesnt work! pls help me
ReplyDeleteHi,
DeleteI hope that custom skin would configured in trinidad-skin file. If you are using external css file then that default selectors won't work.
In web.xml, Apply DISABLE_CONTENT_COMPRESSION as true then you will able to see rendered style selector,based on this you can apply your changes.
Give me clarity about this later i we will find out root cause.
Thanks,
Venkatesh Dandu
Thank for replye Mr Venkatesh Dandu,
DeleteI configured trinidad-skin for custom skin(css file) and it's work well but selectors with pseudo-elements(have :: double colon) for example
af|panelTabbed::body {
color: #E8E8E8;
}
doesn work in custom skin,
in web.xml applyed DISABLE_CONTENT_COMPRESSION and CHECK_FILE_MODIFICATION as true.
in this css file
af|panelTabbed{
color: #E8E8E8;
}
and class selector as same
.af_decorativeBox_top-content{
border-left: 1px solid #999 !important;
}
are work! i need select element by ID in css file but dosnt work! can you show me how to use this?
Hi,
DeleteThe id specific related skinning won't work properly in custom css file.Better to go for pseudo selectors based only, if you don't have any other option using javascript/Jquery we can find the id and apply your specific css propertys to that.
Don't write skinning selectors based on Uncompressed style sectors, because if the application at the time of going for live then we add DISABLE_CONTENT_COMPRESSION as false.
Finally css selectors will be compressed only then our uncompressed based css won't work properly.
Example:
Actual inputtext component rendered with uncompressed css selectors like below,
af_inputText_label
af_inputText_content
But,in css file we need to write like below,
af|inputText::label
{
}
af|inputText::content
{
}
Let me know if you have any concerns.
Thanks,
Venkatesh Dandu
thanks for replay,
Deletei am new UI adf , but i know should write css selector based on pseudo selectors, but this selector is not work!
af|inputText::label //It doesn't work
{
}
af|inputText::content //It doesn't work
{
}
pseudo selectors that have double colon (::) doesn't work.
but
af|inputText //it work
{
}
what's root cause?!
thanks,
Hi,
DeleteI am sure it should be work.Something goes wrong.
Can u plz send trinidad-skins and trinidad-config file structure.
Thanks,
Venkatesh Dandu
This comment has been removed by the author.
DeleteThis copy is my trinidad-config:
DeletebiSkin
true
and this copy is my trinidad-skins
biSkin.desktop
biSkin
v1
true
org.apache.myfaces.trinidad.desktop
alta-v1.desktop
skins/custom/biCustomSkin.css
pls let me your email address ?
DeleteThis copy here dont correct, i dont know ur address mail, send me pls?
DeleteHi,
DeleteI think problem with configuration only, The skin family must be extends from default adf apllication skins like simple,Fusion or blafplus e.t,c
For you trinidad-skins looks like something different.
Check for below blogs,
http://skinningadf.blogspot.in/2015/04/configuring-custom-skin-in-adf.html
http://docs.oracle.com/cd/E16162_01/user.1112/e17456/adfsg_adv.htm#ADFSG550
Thanks,
Venkatesh Dandu
dandu.web@gmail.com
DeleteMy configuration like step in your post but in extend section
DeleteI use "alta" instead of Fusion or e.c.t.
http://www.oracle.com/webfolder/ux/middleware/alta/index.html
alta is modern UI and i need us alta UI in my Application, dont i use it??
DeleteAlta UI will be supported from Jdev 12c.
Alta UI supported from Jdev 11.1.1.9.0 and work,too!
DeleteNo, Its doesn't support. Check with below blog from oracle.
Deletehttps://blogs.oracle.com/jdeveloperpm/entry/introducing_the_oracle_alta_ui
From Jdev12 versions on wards it will be supported. You better to use FusionFx.
I use FusionFx but doesnt work,too :(
DeleteThis comment has been removed by the author.
Deleteskin family should extends from fusionFx-v1.desktop
DeleteFor more information please look into this.
http://docs.oracle.com/cd/E16162_01/user.1112/e17456/adfsg_adv.htm#ADFSG550
Please find the sample application from the below url.
Deletehttp://skinningadf.blogspot.in/2015/04/configuring-custom-skin-in-adf.html
Hi,
DeleteThis version of skin editor 11.2.1.0 and alta UI didn't released!
I download ur sample application and write pseudo selectors(with double colon ::) in myCustom file and didnt work !
in Jedev 11.1.1.9.0 alta work simply! i send u sample application Alta UI in version,
but i dont know cause!!
Interestinglyalta UI is working on Jdev 11.1.1.9.0. I am not aware of it.
DeleteI checked you apllication, You added below css in your sample application,
af|panelTabbed::body {
color: #E8E8E8;
}
It's working fine. This color is coming to PanelTab body selector.
Inspect element and check it. It's working properly..
May be you are checking input text component text color, for this you need to do skinning for inputText ,whatever you wrote panelTab body css color won't reflect on input text component.
Thanks,
Venkatesh Dandu
I’m grateful to you for all the things you have done for me.
Deletealta UI is great! and i work it.
Thanks a lot
Hai, Im using Jdev 11.1.1.7.0.
ReplyDeleteSince this version doesn't have skin things, I really need to know how to change the table column header font size. Im a newbie in ADF.
Thanks a lot
Hi,
DeleteFirst you need to configure you custom skin file in your adf application.. After copy these skinning changes in to that CSS file..
For configuring custom skin check below post...
http://skinningadf.blogspot.in/2015/04/configuring-custom-skin-in-adf.html?m=0
af|table af|column::column-header-cell
Delete{
font-size: 16px;
}
Thanks for the response.
DeleteWhat if I still want to use the skyros theme for my web app? Can I configure 2 type of skin in the same trinidad-config.xml?
Thanks
Hai,
DeleteI have try change the fusion to skyros in trinidad-skins.xml. The result as what I expected.
Thanks for your response and great tutorial. Really thanks a lot! God bless you always.
For this you need to extend skyros skin in trinidad-skin file like below,
Deleteskyros-v1.desktop
thank You very Much .
ReplyDeleteHi Venkatesh,
ReplyDeleteI am new to the ADF skins and responsive designs. I wanna be building responsive screens to the existing application. Can you suggest some videos and blogs from where i can learn and apply?
BTW, i am using 11.1.2.4 version of Jdev and I hope that supports skinning components.
Thanks!
Hi,
DeleteSorry for late reply..Currently i am writing blog on ADF Responsive design..I will share you after done with this.
nice blog.Helped a lot :-)
ReplyDeleteThanks for useful blog.
ReplyDeleteHow can we apply skin to specific table. I do not want to apply for all adf tables in application.
Please help.
I am new on ADF, Kindly share how these properties will be use, kindly share any demo regarding this. Really appreciate on your help.
ReplyDelete