ExB Developer - apply custom color to Pop-up menu element

[Yuriko]

When a user clicks a spot with overlapping features, the pop-up panel that is triggered displays on the right-corner a 'feature-menu-button' and R/L arrows, indicating how many features overlap and prompting the user to click through to view their details.

I am using Experience Builder Developer 1.12.

I want to change the background-color of the 'esri-popup__feature-menu-button' to cyan to draw the user's eye to ensure overlapping features aren't overlooked. I think I can do this by creating a custom theme and adding a style.ts as described in this Sample Code, but I don't know where to find and identify the elements. Where do I begin? 

Thanks so much in advance!

The demo screenshot was made to the HTML page by adding 

[JeffreyThompson2]

You have answered your own question. Just add the css you want to the class you have already identified. You may need to add the !important tag to your changes.

[Yuriko]

Thanks for your quick response @JeffreyThompson2! But I'm at a loss as to how to first find the element class I want to apply the change to so I can properly identify it in the custom 'style.ts'. I am new to ExB Dev and don't understand the project structure in any detail. Can you provide a some guidance or point me to documentation that could enlighten me? In the meantime I'll dive into the ExB Developer documentation.

PS I just heard back from technical support and in addition to the guidance I've already linked above they shared the following: 

You can follow the steps in the guide for building a custom theme for Experience Builder.

Also, you can see the full theme variable JSON from the demo theme, for changing theme variables of existing themes.

Or, you can create a new theme.

You can also inspect the sample theme.

Thank you!

I'll report back once I've solved this!

[JeffreyThompson2 · Accepted solution]

https://www.w3schools.com/css/css_selectors.asp

You have already found the class name of the item you wish to change 'esri-popup__feature-menu-button', so in style.scss add:

.esri-popup__feature-menu-button {
    background-color: cyan;
}

You may need to use:

.esri-popup__feature-menu-button {
    background-color: cyan !important;
}

[Yuriko]

Thank you so much, @JeffreyThompson2! Going the route of adding the 'style.scss' was very straightforward!

I will leave the css-in-js approach to a rainy day. Thank you so much!

[Yuriko]

Note, in ExB Dev v1.13 there is extensive application of the Calcite Design Framework that encapsulates a lot of the UI elements which improves the integration but also makes it more challenging to access specific elements. e.g. the above solution doesn't work. 

[Marshal]

Any luck getting custom style overrides to work on ExB Dev 1.13?

[Marshal]

I had edited my original post, but wasn't sure if it would alert you of the edit.  Updating in a new post here instead.

I had success using a style.scss file in a custom theme to achieve this.  The concept is to overwrite the appropriate --calcite-color value on the closest targetable parent element.  It is a limited method, as there may be occasions where changing the closest targetable parent will undesirably change multiple elements.  Also, it does not target specific attributes inside the shadow-root.

In this example the "Select feature" button is using --calcite-color-foreground-1:

.esri-features__footer calcite-action[title='Select feature'] {
    --calcite-color-foreground-1: cyan !important;
}