Select to view content in your preferred language

Custom Widget Button & Widget Title Bar Colors in Experience Builder (Brand new user here XD)

4270
1
10-10-2023 11:52 AM
hherrmann_coj
Regular Contributor

Hello all.

After attending one of our state GIS conferences a couple of weeks ago, I learned the retirement dates for WebAppBuilder and also learned that all of our existing apps will have to be rebuilt with Experience Builder.  I've been excited to try Experience Builder because I have a fair bit of illustrative software background but since I'm newish and kind of fumbling around as I go, I'm sure I'll have questions and hope some of you that were braver to try it before me, may be able to help along the way.

I am working on recreating one of our public web map applications that gets hit a lot on our website.  I figured it would be a great one to start with since it's a pretty straight forward app.  

My trouble currently is that I haven't figure out a way to change the color of the button backgrounds in the widget controller (I did start with a theme but would like to use branded city colors), or the top bars of items such as the Map Layers and Map Legends title bars.  I click on them in the left toolbar to activate them but in the style tab, I only see an option to change border color and box shadow. 

Has anyone figured out a way to change the widget button background colors and the title bar color of the widgets once they are opened?

I added a couple of screenshots that hopefully explain better what I'm trying to accomplish.

0 Kudos
1 Reply
JeffreyThompson2
MVP Frequent Contributor

A few ways to do this:

Method #1: Edit the theme.

In the theme panel, go to Customize.

JeffreyThompson2_0-1696964697332.png

Change the Primary color to the color of your choice. There are many online tools for finding hex codes and RGB values.

JeffreyThompson2_1-1696964889077.png

Method #2: Edit the Widget Controller.

In the Widget Controller settings, go to Advanced and set the color as desired. You can choose different colors for default, selected and hover, so the button will react to user interaction. (I don't think it is possible to set the color of title bars this way. They inherit from the Primary theme color.)

JeffreyThompson2_2-1696965109291.png

Method #3: Build your own theme.

If you are going to do any customization beyond what is possible in the builder mode, you will need to convert to Developer Edition. Then you can build your own theme and write your own css for full control over your application.

 

GIS Developer
City of Arlington, Texas
0 Kudos