 Hi everyone today, we'll see how to do a couple of more widgets of our sonar theme first of all Let me say that if we go to slash usr slash share Slash plasma slash desktop thing We have the default desktop themes that come in your system and we have the default one which is breeze and If we go to the widgets section, we can see all of the widgets that we should do to our Theme we can use this as a reference in doing hours as an example if we pull up tasks Dot SVG that we worked on last week We can see that we have here all the objects and then if we pull up Tasks dot SVG in the breeze theme. You can see that we have many more objects So what is that? Well, what I didn't see last week is that you can customize how the task manager will look depending on the position of the panel either the panel being on the bottom on the top on the left and on the right by adding a east west north and south Prefixes I will not do this on camera because it will take too long. However, let me also notice that there is This element which is called hover Which is actually missing in our SVG that is because I completely forgot about it So we should add that one The hover prefix is used when an application is hovered in the task manager. So it's pretty important Let's copy paste something that we've already done and then change the color I'll go with I don't know purple Now orange how we should again go to the object properties and set all the IDs again to be over Dot top left and so on nice Let's check if this is working by switching to another team and then back to Sonia As you can see when you hover a task manager item the color goes from red to orange However, there seem to be a bug in the corners. So let's go back to the SVG and check what I've done wrong You can see here that I did not write bottom left However, this one already exists because I accidentally said left here, although it's right. Let's try again And now it's perfect So we are done with tasks.svg. Let's go ahead and work on plasmid heading.svg So let's take this one and again copy paste it into a new name plasmid heading Let's open it here And then also as a reference, let's open it here So first of all, let's see how it is done in the bridge theme. We can see that we have Header element and a footer element the header element also has four hint Margin around it whilst the footer hasn't the header element Which you can see whoops If we open up again the bridge theme We can see them here. They have a bottom Separator, which is this one whilst the footer has a top separator, which is this one So we need to do something similar. We need two elements One for the heather and one for the footer. So let's look into it We only need two elements. So let's delete everything else and The top the bottom part for the heather and the top part from the footer Shall not be rounded So let's actually take them off for now. Now, let's do a bottom separator for the heather, which shall be Gray Be aware when you're adding an element to a group you need to first of all double-click the group and then Draw the element. Otherwise, it will not belong to the bottom left or bottom right group Also, I will change the lighting to be a bit more on the top It's not perfect, but I like it. So now to do the footer I'll just take what I have just done and copy paste it to the right and then using the flip option And flip it. I will then color it back to a color that I like more such as purple this time for real Very nice. Now we need to select all the elements and set the appropriate ID They will be over instead of normal for this one and then footer for this one Very nice. Now, let's pull up the themes and set Sonia and see if it worked As you can see, it's absolutely beautiful. We have our heading up here and the footer down here We can also see them in the media applet Heather and footer. That is perfect. Actually, it's almost perfect. I can see that the borders do seem to be a bit less transparent But that might be not actually a bug that I've done in the SVG, but rather the fact that I've done it actually a bit more transparent in the SVG, especially on the borders So by stretching them, it's more noticeable. So I not consider it a bug for now Oh, and I almost forgot that we also have to implement the margins These four margins are actually from the dialogue SVG that we can find as an example in transparent. So let's go fetch it and Then we can simply copy this four open up Deplasmid heading and paste them right onto it So let's now go back to the theme selector, select another one and then back to Sonia Yes A little tip when you're dealing with margins and stuff like that It's always a good idea to go rm.kx-kd star Be aware not to put any space between kd and star. Otherwise You're that and then switch to another theme and then just for sure Delete cake again. Fine get back to Sonia and Then we can see that The cake is updated The look is always the same because in this case it was not our cake issue But still it's always a good thing to know