Change the punching image of rowToggler

Question

I need to change the image of primefaces rowToggler. This is what I am trying in the css file:

.ui-datatable .ui-row-toggler {
   cursor: pointer;
   background-image: url("/resources/images/expand.jpg") ; 
}

I also tried changing the url to /images/expand.jpg, images / expand.jpg and just expand.jpg. But not one of them finds an image.

What am I missing?

Answer 1

If you put your images in the folder of resourcesyour project, you should access it as follows:

.ui-datatable .ui-row-toggler {
   cursor: pointer;
   background-image: url("../javax.faces.resource/expand.jpg.xhtml?ln=images/") ; 
}

The magic formula should be

../javax.faces.resource/<file-name>.xhtml?ln=<path-to-the-folder>/

So, if your image is in /resources/car/bmw/series7.jpg, you should access it using../javax.faces.resource/series7.jpg.xhtml?ln=car/bmw/

Answer 2

, , , , "localhost/APP_NAME/", "/resources/...", "localhost/resources/..." ( "localhost/APP_NAME/resources/...".

url ( JSF)

url("#{resource['images:expand.jpg']}")

Answer 3

: , - Google. - , , , (. ) ui-icon-circle-triangle-e, ui-icon-circle-triangle-s, . , - . :

.ui-icon-circle-triangle-e {
    background-image: url('../images/triangleRight.png') !important;
    background-position: 0px 0px;   
}

.ui-icon-circle-triangle-s {
    background-image: url('../images/triangleDown.png') !important;
    background-position: 0px 0px;
}

, - , .

Answer 4

    <script type="text/javascript">
    /*<![CDATA[*/
        $(document).on("click", ".ui-icon-circle-triangle-e", function() {
            $(this).css({
                background: 'url(#{request.contextPath}/images/data/silm.gif)'
            });

        });
    /*]]>*/
    </script>

    <style type="text/css">
        .ui-datatable .ui-row-toggler {
            cursor: pointer;
            background: url(#{request.contextPath}/images/data/eklem.gif) ; 
        } 
    </style>