Select to view content in your preferred language

Changing the color of the collapse button

1290
6
07-07-2021 03:42 PM
Labels (1)
garmendariz
New Contributor II

I'm trying to make the collapse button in a sidebar be more prominent. Is there a way to change the color of the collapse button or replace it with an image? 

6 Replies
DaveFullerton1
New Contributor II

DaveFullerton1_0-1625714111793.png

 

garmendariz
New Contributor II

Thanks Dave. I did see those options. I was just wondering if there was a way to change the color of the button that I had missed. 

0 Kudos
JonathanMcDougall
Occasional Contributor III

@garmendariz 

I really should check first before replying, however, changing the colour palette may change the indicator colour.
(Now off to check)

0 Kudos
DaveFullerton1
New Contributor II

@garmendariz I thought you hadn't seen these settings and were taking stabs at ideas for ways it might be done.  Perhaps you should submit an Idea to enhance:  https://community.esri.com/t5/arcgis-experience-builder-ideas/idb-p/arcgis-experience-builder-ideas 

0 Kudos
UalasRohrer
New Contributor III

Yes, you can. Just open ArcGISExperienceBuilder/server/public/apps/19/resources/config/config.json and ArcGISExperienceBuilder/server/public/apps/19/config.json, search for "widgets/layout/sidebar/" until you find your sidebar config. Change your expandStyle and collapseStyle with your customized CSS. Find below my example that makes the background transparent.

 

 

          "expandStyle": {
            "style": {
              "borderRadius": "92px 92px 0 0",
              "border-color": "transparent",
              "background": "transparent",
              "padding-right": "180px"
            }
          },
          "collapseStyle": {
            "style": {
              "borderRadius": "92px 92px 0 0",
              "border-color": "transparent",
              "background": "transparent",
              "padding-right": "180px"
            }
          }
        },

 

 
0 Kudos
TonghuiMing
Esri Regular Contributor

@garmendariz Starting from AGOL 10.1 (dev1.8), the customization of the sidebar button has been provided:

TonghuiMing_0-1657867417208.png

Note that since this button is directional and needs to flip on action change, the OOTB-provided selection is limited and you could not replace it with an image.

0 Kudos