topic Re: change background color of dijit.TitlePane in ArcGIS JavaScript Maps SDK Questions

change background color of dijit.TitlePane

BetsySchenck-Gardner — Wed, 29 Apr 2015 15:33:07 GMT

I'm trying to change the background color on the title section of a dijit.TitlePane. I've been able to change the text color and size but I can't find how to alter the background color of just the title part of the dijit.TitlePane. I've tried altering the css for the title pane by using the following commands:
.dijitTitlePaneTitle { background-color: black ; }

That had no effect. Can anyone guide me in the right direction?

Re: change background color of dijit.TitlePane

TomSellsted — Wed, 29 Apr 2015 15:53:38 GMT

Betsy,

Yes! it is .dijitDialogTitleBar. Just set the background color and you should be good to go.

I always right mouse click on an element I am interested in on the web page and inspect element. You can see the css attributed to that element.

Regards,

Tom

Re: change background color of dijit.TitlePane

BetsySchenck-Gardner — Wed, 29 Apr 2015 16:10:25 GMT

That didn't work. It's declared as a dijit.TitlePane not a dijit.Dialog.

Re: change background color of dijit.TitlePane

TomSellsted — Wed, 29 Apr 2015 16:14:37 GMT

Betsy,

Did you try inspecting the element as it is displayed? That should help by giving you specific information about it.

Regards,

Tom

Re: change background color of dijit.TitlePane

TomSellsted — Wed, 29 Apr 2015 16:56:46 GMT

Betsy,

Here are some links to some tools to help you with working on your app. I have used all of them, but have been working with Chrome lately.

Firefox
- Firefox Developer Tools > Debugging > Web Console
- Debugging JavaScript
Chrome
Internet Explorer
- Using the F12 developer tools
- Inspect running JavaScript with the Debugger

I found this on this geonet link: Developing Web Apps with ArcGIS API for JavaScript / Building Applications Using the ArcGIS API for JavaScript Resources

Regards,

Tom

Re: change background color of dijit.TitlePane

BetsySchenck-Gardner — Wed, 29 Apr 2015 17:27:23 GMT

After digging through the element, I finally found how to change the background color of the title section. Thanks for your help Tom.

Re: change background color of dijit.TitlePane

TomSellsted — Wed, 29 Apr 2015 17:30:26 GMT

Betsy,

Excellent! Glad you found it. Could you please post the result as someone else may be researching the same problem and would benefit by your answer?

Thanks very much!

Regards,

Tom

Re: change background color of dijit.TitlePane

LuciHawkins — Wed, 29 Apr 2015 17:38:39 GMT

If you are using the claro css, you can change the background color using css. If you are using a different one than claro, just substitute that name in the syntax below.

claro .dijitTitlePaneTitle {

background-color: #C0C0C0;

}

Luci

Re: change background color of dijit.TitlePane

BetsySchenck-Gardner — Wed, 29 Apr 2015 20:36:55 GMT

The solution that worked for me was adding the following:

.tundra .dijitTitlePaneTitle {

background: #ffff00 !important;

}

Thanks for all the helpful hints. Using background as the declaration vs background-color solved my problem.