Now a days, Use interface plays a vital role in applications, whatever technology will be used, Nice user interface should be mandatory. In ADF, Sometimes the requirement like the look and feel of an application same like Html website, Having a header section with some of the links. These all are horizontally aligned with nice background colors.
In adf, we can easily achieve with links.
Expected UI:
The below is the layout in source page to achieve above look and feel.
Here, I have defined navTab styleclass for each individual link.
The below are the css for normal commandlink component i,e without having any hovers,foucus e,t,c.
af|commandLink.navTab {
font-family: 'openSans-Regular';
display: inline-block;
padding: 15px 20px;
background: #fff;
cursor: pointer;
color: #000;
font-size: 13px;
text-decoration: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
In adf, we can easily achieve with links.
Expected UI:
The below is the layout in source page to achieve above look and feel.
Here, I have defined navTab styleclass for each individual link.
The below are the css for normal commandlink component i,e without having any hovers,foucus e,t,c.
af|commandLink.navTab {
font-family: 'openSans-Regular';
display: inline-block;
padding: 15px 20px;
background: #fff;
cursor: pointer;
color: #000;
font-size: 13px;
text-decoration: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
The below are the css for commandlink component having hovers,foucus e,t,c.
af|commandLink.navTab:hover,
af|commandLink.navTab:active,
af|commandLink.navTab:active:hover,
af|commandLink.navTab:focus:hover,
af|commandLink.navTab:focus:hover:active {
font-family: 'openSans-Regular';
display: inline-block;
padding: 15px 20px;
background: #565656;
cursor: pointer;
color: #fff;
font-size: 13px;
text-decoration: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
Download: linksSkinningPoc
Reach me if you have any doubts.
Hello, Is there a way we can skin af|goLink too, like you did for af|commandLink? I am trying to achieve the following :
ReplyDelete1. Can we disable the af:goLink using CSS?
2. Can we set the color of the disabled goLink in a jsff page?
Pls help!
1.For disable the goLink we can achieve through two ways
Deletea)Change disabled property to true for component
If you want apply css to that disabled link,The below are the skinning selectors,
af|goLink:disabled
{
color: red;
}
b)Using skinning we can show like a disabled link
af|goLink
{
text-decoration: none;
cursor: default;
color: #8e98af;
}
af|goLink:hover,
af|goLink:active,
af|goLink:active:hover,
af|goLink:focus:hover,
af|goLink:focus:hover:active
{
cursor: default;
color: #8e98af;
text-decoration:none;
}
2. If you want to apply any css chnages using skinning selectors in jsff page or jspx page, It doesn't work.
For achieving your requirement apply color css property in inlinestyle.
Hi,
ReplyDeleteI have a requirement.
Scenario: I have a golink in a adftable which is light blue in color and when I hover the table row the background of the row will be Blue color.Due to this I am not bale to see the text properly.
Requirement: When I hover the mouse on the table row Can the goLink text change to White color.
How can I change it in skinning file?? Please suggest I am fresher in ADF
Hi Mahesh,
ReplyDeleteCheck below selectors to achieve your rqquirement.
af|table::data-row:hover af|column::data-cell af|goLink{
color:#fff;
}
Hi Venkatesh,
DeleteThank you so much for your help.I am sorry for late reply. But this satisfied my requirement partially. this change is geting applied only to the alternate rows(i.e row with lite grey background, this hover is not reflecting ). I heard taht adf table default behaviour is having different color for alternate rows. Please suggest.
Hi Mahesh,
DeleteIf you want to override alternative rows need to add one property for table as rowBandingInterval="1".
The below are the selectors for alternative rows,
af|table::data-row:hover af|column::data-cell af|goLink
{
color:#fff;
}
af|table::data-row:hover af|column::banded-data-cell af|goLink {
color: #fff;
}
Hi Venkatesh,
DeleteThank you so much for your reply.
I have added the selectors for alternative rows. It worked well. thank you again.
You also mentioned to add one property rowBandingInterval="1" for table . Can you please let me know where should I add it.As if Now, I haven`t added but still it worked for adf table in the page.
I also wanted to know will this be applied globally throughout my application? If not What should i do to make it globally. I amm adding this code in skin.css file
Thanks in Advance
If link won't take white color add!important property.
ReplyDeleteHow to remove underline on hover in Submenu in Oracle ADF in Alta theme.
ReplyDeleteI have tried this ADF selector and CSS but it is not working:
af|commandMenuItem:hover {
text-decoration:none;
}
and
.AFMenuItem:alias {
text-decoration:none;
}
I have also added costume class but it not works. background-color style work but text-decoration not working.
Which selector I have to use to remove underline from hover submenu?
Thanks in advance.
Hi Mukesh,
ReplyDeleteaf|commandMenuItem::menu-item-text:hover {
text-decoration:none;
}
For menubar skinning check below post for reference,
http://skinningadf.blogspot.in/2015/04/adf-menu-menubar-commandmenuitem.html
Let me if you have any doubts.
I have tried that but still underline comes.
DeleteMy menu are coming from java through dynamic region.thnx
Delete.AFLinkHover:alias
Delete{
text-decoration: underline;
}
I have to modify this. But my CSS is not reflecting
hi venkatesh ,
ReplyDeletei need requirement to open email when click on button but i dont know how to do that could you please tell me how to do that please
thanks and regards
raghu