Skinning af|query, af|panelcollection components -specific items

Sumit Yadav

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

Ruben Rodriguez

Hello,

Check this post:

af:query css Customization

regards,

Ruben

Ruben Rodriguez

Hello,

Check this post:

af:query css Customization

regards,

Ruben

Sumit Yadav

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

Ruben Rodriguez

Hello,

Try with background: red; instead of background-color.

regards,

Ruben.

Sumit Yadav

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

Ruben Rodriguez

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.

Sumit Yadav

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

Sumit Yadav

When i remove/comments the background tag, it is rendering the image.

image:

Sumit Yadav

css

....

/*background: orange;*/

    /*#ef3340;*/

    color: Black;

.....

Ruben Rodriguez

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.

Sumit Yadav

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

Sumit Yadav

CSS:

af|panelCollection div[id$='_dchTbr']{

background: #ecebeb;

     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: 2px 4px;

    text-shadow: none;

    text-decoration: none;

    border-radius: 3px;

    border: none;

    margin: 0;

}

Ruben Rodriguez

Hello,

If you want to hide the icon, you can do it like this:

af|panelCollection img[id*='_dchTbr']{

    display: none;

}

regards,

Ruben.