Back to guides

Change the Button Color

AudioVisual
Hi everyone! In this video, I’m going to show you how to change the color of your UserWay widget.Woman wearing a UserWay shirt is speaking, her video is in a small box in the left corner of the screen. This box remains throughout the video.

A website appears in the main screen showing a site for a film producer. The website shows a menacing looking monster hovering over a man and woman.

You can see the widget on the top right of the site. It’s a nice blue, but if you want to change the color, I’m gonna show you how to do it.The cursor moves to hover over the UserWay icon.

The website image changes to show a group of superheroes.

Click on the widget.The cursor clicks on the widget.
And all the way down select “Manage.”The widget menu opens up and the cursor scrolls down to the Manage link and clicks on the link.
These are the widget settings.The widget settings menu appears showing many new options to click on. The website image changes to show a new group of superheroes standing and facing the camera.
So to change the color click on “Change the Button Color.”The cursor scrolls down to the “Change the Button Color” link and clicks on it.
Using this color picker, you can select your own color. I’m gonna get this nice green.The button color menu appears with a gradient and place to enter hex codes.

The cursor hovers over the green colors and clicks on one.

So to save the changes, I’m going to click on the hex code and press “Enter.”The cursor clicks next to the hex code. The website image changes to a man and woman standing in the rain surrounded by apes.
We’ve changed the color so now we can see how it looks on the site.The UserWay icon turns green.

The website image changes to show a group of animated aliens and an astronaut looking at the camera.

You can also add a gradient to the button. So up here enable the gradient.The cursor clicks on the “Enable Gradient” toggle and it turns green.

The website image changes to show an animated alien staring at his reflection in an astronaut’s helmet.

And use this second color picker, to choose your color.Another color picker appears and the cursor drags the color bar next to it to make the shades blue. Then the cursor clicks on the color picker to select a shade of blue.

The website image changes to show a man walking a dog and a woman standing nearby.

Same thing. Select hex code, and press “Enter” so you can see the changes.The cursor clicks on the box with the new hex code in it. The website image changes to show a menacing looking monster hovering over a man and woman.
Whenever you’re done, you have two options. You can select if you want to apply the changes just to the current site, or you can apply it to all your sites. I’m just going to apply it to the current site.The cursor hovers over the “Apply to all 10 sites” button.

The website image changes to show a new group of superheroes standing and facing the camera.

So click on the button.The cursor moves to the “Apply to this site” button and clicks.

The website image changes to show a cartoon house.

And we’re doneThe image does not change.
Just going to close the options.The cursor moves to the X on the top of the widget menu and clicks. The widget menu closes.
And that’s how you change the color of your button.The new, green gradient UserWay icon appears.

The website image changes to show a group of superheroes standing and facing the camera.

To learn how to customize your widget’s look and feel, enable white, label agency mode, and other upgrades, check out the links in the description below. Also don’t forget to subscribe!The website fades away and the woman speaking becomes the main image.

The woman finishes speaking and the video fades to black.

Explore UserWay’s Accessibility Widget