For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!
Hello,
Check this post:
af:query css Customization
regards,
Ruben
Hi Ruben,
I see that the css is able to change the text of the query panel buttons but it is not changing the background color
the css code used :
af|query div[id$='_search']{
background-color: blue; color: red; }
af|query div[id$='_reset']{
background-color: red; color: blue;
}
Any pointers ?
Thanks
Sumit
Try with background: red; instead of background-color.
Ruben.
Thank You Ruben !!
That worked , however i am still not able to fetch the search icon the on the search button.
Please advice:
CSS used is :
background:Orange ;
color: White;
icon: url("../../images/search.png");
text-decoration: none;
There might be a better way to do it but you can try with this:
af|query div[id$='_search'] {
background: Orange;
background-image: url('your url');
background-position: 6px 6px; // change here so your icon is in the position you want
background-repeat: no-repeat;
you might want to fix the link inside the div so you can center the text:
af|query div[id$='_search'] a{
margin-left:20px; // change here
Thank You so much for helping me in this.
I tried the below css, but now the image is getting hidden.
background-image:url("../../images/search_ena.png"); /*16px x 16px*/
background-color: transparent; /\*make the button transparent\*/ background-repeat: no-repeat; /\* make the background image appear only once \*/ background-position: 0px 0px; /\* equivalent to 'top left' \*/ border: none; /\*assuming we don't want any borders \*/ cursor: pointer; /\*make the cursor like hovering over an \<a> element \*/ height: 16px; /\*make this the size of your image \*/ padding-left: 16px; /\*make text start to the right of the image \*/ vertical-align: middle; /\*align the text vertically centered \*/ background: orange; /\*#ef3340;\*/ color: White; text-shadow: none; text-decoration: none; border-radius: 3px; border: none; margin: 0; margin-left:20px; /\* change here \*/
we can see that it is occupying the space for image but not rendering .
Is the background overriding the image ? Image below:
Please advise.
When i remove/comments the background tag, it is rendering the image.
image:
css
....
/*background: orange;*/
/*#ef3340;*/
color: Black;
.....
Try to move: background: orange;
On top of: background-image:url("../../images/search_ena.png"); /*16px x 16px*/
background: orange;
Sweet. It worked just like what we wanted.
Thanks a ton !!
we are able to get hold of "Detach" button.
we want to replace with my custom detach icon but I am stuck at now is .
I not able to override the previous panelcollection's detach icon.
Image :
CSS:
af|panelCollection div[id$='_dchTbr']{
background: #ecebeb;
background-color: transparent; /*make the button transparent*/
background-repeat: no-repeat; /* make the background image appear only once */
background-position: 2px 4px;
text-shadow: none;
border-radius: 3px;
border: none;
margin: 0;
If you want to hide the icon, you can do it like this:
af|panelCollection img[id*='_dchTbr']{
display: none;