topic ExB Developer - apply custom color to Pop-up menu element in ArcGIS Experience Builder Questions

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

Yuriko — Fri, 20 Oct 2023 20:29:55 GMT

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

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

JeffreyThompson2 — Fri, 20 Oct 2023 20:39:22 GMT

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.

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

Yuriko — Fri, 20 Oct 2023 23:35:24 GMT

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!

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

JeffreyThompson2 — Mon, 23 Oct 2023 12:37:44 GMT

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

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

Yuriko — Mon, 23 Oct 2023 21:25:42 GMT

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!

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

Yuriko — Thu, 14 Dec 2023 16:36:24 GMT

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.

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

Marshal — Wed, 19 Jun 2024 13:24:35 GMT

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

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

Marshal — Wed, 19 Jun 2024 13:25:16 GMT

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