Changing the color of the collapse button

[garmendariz]

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? 

[DaveFullerton1]

[garmendariz]

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. 

[JonathanMcDougall]

@garmendariz 

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

[DaveFullerton1]

@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 

[UalasRohrer]

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"
            }
          }
        },

[TonghuiMing]

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

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.