Problem customizing the list disclosure icon

[robl]

I am trying to customize the list disclosure icon. However, the icon is not displaying correctly. It shows up as a solid circle which I think indicates some sort of masking issue. What is the correct way to do this or have I come across a bug in PR1?

This is the CSS I used. The encoded image is the 'blahblah' part...

.x-list-disclosure {
    -webkit-mask-box-image: url('data:image/png;base64,blahblahblah....');
}

[AndreaCammarata]

Hi robi.
I usually use Sass and Compass to give my application a custom theme.
If you are using Sass you con do that in this way:

.x-list {
    .x-list-disclosure { 
      -webkit-mask-image: theme_image($theme-name, 'your_disclosure_pic.png') !important; 
    }
}

Where $theme-name is a variable which contain a value of "default" by default.
In this way, you only need to put your "your_disclosure_pic.png" inside the "themes/images/default" folder and compile your theme.

(You can even set another variable name to point to another folder different from the default one),

If you want do that directly using CSS, you can do the same defining

.x-list-disclosure { 
    -webkit-mask-image: url('data:image/png;base64,blahblahblah....');
}

Hope this helps.

[robl]

Ciao Andrea. Grazie. However, the problem was that the image was not in the correct format. Apparently, it is a 60x60 monochrome image with transparent pixels for the white areas. I am not sure why. Because I had no transparent pixels, the icon appeared as a solid opaque circle instead of a circle with an arrow in it.

[AndreaCammarata]

Di nulla figurati