ah the grey triangles. So You have to work with these two classes
.claro .dijitTitlePane .dijitClosed .dijitArrowNode {
background-position: -14px 0;
}
.claro .dijitTitlePane .dijitArrowNode {
background-image: url("images/spriteArrows.png");
background-repeat: no-repeat;
height: 8px;
width: 7px;
}
For example you can do something like this:
.claro .dijitTitlePane .dijitClosed .dijitArrowNode {
background-position: 0px 0;
background-image: url("yourOpenImage");
height: 8px; // change with your image dimensions
width: 7px; // change with your image dimensions
}
.claro .dijitTitlePane .dijitArrowNode {
background-image: url("yourCloseImage");
background-repeat: no-repeat;
height: 8px; // change with your image dimensions
width: 7px; // change with your image dimensions
}
Ih this way you have the same image for all of your titlepane headers.If you want to have different images I think you can:1) do a dojo.query to get every single image starting from the titlepane id and replace them2) override the titlepane class with a dojo.declare adding an image to the header that you can change for every titlepane instance.I don't know if these are the best solutions anyway.I have no time now, i will try to be more specific in the next post if you need more help.