Discussions
Categories
- 197K All Categories
- 2.5K Data
- 546 Big Data Appliance
- 1.9K Data Science
- 450.8K Databases
- 221.9K General Database Discussions
- 3.8K Java and JavaScript in the Database
- 31 Multilingual Engine
- 552 MySQL Community Space
- 479 NoSQL Database
- 7.9K Oracle Database Express Edition (XE)
- 3.1K ORDS, SODA & JSON in the Database
- 556 SQLcl
- 4K SQL Developer Data Modeler
- 187.2K SQL & PL/SQL
- 21.4K SQL Developer
- 296.4K Development
- 17 Developer Projects
- 139 Programming Languages
- 293.1K Development Tools
- 111 DevOps
- 3.1K QA/Testing
- 646.1K Java
- 28 Java Learning Subscription
- 37K Database Connectivity
- 161 Java Community Process
- 105 Java 25
- 22.1K Java APIs
- 138.2K Java Development Tools
- 165.3K Java EE (Java Enterprise Edition)
- 19 Java Essentials
- 162 Java 8 Questions
- 86K Java Programming
- 81 Java Puzzle Ball
- 65.1K New To Java
- 1.7K Training / Learning / Certification
- 13.8K Java HotSpot Virtual Machine
- 94.3K Java SE
- 13.8K Java Security
- 205 Java User Groups
- 24 JavaScript - Nashorn
- Programs
- 475 LiveLabs
- 39 Workshops
- 10.2K Software
- 6.7K Berkeley DB Family
- 3.5K JHeadstart
- 5.7K Other Languages
- 2.3K Chinese
- 175 Deutsche Oracle Community
- 1.1K Español
- 1.9K Japanese
- 233 Portuguese
Skinning af|query, af|panelcollection components -specific items

Hi All,
I am working on Jdev version 12.1.3
I can style 2 buttons differently very easily by creating 2 separate style class and have it in the style.
Now the challenge is, I have a requirement that i want to skin a specific button say : "Reset" and "Search" separately in af|query : how do i achieve it ?
How do we get handle to af|query :subcomponents ?
Facing the same challenge in panelcollection:: Detach button(if i have to change the default icon, text and hover color )
Any pointers ?
Thanks
Sumit
Best Answer
Answers
-
-
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
-
Hello,
Try with background: red; instead of background-color.
regards,
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 :
af|query div[id$='_search']{
background:Orange ;
color: White;
icon: url("../../images/search.png");
text-decoration: none;
}
Thanks
Sumit
-
Hello,
There might be a better way to do it but you can try with this:
af|query div[id$='_search'] {
background: Orange;
color: White;
background-image: url('your url');
background-position: 6px 6px; // change here so your icon is in the position you want
background-repeat: no-repeat;
text-decoration: none;
}
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
}
regards,
Ruben.
-
Hi Ruben,
Thank You so much for helping me in this.
I tried the below css, but now the image is getting hidden.
af|query div[id$='_search'] {
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.
Thanks
Sumit
-
When i remove/comments the background tag, it is rendering the image.
image:
-
css
....
/*background: orange;*/
/*#ef3340;*/
color: Black;
.....
-
Hello,
Try to move: background: orange;
On top of: background-image:url("../../images/search_ena.png"); /*16px x 16px*/
background: orange;
background-image:url("../../images/search_ena.png"); /*16px x 16px*/
regards,
Ruben.
-
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 :
Please advise.
Thanks
Sumit