topic Re: Custom font color suddenly not working in ArcGIS Hub Questions

Custom font color suddenly not working

MaryGraceMcClellan — Wed, 14 Aug 2024 17:22:34 GMT

I had an accordion item custom coded to have white text, but today out of nowhere the text turned grey. It isn't only the accordion items that this happened to - there are several other elements where the text is displaying gray rather than white and I'm not sure what could have caused it. Has anyone run into a similar issue?

Re: Custom font color suddenly not working

RohitSharma-1 — Wed, 14 Aug 2024 18:52:03 GMT

Hello @MaryGraceMcClellan - Could you please share the following information to help us replicate this issue:

Steps to reproduce this
URL (where this is being noticed)
Snapshots (if possible)

Re: Custom font color suddenly not working

MaryGraceMcClellan — Wed, 14 Aug 2024 20:10:54 GMT

Hi @RohitSharma-1 - the URL is here: https://westtnplanning.tn.gov/

It seems to be happening anywhere we have accordion items:

1. On the Project Information page (https://westtnplanning.tn.gov/pages/project-info😞

2. Planning documents page (https://westtnplanning.tn.gov/pages/planning-documents😞

There are other places this is happening, but here is the basic CSS we've been relying on the preserve the accordion formatting in #2. I don't see anything that has changed in the code:

Re: Custom font color suddenly not working

howardro — Wed, 14 Aug 2024 21:49:57 GMT

Try the following:

<calcite-accordion appearance="transparent" icon-position="start" scale="l" selection-mode="single" icon-type="chevron" calcite-hydrated=""> <calcite-accordion-item heading="Quarterly Updates" style="background-color:#8f2f31; color:#ffffff; border-bottom:1px solid #a6a6a6; --calcite-color-text-1:#fff; ;--calcite-color-text-2:#fff; --calcite-color-text-3:#fff;" calcite-hydrated=""> <div class="panel-body" style="background-color:#fff; color:#4c4c4c;"> <a href="https://westtnplanning.maps.arcgis.com/sharing/rest/content/items/87d74f2153924bde8555bd6ddf756bb5/data" target="_blank">2024 May Update</a></div> </calcite-accordion-item> </calcite-accordion>

Re: Custom font color suddenly not working

MaryGraceMcClellan — Thu, 15 Aug 2024 15:21:47 GMT

That worked perfectly, thank you!!

Re: Custom font color suddenly not working

RohitSharma-1 — Thu, 15 Aug 2024 15:33:33 GMT

@MaryGraceMcClellan - Do you have any additional questions?

Re: Custom font color suddenly not working

MaryGraceMcClellan — Tue, 27 Aug 2024 23:15:49 GMT

@RohitSharma-1 I don't, thank you for checking in!

Re: Custom font color suddenly not working

lmarun — Sun, 19 Jan 2025 22:13:03 GMT

@RohitSharma: I've been having the same challenge, but when I tried this solution, it did not work for me.

Please see screenshot for error code.

I should add that I previousy tried both methods here as well, but they did not work either.

Any thoughts?

Re: Custom font color suddenly not working

AaronKoelker — Wed, 19 Mar 2025 16:24:14 GMT

@RohitSharma-1 Hi Rohit, not sure if you are still with Esri but it would be really helpful if this solution replaced the information in this Esri "How To" article, which comes up as a top Google result: How To: Edit the Title, Text, and Chevron Colors of the Accordion Menus in ArcGIS Hub

Re: Custom font color suddenly not working

Blihack — Fri, 24 Oct 2025 15:17:18 GMT

@lmarun,

The updated stylings for accordion items can be found here: https://developers.arcgis.com/calcite-design-system/components/accordion-item/