nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

Find more posts tagged with

Accepted answers

All comments

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

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.

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.