Brizy Cloud 101

Lesson 14

Colors And Global Styling

In this video we’re going to touch upon colours and global styling, so first of all, let’s take a look at the controls we have to manage colours. Let’s use this button as a starting point. If we select it from the context menu, we’ve got the option for the colour chip. If we click to open that up, we now get all the controls we need over colours. Let’s just take a quick look now at how this panel works.

If we take a look at the top, we can control the background, the text, the border and the shadow each one of these has a very similar looking panel that allows us to customise each of these different aspects based upon the type of element we have selected. Next, in the main area, we have the ability to choose any of the shades of color that we have chosen. If we move to the right hand side of that, we’ve then got our color picker. We can simply use this to pick our base color and then fine tune this based upon the main color area. Next, we have the option to deal with opacity, so we can use this to adjust how opaque or how solid the colour actually is.

As you can see, as we scroll up, we get a real-time preview of any of the alterations that we make. Next, we’ve got this color chip, which allows us to choose any of the predefined colours that we have set up globally and we’ll take a little bit more detail looking at global colors in a moment. Next, to that, we’ve got the option to switch between solid and gradients, so at the moment we’re looking at the solid options. If we choose this and select gradient, you can see. This now opens up some additional options.

We now have a gradient bar at the top. We’ve got our starting colour on the left and our finishing color on the right. We can easily choose either the start or the end color, and then we can choose those from either the color chip using our color picker or we can use any of our predefined global colors. For example, let’s choose this lighter color and you can see that now gives us a gradient effect. We can adjust these by positioning those where we want to affect the overall gradient.

Very, very easy to work with. We’ve also got the option to switch between two different types of gradients. At the moment this is set to linear, but we can change this over to radial. If we want to – and you can see that now gives a radial effect, switching back to linear you can see, we can also adjust the actual angle, that’s being used for the gradient. Let’s just set this to 180 degrees, and you see now we get a different type of gradient effect go from top to bottom, instead of from left to right.

If you want to insert any specific color, we can drop in a hexadecimal value directly inside this section. So you can easily add in your own custom colors for now. Let’s switch this back to be in a solid color and let’s take a look at the other option. We have, on the left hand side. This allows us to control the hover state for our button.

So all we need to do is select this and again we get full control of the background text, border and shadows. We can use any of the color options. We can just also go in choose specific colors if we want to drop those in there or use any of our global colors. For this example, let’s choose this light green color and we’ll find now that we hover over our button. It switches from blue to green there’s our hover effect, in effect, so now that we’ve seen how we can deal with colors on an individual element basis.

Let’s take a look at global styling of colors. Let’s clear this layout, let’s go ahead and add in an entire design, so we’re going to switch over to layouts and we’re going to find a layout that we, like the look of let’s go with this one, we’ll open up, which is to replace the global styling And we’ll pull in the home page, so we’ll import this layout and you see there’s our layout been pulled in all the colors and everything are now in place, typography everything. So now, if we switch over to the color options, on the left hand side, this allows us to affect the styling. Now, at the moment you can see, we’ve got the current style is set to be farm and underneath you can see they’re all the colors that are being used in a specific design, alongside all the typography that’s being used and we’ll cover typography in a different video. What we can do now is we can easily come in and change the style of this and affect this globally, so, in other words, every location in this design on this particular page that uses a specific color.

That’s part of the current style we have selected can be updated. So let’s just change this from something like the farm to overpass, and you can see now that changes the typography as well as all the colors, so buttons have become green. Our text has become green. Various different elements of our design: we can do that again by choosing something completely different: let’s try action and again you can see all those colors are updated. We can also come in and choose any of these color chips and make a change inside there.

So, for example, we’ve got this burgundy colors, using on the buttons and so on. We can select that and we have a simplified color picker inside you. We can choose our shades, our colors and also a specific color using a hexadecimal volume. Let’s go ahead and just change this to something completely different. Let’s say we’re going to go for something like this blue color.

You can see now that once I change that everywhere inside this design that references that original color that’s now been changed is updated inside our design. So button is now blue. The text, our quote and so on, has all become blue. So it’s a really quick way of making global changes to your design by either choosing a current style. Updating the styles inside you or creating your own custom styles.