Allow PanelApplet to be styled using CSS

[neeeeow]

Expected behaviour

Styling PanelApplet using CSS should allow things like the margin, padding, border, etc to be changed. For example:

PanelApplet {
    margin: 1px;
    border: 1px solid #000;
}

should apply a 1px margin and 1px black border to PanelApplet (which would then allow us to do things like adding borders & margins to the workspace switcher like in the GNOME 2 days).

Actual behaviour

In reality, PanelApplet seems to ignore any CSS rules defined in themes. Manually changing the properties of PanelApplet inside of the GTK3 inspector does work however. I believe all that needs to be done is to allow PanelApplet to recognise CSS rules defined in various themes. I've listed this as a feature request, as I don't think this is a bug per se, but rather a missing feature.

Steps to reproduce the behaviour

Try to style PanelApplet with CSS.

MATE general version

1.28.2

Package version

1.28.2

Linux Distribution

Fedora 40

Link to bugreport of your Distribution (requirement)

N/A since this is a feature request

[lukefromdc]

mate-panel, its applets, and its menus do in fact support css styling. I added that code myself back in 2015 and my UbuntuStudio_Legacy GTK theme makes extensive use of it.
https://github.com/lukefromdc/gtk-theme-ubuntustudio-legacy

Here's how I theme the panel and it's menus, note that this is only part of my panel theming code but should be enough to explain this:

/*********************************
 * MATE Panel, GNOME Panel
 *********************************/

/*Default to transparent*/
.gnome-panel-menu-bar,
.mate-panel-menu-bar{
	background-color: transparent;
}

/*Theme panel toplevel and applets (GtkPlugs)*/
/*Note that plugs render over the desktop, NOT the panel BG */

panel-toplevel.background,
PanelToplevel.mate-panel-menu-bar,
#PanelPlug{
	background-image: linear-gradient(to bottom,
						#303030,
						#1f1f1f 22%,
						#141414 32%,
						#040404 50%,
						#141414 68%,
						#1f1f1f 78%,
						#303030);
	color: white;
	outline-offset: 1px;
	outline-color: @theme_selected_bg_color;
}

/*Handle the vertical panel case, just like theming a scrollbar */
panel-toplevel.background.vertical,
PanelToplevel.mate-panel-menu-bar.vertical,
#PanelPlug.vertical{
	background-image: linear-gradient(to right,
						#303030,
						#1f1f1f 22%,
						#141414 32%,
						#040404 50%,
						#141414 68%,
						#1f1f1f 78%,
						#303030);
}

/*Theme wnckpager and wncktasklist drag handles for subtle visibility*/
/*This is double for a handle, keep this off in-process applets*/
/*MatePanelAppletFrameDBus>MatePanelAppletFrameDBus{
	color: shade(@theme_fg_color, 0.3);
}
*/
/*******************
 * MATE Panel Menus *
 ******************/

/* Set up transparent black menu backgrounds with gray borders */

.gnome-panel-menu-bar menu,
.mate-panel-menu-bar menu,
.wnck-menu-window menu , /*for customized libwnck*/
menu#cpufreq-menu{     /*For hacked Ubuntu indicator-cpufreq */
	background-color: alpha(black,0.9); 
	border-image: none;
	border-style: solid;
	border-color: #888a85;
	border-width: 3px 3px 3px 3px;
	border-radius:10px;
	padding: 2px;	/*keep selected menuitem bg inside the border */
}

/*round the outside corners of top and bottom menuitems to fit inside the border */


.wnck-menu-window menu   * menuitem:first-child,
menu#cpufreq-menu  * menuitem:first-child,
.gnome-panel-menu-bar * menuitem:first-child,
.mate-panel-menu-bar * menuitem:first-child {
	border-radius: 10px 10px 3px 3px;
	border-image: none;
	border-color:transparent;
}

.wnck-menu-window menu * menuitem:last-child,
menu#cpufreq-menu * menuitem:last-child,
.gnome-panel-menu-bar * menuitem:last-child,
.mate-panel-menu-bar * menuitem:last-child {
	border-radius: 3px 3px 10px 10px;
	border-image: none;
	border-color:transparent;
}

.gnome-panel-menu-bar * menuitem:hover,
.mate-panel-menu-bar * menuitem:hover {
	border-color: @menu_gradient_color_a;
}

/*make menu windows transparent*/

.wnck-menu-window,
.mate-panel-menu-bar menu.window, 
.gnome-panel-menu-bar menu.window{
	background-color:transparent;
}


/*Keep box-shadow off anything from the panel*/

.wnck-menu-window decoration,
.gnome-panel-menu-bar decoration,
.mate-panel-menu-bar decoration
{   
	box-shadow: none; 
}

/*Keep selected menuitem image off main panel custom menu bar*/
/*Keep button background off it as well in GTK 3.20*/


.mate-panel-menu-bar menubar,
.mate-panel-menu-bar menubar > menuitem,
.mate-panel-menu-bar menubar > menuitem:hover,
.mate-panel-menu-bar menubar > menuitem:selected,
.gnome-panel-menu-bar menubar,
.gnome-panel-menu-bar menubar > menuitem,
.gnome-panel-menu-bar menubar > menuitem:hover,
.gnome-panel-menu-bar menubar > menuitem:selected{
	background-image:none;
	background-color:transparent;
	border-image:none;
	border-width: 0px;
}

.mate-panel-menu-bar menuitem:disabled,
.mate-panel-menu-bar  menuitem:disabled *,
.gnome-panel-menu-bar menuitem:disabled,
.gnome-panel-menu-bar  menuitem:disabled{
	border-image:none;
	border-width: 0px;
}

/*for mate-settings-daemon's xrandr applet popup menu*/
.mate-panel-menu-bar menuitem.xrandr-applet:disabled>box>label{
	color: black;
	border-width: 1px;
	border-color: #888a85;
}

.mate-panel-menu-bar menuitem.xrandr-applet.monitor-off:disabled>box>label{
	color: alpha(black, 0.6);
    border-color: #222420;
}

/*Font used on panel itself and "custom menu bar" */

.mate-panel-menu-bar  label, .gnome-panel-menu-bar  label{
	font-weight: bold;
}

.mate-panel-menu-bar menu label, .gnome-panel-menu-bar menu label{
	font-weight: normal;
}

/*Open up the main menu size a bit*/
/*This speeds up main menu navigation*/

.mate-panel-menu-bar menubar menu menuitem label,
.mate-panel-menu-bar button menu menuitem label,
.gnome-panel-menu-bar menubar menu menuitem label,
.gnome-panel-menu-bar button menu menuitem label{
	font-stretch:  Normal;
	font-size: 120%;
}

/*Smaller font on other menus so they don't look ballooned*/

.gnome-panel-menu-bar menuitem label,
.mate-panel-menu-bar menuitem label{
	font-stretch: condensed;
	font-size: 110%;
}

Since using PanelApplet doesn't work, I applied the .mate-panel-menu-bar style class to the menus due to the fact that it was already used to style the classic menu applet in gnome-panel as .gnome-panel-menu-bar, I don't remember if it was already used in MATE for that applet at that time. Also note that in GTK2, the UbuntuStudio theme was able to apply the panel background theme to some menus popped up from the panel but not to others.

The use of this particular style class rather than a new and more descriptive one was later called out as an overuse of that particular style class, but I had done this so that whatever an existing theme applied to the classic menu would also be applied to all the other menus from the panel. Code had to be added to the panel and to several other packages to get consistant results. I could add another style class but cannot remove the existing one without breaking existing themes.

[neeeeow]

I'm aware that the MATE panel itself and some applets do support CSS styling, but more specifically I'm interested in applying styling to PanelApplet via CSS. My aim is to be able to change margin, padding & borders of the workspace switcher to allow GTK3 MATE themes to resemble their GTK2 counterparts.

If you see in this old Ubuntu screenshot I found on the web, the workspace switcher has margins & a border. Currently, in MATE there is no way to achieve this effect with CSS.

Whilst you can apply things like paddings to the panel entirely, if you want to (for example) add additional padding to the workspace switcher it is not possible afaik. Perhaps I'm being overly pedantic, but it would be nice to have.

[lukefromdc]

For the switcher, again from my theme:

/*WnckPager in both gnome-panel and mate-panel*/

wnck-pager,
PanelApplet.wnck-applet .wnck-pager{
	background-image: linear-gradient(to bottom,
									transparent,
									shade(@theme_bg_color, 1.1) 5%,
									shade(@theme_bg_color, 1.1) 95%,
									transparent);
    outline-offset: -1px;
	outline-width: 2px;
}

wnck-pager:selected,
.wnck-pager:selected,
PanelApplet.wnck-applet .wnck-pager:selected{
	background-image: linear-gradient(to bottom,
									transparent,
									@theme_selected_fg_color 5%,
									@theme_selected_fg_color 95%,
									transparent);
}

[neeeeow]

Again, applying things like margins to the workspace switcher is not possible within CSS, whether it's by styling wnck-pager or PanelApplet. Currently, it can only be done by editing the properties via GTK3 inspector. wnck-pager seemingly only seems to accept CSS rules for the background colour; PanelApplet won't accept anything.

[lukefromdc]

Note that some of the code in all of the wncklet applets comes from libwnck and thus cannot be changed from inside MATE. This in fact is why I was unable to theme the window menus that pop up when right-clicking on a window list button or on the "menu" corner of a window managed by marco or compiz.

[neeeeow]

I see. I believe it should be still possible to allow PanelApplet to be styled with CSS; it doesn't seem to be part of the wnck applets. I would try to implement this myself, but I don't really have the time these days, especially since I'd have to learn how MATE's widgets actually work.

For someone who is experienced in developing for MATE, I don't think it's a terribly difficult job.

Also, thank you for taking the time to deal with this issue!