Color Control of Badges

Video Transcript

Hey Scott Austin here in this video we're going to go over colors in Badgezilla.

And controlling color is really important to match the badges to your brand. So here if we look at the Bed Zilla demo website, you'll see that the colors of the website are also reflected in the badges, and therefore they feel cohesive.

In the default settings under bed. So if you go to the settings tab we have five color controls. And let's explain each of those for you. So the first text one is obviously the text here. And it's also the warning icon and the star icon. Everything that occurs in that ring. Now the text background is that ring underneath the text.

The background is both the center that's over the icon, the background under the icon, and whatever shape you pick to be on the outside. So right now we have scallop selected. But if you select Circle or Starburst, they all get that same background color. Now the icon is for the icon here. And then some icons don't actually have color control. And that's using the flag ones where no matter what you adjust up here, it's still going to be the same color or inside of the icon area. And then we have the icon accent which is a secondary color. Not many badges have an icon accent, but some of them do. And here you can see the icon accent.

Now let's talk about the backgrounds for a little bit because it's important to understand how they're layered. So right now this circle in the middle underneath the icon this is layered on top of a full circle. That is this text background. And that is layered on top of a full element which is the scalloped background. So the reason that becomes important to understand is if you want to, for example, get rid of your text background and you say remove color, you'll see that we got rid of that color, but the color underneath the background color, because that scallop shape is a full element.

That scallop shape color shows up. Now, let's say you want to do the opposite and want to get rid of your background color.

You'll see that the text background is a full circle. So it also becomes the background color for your icon. But you can also get rid of the text background color and have a really minimalistic look here. And you know, to continue that minimalistic look, let's do this. You know, make everything, black except for the icon accent. We'll make that a light gray like that.

So you have a lot of control with these color controls. You find different color controls on what your badges look like. You can make it black and white very minimalistic. Or you can just, you know, go over the top with color, like we're going to do here, just randomly picking things. It probably won't look good at all, but you'll get the idea of what we're trying to do.

So that gives you a feel for how much control you have over color with these five settings. The really cool thing here is we actually have more than five settings. So if we go down under our settings tab, again down to the App Settings Advanced Features and expand that, you'll see we have an enabled advanced features and we click on that.

What happens is we get two more color controls up here. And we also get this select region to color. So I just explain what each one of these does. But if you don't remember what you can just click on this. And then if you just select you hover over down here any element. So if I hover over the icon it brings up the icon color.

So it's an easier way to remember what each one of these does and turn that off for now. And now we're going to talk about the two new colors we had added on. So those are the star icon. So let's just make our stars a gold color. And they're not going to show up that well on the light tan.

So let's see if we can get a little bit darker.  You know get some contrast issues there. But you can see the the control I've got there. And then the warning icon let's go to a red for that.

So you can see here is the warning icon. And here is the star icon.

And as you can see, you can play with them until you get it to look the way that you want it to look for your brand. So now you have seven color controls. If you're using the advanced features. All right.

Thanks for watching.