change background color of dijit.TitlePane

[BetsySchenck-Gardner]

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?

[TomSellsted]

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

[BetsySchenck-Gardner]

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

[TomSellsted]

Betsy,

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

Regards,

Tom

[TomSellsted]

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
  • Using the Console
  • Chrome Dev Tools
  • Introduction to Chrome Developer Tools, Part 1
• 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 ...

Regards,

Tom

[BetsySchenck-Gardner]

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

[TomSellsted]

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

[BetsySchenck-Gardner]

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.

[LuciHawkins]

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