 Hi, today we'll show how to customize the button. So first of all, let's get back to our theme. So let's open Dolphin, go to .localshareplasma desktop theme, as always, and go to the Sonia folder and then the widgets. Now this is where we'll put our button SVG. To actually get our button SVG started, do not create one from scratch. It is impossible. Go to slash usrshareplasma desktop theme, then default widgets and search for the button .svg. Take this one as a reference. So let's copy it and then paste it into our folder. And voila, we have our button. So let's see how to customize it. So let's open it and see what it is inside. So we have a lot of elements to customize. So first of all, let me say that there are two kinds of buttons in the Plasma world. So if we open up the vaults section, I don't know, but Plasma today is a bit laggy for me. We see that there are two kinds of buttons. The tool button one, which is this one on the top, and the actual button which looks broken right now because I was messing with it, but it looks like this. If we open up system settings and get back to normal breeze in the Plasma style section, let's get back to breeze. We'll see that the button looks normal to say the least like this. So normal button and tool button, which is the one without a background. So we can see here that there are four columns and five types, let's say. So the first column is about a mask. We've seen the mask before and the concept of mask is that when the compositor does compositing, you know, it knows the boundaries of the button background that we've defined. So the mask should always be black and the same size and shape as the actual background. We also have one for the focus, which again should be same size and shape to the background. Then we actually have the background property, which only applies to the focused button. And basically what it does, it redefines the background appearance of a button that's been focused. So if we go to the votes section, we can tap until our button is focused. And as you can see, it changes completely, it becomes blue. And that's because we change the background. Then we have the default. The default is the appearance of the default button. So we can see that we have the shadow, the background when it's hovered. So if we, sorry, I'll keep the applet open this time. If we hover, we can see that there's a blue outline, which is defined here. If we focus it, we can see that it gets a blue background, but also a blue outline. And when it's pressed, we can see that the background becomes blue. So we can try this out. And as you can see, it becomes indeed blue. Then we also have the tool button, which is the last one, which defines the shape and the look of these two buttons on the top. So as you can see, there's no background, indeed there's no background. There's a blue outline when it's hovered like this, a blue darker outline when it's focused. So like this, you can see that there's a darker blue line around it. And then when it's pressed, it actually becomes all blue like this or, you know, like this one. So let's actually try to see how to customize all of these properties. So let's start up by reading the notes that we have put here. The first note says, some margins in have 0.001 width or height because you can't use exactly zero. As an example, we have the shadow. Let's look at the shadow one second. So we have a one pixel right and bottom margins that defines that basically they say that the shadow is one pixel in width and height only on the bottom and right parts. On the left and on the top, the button actually does not have at all any shadow. So the margin are here and as you can see, they're 0.00 in this case height and in this case 0.001 width. So they can't be exactly zero. So they are a bit more, but if we decide that we do want top and left shadow, we can change the height to be one or even more if you want a bigger shadow and same year the width can be one. So now we do have a shadow all around, but we actually need to define the shadow. So let's open up the rectangle and let's say that I do want a green rectangle, sorry about the black stroke. A green rectangle has the left shadow, which is totally fine of this size. And then same for the top one, so like this. So now it's important to see that these two elements have to be named shadow top and shadow left. However, this element is already called shadow top and this one is already called shadow left. So what we can do is first of all take off this name by inserting random stuff like this and then like this and then go to these two and group them together, so they are together and same year together and then give to the whole group the name shadow top like this and here shadow left. Today I can type properly. Okay, so now we have shadow left, shadow top, shadow right and shadow bottom, which is pretty symmetric. So if you go to system settings and switch back to the sony theme, it takes a bit to take effect, but after that we can go to the walls applet and we'll see that our shadow is indeed green on the left and top sides. Now we could do exactly the same thing for the bottom left, bottom right, top right and top left shadows, but for now let's just skip these ones. Now I will also demonstrate what if you want a bigger shadow. So let's take this one and make it three pixels of height and width, like this, okay, sorry, like this, I need to edit it pixel by pixel. Okay, so now it's three pixels. We can also change this element to be three pixels of height and width, like this and like this and given that we are working on a shadow, we can also give this a gradient. So in fill and stroke, let's give it a gradient. This looks just fine. And then here as well, a gradient from top to bottom, like this. Now let's get back to system settings, switch to another theme and then back to Sonia to see what worked and what didn't. Let's go to the volts applet and we'll see that we have indeed a bigger shadow on the bottom and on the right that actually looks more like a shadow. But breeze is a bit minimalistic when it's about shadows of small components. So it only use one pixel shadow by default. So now we can switch to the actual normal appearance of the button, of the normal button, not the tool button. You cannot actually customize the background of a tool button because the tool button is supposed to not have any background at all. So if we get to the normal button, we can see in the objects section that we have two elements, one of which is a small, let's say small, not very, very transparent, let's say very transparent object and then a path under it. So we are more interested in the opaque path. So let's change its color. Let's make it a gradient that goes from red to transparent like this. But if you do want this to work, you need to go to edit and click on XML editor, which will pop up here, then click on the, well, not click, but it will be selected already the path you are working on. And in here, you will see that we have this rule field, current color and class color scheme button background. What it says is something that will look more into it later. But basically it says take the color from the color scheme of the color of the button and then apply it as a field. Now if you do want to customize the field of this button, we need to take this off. So just click on the trash bin and then we can get back to actually defining the background. Then when we're done, we can get back to settings, switch to painting and then back to Sonia to see if it's worked. And it did. We do have a background that's a gradient. So we managed to customize the background. Now remember to do the same when you're editing like this one. If you want to edit the color of the outline, go to objects, make sure to select the correct rectangle, which in this case is this one, as you can see. And then go to XML editor, tick off fill and class. Then back to fill and stroke, define your own stroke. As an example, let's make it from red to green like this, but let's say a bit more opaque if we want like this. And then we can see that this will work. But always make sure to go to the XML editor and tick off the fill and class sections, which is super nice and everything. We can see that it is indeed working in ear walls like this. We can see that the bottom is a repetition of our gradient from red to green. And then we can get back to our SVG and start customizing the hover. So let me say one thing first. It's obvious, but let's say it, these margins, purple margins define the margin between the content of the button and the actual outline around it. So if we take this and make them much smaller, like this as an example, of course the whole button will become much smaller because the margin between the content, which is always the same size and the outline of the button will decrease. So let's actually test this theory out. And now it looks like this. I don't honestly remember if this looks smaller than before, but it should. Now let's get back to our hover. And actually, let me say one more thing about this green rectangle, which you should put regardless of what you're doing. This is normal in compose over border. So what this saying is to the composer, please compose over the actual border of the buttons so all over here. And you always should have this. Don't take this off. Then the over category, which is, you know, the over stuff. And we have this element. And if we go select here, you can actually see that in here, there's another margin element that's 0.001 in height. And what this basically does is say that the negative margin, because if we go here and read this note, shadow over and focus, not focus background, use negative margins. This behavior, blah, blah, blah. So basically what this is saying is that if this margin was not zero, so something like, I don't know, two, this would look in the button. Let's go here. Not on top of the button, but actually two pixels inside of it. So the more margin you put here, the more inside of the button, the outline for the hover element will be. So it does make sense to keep it at zero because we do not want the outline to be inside of the button. So we can actually, again, change the background of the button, sorry, the line around the button when it's hovered, but always make sure in the XML editor that you do not have this fill, current color and class properties. So let's take them off. It will become black. This is normal. And then just put another fill. Let's go with purple-ish one. So again, take this off fill and class, year fill and class, and then year fill and class, sorry, I removed something I shouldn't, and class. And then just select them and give them this purple-ish color like this. Two purple-ish. Let's select them again, solid color, like this. So if we save, again, reset the theme. And the button is indeed smaller now. It took a bit to take effect. And if we do hover it, we can see that the outline instead of being blue is actually purple. If you do want your element here to be larger than one pixel, so let's say two pixels, this is three pixels and the same idea, you now have to ask yourself, how much of these three pixels should be outside the button? Because if all three should be inside of the button, then that's fine. This is what, sorry, I want to say outside. If you want these three pixels to be outside the button, then this is fine. But if you want some of these pixels to be inside of the button, then you have to change the size of the margin, sorry, the margin here, because it's a negative margin. We can also change the same thing for the tool button hover, which, again, is when you hover a button that's happier. And we can see that we could change it just like we've done before by selecting it, going to XML editor, taking off field class, but let's actually not edit it. And just let me explain how do the margin work here. You have four margins that define the distance between the outline and the content. So if you put very, very big margins here, sorry, like this, like this, like this, and like this, and then actually go to see how changed. What we'll see is that when you hover the button, the outline will be very distant from the center. And this is because we made the margin much bigger. So then we can move on into the focus section, which is, again, when you tap into that button. So again, we have the mask, we have a new background. So let's make this one, I don't know, again, selecting the right element, which is the path, and then in the XML editor, removing the field and the class, also the field rule. Why not? It shouldn't be here. And then again, again, a radial gradient, let's say this time from purple to yellow, like this, beautiful. So if we do this and then change the theme, we'll see that by tapping into the button in the volts as an example, it will become purple to yellow, like this. So we can see that these margins define the, let's say, that take place instead of these margins. So if you have a different size in margins from here, like we do, the size of the actual button will change if you focus it. So as you can see, if we go back to volts, now the button is small, but if we focus it, it will become bigger. So there's also the possibility to define an outline. And in this case, you can see that there is actually a one pixel margin. Again remember that this margin is negative, which means that whereas this lighter blue outline is outside the button, the darker blue one is inside of the button. Then if you want to edit these, then go to objects, select the right one, which could be this one or this one. And then XML and remove, fill and class. And then put your own paint, like green as an example. You can do the same for this tool button one. And then finally, we have depressed, I will not say and customize every single thing, because otherwise it would take hours, sorry about that. And then we have the pressed version, which is when you actually press the button. And again, we do have the margins that will replace this margin here. So make sure maybe that they are the same size of these ones, otherwise the button will change in size. And then you can customize the background by selecting the element, going to XML, removing fill and class. And then putting your own, like, I don't know, let's make it, okay, red. And then same thing for the tool button, which is this one. Again, these margins define the distance from the outside of the button and the inside. So if we make them super big like this, what will happen is that the back turn will be super big when you actually press on it. And then let's also make this one not current color, but red, because today I like red. And that's enough of a justification, like, sorry, like this. This is red enough for me. So now we can go into the vaults and see what changed. We have the tool button. When it's clicked, it becomes smaller because somehow the margin didn't take yet effect. Sometimes they take one to two restarts of the theme before they take effect, but it does become red. And then the actual button indeed becomes red again. So this is how you customize the button. Also, you have these ints that are almost the same as before. We have int compose over border, which you should leave alone, and then focus highlighted background. What this says is basically you actually have a background. If you do not have a background for the focused button as an example like this, then you can actually take this off and everything will work. Of course, the normal button will only have the outline and not a different background when you change it. And then again, this one is composed over border, which you should leave alone. So this is basically how you customize the button. It's quite hard and it's normal if you don't get to write the first time. This is actually the third time I'm trying to record this video because all the other times I got into troubles. But if you actually have some troubles implementing them, feel free to come to me and ask me via email or message something. I will try my best to answer it. See you next time with a new SVG. This will be super fun.