I have been scouring the dojo sites, css sites, etc. I cannot find out where to set the text color properties of the Accordion Title text as seen in the image. I cannot seem to find where to set the Title of the Content Pane???? Thoughts? div data - dojo - type = "dijit.layout.ContentPane" data - dojo - props = "region:'left'" class = "shadow" id = "leftPane" > div id = "IDAccordionPane" data - dojo - type = "dijit.layout.AccordionContainer" style = "color:black;" > ! -- 1st PANEL -- > div id = "idLayers" data - dojo - type = "dijit.layout.ContentPane" data - dojo - props = "title:'Legend'" > div data - dojo - type = "dijit/layout/ContentPane" data - dojo - props = "title:'Natural Disasters'" > / div > / div > ! -- 2nd PANEL -- > div id = "idLegend" data - dojo - type = "dijit.layout.ContentPane" data - dojo - props = "title:'Tools'" style = "color:black;" > / div > // snip

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 Color of Content pane window in Accordion

jaykapalczynski

I have been scouring the dojo sites, css sites, etc. I cannot find out where to set the text color properties of the Accordion Title text as seen in the image.

I cannot seem to find where to set the Title of the Content Pane????

Thoughts?

<SPAN class="operator token"><</SPAN>div data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit.layout.ContentPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"region:'left'"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"shadow"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"leftPane"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"IDAccordionPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit.layout.AccordionContainer"</SPAN> style<SPAN class="operator token">=</SPAN><SPAN class="string token">"color:black;"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> 1st PANEL <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"idLayers"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit.layout.ContentPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"title:'Legend'"</SPAN> <SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>div data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/ContentPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"title:'Natural Disasters'"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN><SPAN class="operator token">--</SPAN> 2nd PANEL <SPAN class="operator token">--</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"idLegend"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit.layout.ContentPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"title:'Tools'"</SPAN> style<SPAN class="operator token">=</SPAN><SPAN class="string token">"color:black;"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>

<SPAN class="comment token">// snip‍‍‍‍‍‍‍‍‍‍‍‍</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Find more posts tagged with

Accepted answers

kenbuja

If you use the Developer Tools, you can examine each element and the css rules that affect it. You can also modify the rules to see how it looks. You can override the .claro .dijitAccordionTitle color rule to change the text color in the closed tabs. To change the text color of the selected tab, you also have to override the .dijitAccordionInnerContainerSelected rule.

Here's an example: JS Bin - Collaborative JavaScript Debugging

All comments

jaykapalczynski

Yea tried that...maybe missed one or two...figured it would work that way...

I simply switched to Claro and changed the references...

kenbuja

You have to change all references to claro to nihilo

JS Bin - Collaborative JavaScript Debugging

jaykapalczynski

Thanks....tried it with the "nihilo" and does not seem to work but have it working in the "claro"

kenbuja

Here's an example: JS Bin - Collaborative JavaScript Debugging

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.