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

Custom font color suddenly not working

MaryGraceMcClellan

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?

Find more posts tagged with

discussions

Accepted answers

howardro

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>

All comments

AaronKoelker

@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

MaryGraceMcClellan

That worked perfectly, thank you!!

howardro

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>

MaryGraceMcClellan

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:

  <style>
    body * {
      --calcite-ui-text-1: #ffffff;
      --calcite-ui-text-2: #ffffff;
      --calcite-ui-text-3: #ffffff;
       .accordionButton {
    margin: 0px auto;
 }

  </style>

<div class="col-xs-15" style="width:70%">
          <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-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>
      </div>

RohitSharma-1

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)

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.