topic Re: Custom dijit.TitlePane icon? in ArcGIS JavaScript Maps SDK Questions

Custom dijit.TitlePane icon?

CraigMcDade — Fri, 07 Sep 2012 14:13:39 GMT

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"

Re: Custom dijit.TitlePane icon?

DavideLimosani — Sat, 11 Dec 2021 20:39:14 GMT

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");
}

Re: Custom dijit.TitlePane icon?

CraigMcDade — Fri, 07 Sep 2012 14:43:47 GMT

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

Re: Custom dijit.TitlePane icon?

DavideLimosani — Sat, 11 Dec 2021 20:39:17 GMT

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.

Re: Custom dijit.TitlePane icon?

KellyHutchins — Fri, 07 Sep 2012 15:08:29 GMT

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;
}

Re: Custom dijit.TitlePane icon?

CraigMcDade — Fri, 07 Sep 2012 16:04:34 GMT

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.

Re: Custom dijit.TitlePane icon?

DavideLimosani — Fri, 07 Sep 2012 16:28:47 GMT

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?

Re: Custom dijit.TitlePane icon?

CraigMcDade — Fri, 07 Sep 2012 16:30:51 GMT

Re: Custom dijit.TitlePane icon?

DavideLimosani — Fri, 07 Sep 2012 16:49:47 GMT

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

Re: Custom dijit.TitlePane icon?

AnkurVerma — Wed, 19 Dec 2012 16:20:23 GMT

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" >

Re: Custom dijit.TitlePane icon?

CraigMcDade — Sat, 11 Dec 2021 20:39:19 GMT

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" >

I wound up using dojo.fx to get the look I was going for. A sample from my app is below. Regardless, you'll probably have to tweak the CSS a bit.
JS:

//Toggles
function basemapToggle() {
    toggler = new dojo.fx.Toggler({
        node: "basemaptoggle",
        showFunc: dojo.fx.wipeIn,
        showDuration: 1000,
        hideDuration: 1000,
        hideFunc: dojo.fx.wipeOut
    })
}
dojo.addOnLoad(basemapToggle);

HTML:

<div id="basemapbutton">
     <button dojoType="dijit.form.Button" baseClass="tomButton" title="Switch Basemap">    
      <img src="images/imgBaseMap.png"/>     
       <script type="dojo/method" event="onClick">   
        toggler[(dojo.style("basemaptoggle","display") == "none") ? 'show':'hide']();
       </script>
     </button>   
      <div id="basemaptoggle" dojoType="dijit.layout.ContentPane" style="#900;display: none;">
       <div id="basemapGallery">
       </div>
      </div>
    </div>