Changing the color of the collapse button

Question

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?

TonghuiMing · Answer

@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.

UalasRohrer · Answer

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

JonathanMcDougall · Answer

@garmendariz

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