Select to view content in your preferred language

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

887
7
Jump to solution
10-20-2023 01:29 PM
Labels (1)
Yuhash
by
Occasional Contributor

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!

hashimotoy2_0-1697831288663.png

The demo screenshot was made to the HTML page by adding 

hashimotoy2_1-1697833299129.png

 

 

0 Kudos
1 Solution

Accepted Solutions
JeffreyThompson2
MVP Regular Contributor

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;
}
GIS Developer
City of Arlington, Texas

View solution in original post

7 Replies
JeffreyThompson2
MVP Regular Contributor

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.

GIS Developer
City of Arlington, Texas
0 Kudos
Yuhash
by
Occasional Contributor

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!

0 Kudos
JeffreyThompson2
MVP Regular Contributor

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;
}
GIS Developer
City of Arlington, Texas
Yuhash
by
Occasional Contributor

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!

0 Kudos
Yuhash
by
Occasional Contributor

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. 

0 Kudos
Marshal
New Contributor III

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

0 Kudos
Marshal
New Contributor III

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

 

0 Kudos