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

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;

}

Hello,

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

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

    display: none;

}

regards,

Ruben.