New possibilities for Plasma Theme Creators

Lately I've worked on some features that will help Plasma Theme Creators to make even cooler themes. I will explain in this blogpost what those changes are and what you can do to take full advantage of them.

5.19

5.19 saw the introduction of Plasmoid Headings in the Breeze theme; and damn they look pretty:

Headings

This element is used in many plasmoids throughout plasma: kickoff, all system tray applets, the calendar, and so on. There are both headers, the top part, and footers, tho bottom on. They mostly contain actions about the view between them.

A theme can implement them by adding a plasmoidheading.svg file in the widgets/ directory. This file should contain the header and the footer elements (divided in the usual elements header-top, header-left, header-right, and so on). It is important to note that this file should contain margin hints of the same size of those in the dialog/background.svg. Please use the Breeze theme file as a reference!

Breeze Headers

For plasmoid creators, all you have to do to use this new component is to use the PlasmaExtras.PlasmoidHeading{...} element. If you want it to be a footer, use location: PlasmaExtras.PlasmoidHeading.Location.Header

5.21

5.21 will see the introduction of Margin Areas. Similarly to Cinnamon, different areas of your panel can now have different margins:

Margin Areas

The rationale of this feature is simple; this allows for having consistent icon size within the left side of the panel and the right one without having giant system tray icons or small task manager ones. However, this features allows for so much more.

There's a new widget called the Margins Separator. This will effectively separate the “big margins” area of your panel from the “small margin” one. You can move this widget in your panel to decide what is going to have a big or small icon. You can also remove the widget to get rid of the feature entirely. Finally, you can actually add more than one Margin Separator in the panel; this will toggle small/big margins multiple times in a single time:

Endless Possibilities

This is slightly more complex on the Themer side. Usually panel margins are taken from the hint-*-margin size in the widgets/panel-background.svg file. To enable this feature, do a clone of those margins and modify the cloned ones to be larger as you please. Then, add thick- to the id and label of the cloned elements, so that they are thick-hint-*-margin. Done that, create a new element with thick-center as the id. Disregard its color or shape; it only needs to exist in the svg.

The result should look like this:

Breeze Panel

5.22

Okay, fair enough, 5.22 is nowhere near being released, nor existing. However, I almost finished another sweet feature that won't make it into 5.21; it will probably land in 5.22. Let me go ahead of myself and explain it already.

Transparent panels can now become opaque dynamically, when a window is maximized. I will soon upload a youtube video to my currently empty channel to demonstrate this feature, so mAKE SuRE TO SuBsCriBE So tHaT yOu DOn'T MIss IT.

This one is the easiest to adopt for Themers. Just add these lines in your metadata.desktop file:

[AdaptiveTransparency]
enabled=true

wew, that was hard. If you want to customize the look of the opaque panel, create a solid/widgets/panel-background.svg file containing the opaque panel. However, please keep in mind that this feature has not landed yet and this last part is still subject to changes.

Users can decide if they want each of their panel to be opaque, always transparent or adaptive in the panel system settings.

5.23

Ahah, just kidding. I'll take this blogpost as an occasion to explain plans for the future. The next feature I'd like to work on for theme makers is the ability to make floating panel and widgets. This would be done by creating a new margin called outer-hint-*-margin (similarly to what is explained in the 5.21 section) in widgets/panel-background.svg and/or dialog/background.svg. This would probably be off by default but I think there could be a user-facing option to turn it on.