Forum Stats

  • 3,770,521 Users
  • 2,253,130 Discussions
  • 7,875,493 Comments

Discussions

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

Sumit Yadav
Sumit Yadav Member Posts: 73
edited Jul 28, 2015 9:46AM in JDeveloper and ADF

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 ?

queryComponentSkinning.png

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

Sumit Yadav

Best Answer

«1

Answers

  • Ruben Rodriguez
    Ruben Rodriguez Member Posts: 351 Gold Badge
    edited Jul 24, 2015 3:17AM Accepted Answer

    Hello,

    Check this post:

    af:query css Customization

    regards,

    Ruben

    Sumit Yadav
  • Sumit Yadav
    Sumit Yadav Member Posts: 73
    edited Jul 24, 2015 8:09AM

    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

    queryPanelButton.png

    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
    Ruben Rodriguez Member Posts: 351 Gold Badge
    edited Jul 24, 2015 8:22AM

    Hello,

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

    regards,

    Ruben.

    Sumit Yadav
  • Sumit Yadav
    Sumit Yadav Member Posts: 73
    edited Jul 24, 2015 10:02AM

    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
    Ruben Rodriguez Member Posts: 351 Gold Badge
    edited Jul 24, 2015 10:17AM

    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
    Sumit Yadav Member Posts: 73
    edited Jul 28, 2015 2:31AM

    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:

    queryPanelButton2.png

    Please advise.

    Thanks

    Sumit

  • Sumit Yadav
    Sumit Yadav Member Posts: 73
    edited Jul 28, 2015 2:37AM

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

    image:

    queryPanelButton3.png

  • Sumit Yadav
    Sumit Yadav Member Posts: 73
    edited Jul 28, 2015 2:38AM

    css

    ....

    /*background: orange;*/

        /*#ef3340;*/

        color: Black;

    .....

  • Ruben Rodriguez
    Ruben Rodriguez Member Posts: 351 Gold Badge
    edited Jul 28, 2015 3:26AM

    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
  • Sumit Yadav
    Sumit Yadav Member Posts: 73
    edited Jul 28, 2015 5:12AM

    Sweet. It worked just like what we wanted.

    queryPanelButton4.png

    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 :

    panelcoll1.png

    Please advise.

    Thanks

    Sumit

This discussion has been closed.