Custom dijit.TitlePane icon?

[CraigMcDade]

Is it possible to have a custom image icon in a TitlePane, instead of the generic gray dropdown box?

<div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false" open="false" src="basemap.png" style="float:right; margin-right:10px;">
<div dojoType="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery" >
</div></div>
        </div>

I've tried adding something like src="image.png"

[DavideLimosani]

Do you simply want to change the color of your titlepane header?

If I have understood correctly, override this in your css

.claro .dijitTitlePaneTitle {
    background-image: url("yourimage");
}

[CraigMcDade]

thanks for your response. The ultimate goal is to replace those gray buttons completely with other images. I have 4 titlepanes which I would like to have different icons (basemap gallery, search, legend, layers).

[DavideLimosani]

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 them

2) 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.

[KellyHutchins]

Are you referring to the arrows? If so you can modify them using the .dijitArrowNode classes. The title pane arrows the widget uses by default are all defined in one sprite:

http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dijit/themes/claro/images/spriteArrows.png

Then the appropriate arrow (down, up) is defined by setting the position of that particular arrow within the sprite. So in this example if we created a new sprite that contained the replacement icons you wanted to use you could define the url here:

.claro .dijitTitlePane .dijitArrowNode {
  background-image: url("http://localhost/myArrows.png");
}

Then for each of the closed, open etc states you could set the position of the image you want to display.
.claro .dijitTitlePane .dijitClosed .dijitArrowNode{
  background-position:0 0;
}

[CraigMcDade]

I don't think I'm explaining what I am trying to do very well. Essentially I want to completely replace the gray boxes (and arrows) so that when you click on the custom image it opens the panes.

I'm trying to copy what is done in a majority of the local government apps and put icons in the place of the gray buttons.

I've tried converting to a dijit.form.ToggleButton but couldn't get it to work.

[DavideLimosani]

I don't think I'm explaining what I am trying to do very well. Essentially I want to completely replace the gray boxes (and arrows) so that when you click on the custom image it opens the panes.

I'm trying to copy what is done in a majority of the local government apps and put icons in the place of the gray buttons.

I've tried converting to a dijit.form.ToggleButton but couldn't get it to work.

I think that we said you how to completely replace the gray boxes (and arrows), but maybe you can post a local government app link
to be sure to understand you well?

[CraigMcDade]

Something similar to: http://localgovtemplates2.esri.com/electionpollingplace/

[DavideLimosani]

ok, that's not a titlepane! Title pane has the same width for header and pane. I suggest you to use dojo.fx.Toggler to achieve a similar result  http://dojotoolkit.org/reference-guide/1.8/dojo/fx/Toggler.html

post your code if you have problems

[AnkurVerma]

Hi,

I want to insert my image instead of titlepane default image, can i do it by modifying my div tag. I am trying the below code but this is not working for me. Could you please help me in this scenario. I don't want to do it by modifying my css

<div dojoType="dijit/TitlePane"  data-dojo-props="title: '<img src=images/6.0/newdropdown.jpg>';region: 'top'" id='feedContainer' style="width:100%;background:green;text-align:center" >