Recreating Unity in Xubuntu

KBar · 2021-11-06 09:57:04

Hi, folks!

As a big fan of Unity, I've been trying to recreate the look and feel of it in Xubuntu 20.04.

Now, why would I do that? Especially considering that many wonderful people from the community stepped up to continue maintaining its existence and have since bundled up a great Ubuntu Unity remix. Well, it's because I have also fell in love with Xfce and consider it as my “home” now. I love it and won't switch to anything else any time soon. It runs flawlessly, can be tweaked to my liking and is absolutely perfect! It's been around since 1996, which is staggering and commendable. I sincerely thank everyone behind the project! You guys simply rock!

Back to the subject. What I have achieved so far is the Application menu with the xfce4-appmenu-plugin in the top panel and an additional panel on the left side, which has the Whisker Menu and iconified window buttons. I added three launchers to the top panel that execute the wmctrl commands to close, hide and toggle the maximized state for the currently active window. Credits to this article. To top it off, I downloaded and set the theming style to Ambiance.

Here is a screenshot of my desktop to show you how it looks right now:

It's not fully complete yet. Some of the things that are missing and/or inconsistent are:

Most windows aren't picking up the GTK theme.
The three launchers for window actions are there permanently, which is not ideal but it's the best I could come up with.
No HUD but it's unimportant as I never used it.

In an attempt to solve the second issue, I created another panel right in top left corner and set its autohide-behavior to 2, i.e. “Always”. I thought I was the smartest man but boy was I wrong. Eventually, I found out that after a minute of inactivity, it would fall below the top panel and would never raise above ever again. A hidden panel always has two windows: one for its hidden state and the other for its active state. When it hides, its geometry is set to -9999,-9999. When it shows, its set to 0,0. As I said, after a minure or two, it fails to come up again and its geometry is permanently set to -9999,-9999. It's stuck behind the top panel forever, or until the panel is restarted.

For the first problem, I'm going to need some help and guidance.

Please feel free to discuss, share your thoughts and experience as I polish and perfect it.

ToZ · 2021-11-06 11:23:09

Welcome to the forum.

KBar wrote:

Most windows aren't picking up the GTK theme.

I don't believe the Ambiance theme you installed comes with an xfwm4 (window manager) component. To confirm, look at Settings Manager > Window Manager in the theme section.

In your screenshot, the window on the back is a CSD window and the themeing of the headerbar is included in the GTK3 theme. Mousepad, on the other hand, is an SSD window and uses the Window Manager theme to theme it. Try looking for, installing and activating an Ambiance xfwm4 theme like https://addons.videolan.org/p/1016446/.

The three launchers for window actions are there permanently, which is not ideal but it's the best I could come up with.

I believe you are looking for the xfce4-docklike-plugin. It allows pinning of running applications so you don't need to add launchers anymore.

Edit: Info on PPA for this package here.

No HUD but it's unimportant as I never used it.

If you are interested in one, have a look at xfce4-dashboard

Last edited by ToZ (2021-11-06 11:26:20)

KBar · 2021-11-06 12:46:01

Hi, ToZ! I'm pleased to have registered on this forum. Thank you!

I don't believe the Ambiance theme you installed comes with an xfwm4 (window manager) component. To confirm, look at Settings Manager > Window Manager in the theme section.

Yes, sadly, it doesn't. I was thinking of converting relevant .svg icons in ./unity to .xpm, renaming them and adding the themerc file if necessary.

Try looking for, installing and activating an Ambiance xfwm4 theme like https://addons.videolan.org/p/1016446/.

I did try a bunch of Ambiance xfwm4 themes from xfce-look.org but none of them looked native or well-integrated, so to speak, however, this one looks promising. Thanks!

I believe you are looking for the xfce4-docklike-plugin. It allows pinning of running applications so you don't need to add launchers anymore.

Would that allow me to auto-hide Close/Min/Max buttons and bring them forward as soon as I hover over that area? I don't know if you're familiar but Unity had this feature where maximized windows had their menu, title and buttons in the top panel, and the buttons would auto-hide if not focused. From the looks of it, xfce4-docklike-plugin doesn't provide that feature.

If you are interested in one, have a look at xfce4-dashboard

I was actually just checking it out and even watched a little video review of it. Xfce4 is truly the best! It's a gift that keeps on giving! cool

Thank you for your suggestions!

Last edited by KBar (2021-11-06 12:48:39)

ToZ · 2021-11-06 12:52:52

KBar wrote:

I don't know if you're familiar but Unity had this feature where maximized windows had their menu, title and buttons in the top panel, and the buttons would auto-hide if not focused. From the looks of it, xfce4-docklike-plugin doesn't provide that feature.

No it doesn't - but it looks like you have the windowck plugin added (which puts the window decorations of SSD applications in the panel) and you already have the menu there. There is an option in Settings Manager > Window Manager Tweaks > Accessibility, "Hide title of windows when maximized", which will remove the titlebar from SSD windows when the application is maximized. I think this is what you are looking for.

KBar · 2021-11-06 13:01:05

No, I actually don't have it. I think it was last updated in 2015.

It's xfce4-appmenu-plugin. Both “Hide frame of windows when maximized” and “Hide title of windows when maximized” are checked.

The window buttons are just launchers that execute wmctrl commands. For now, they're just placeholders until something much better and prettier comes up.

Last edited by KBar (2021-11-06 13:01:24)

KBar · 2021-11-07 18:18:36

Some progress today after installing the gtk3-nocsd package and changing the launcher icons. I have re-added a third panel and moved the launchers there. Suprisingly, it's not disappearing forever like it was doing before.

Are there start-up files for panels somewhere? I want to make sure the top panel stays below, just in case. It would have been great if it could be launched with this initiat state set: _NET_WM_STATE_BELOW

I think I'm also going to have to adjust the pop-up, pop-down delays and autohide size. Can all of them be modified with xfconf-query?

Maybe even disable showing its borders. That might require modifying CSS, however.

ToZ · 2021-11-07 23:15:42

KBar wrote:

Are there start-up files for panels somewhere? I want to make sure the top panel stays below, just in case. It would have been great if it could be launched with this initiat state set: _NET_WM_STATE_BELOW

Unfortunately no, you need to program something. wmctrl can do that (once you programmatically get the windowid of the one panel).

Edit: I found an old script that I used in the past to do something similar. Put it in your startup files and make sure you change the value of "GEO" - it would be a unique value to identify the panel you want to target:

#!/bin/bash
# requires: xprop wmctrl

# GEO is a unique identifier that identifies a specific xfce4-panel instance (use 'wmctrl -lvG')
GEO="49"

# --- DON'T CHANGE ANYTHING BELOW ---

while [[ ! "`wmctrl -lvG | grep xfce4-panel | grep "49"`" ]]; do
	sleep 0.1
done
	
WINID=$(wmctrl -lvG | grep xfce4-panel | grep $GEO | awk '{print $1}')
xprop -id $WINID -format _NET_WM_STATE 32a -set _NET_WM_STATE "_NET_WM_STATE_BELOW"

exit 0

I think I'm also going to have to adjust the pop-up, pop-down delays and autohide size. Can all of them be modified with xfconf-query?

They can be modified via css:

#XfcePanelWindow {
   -XfcePanelWindow-popup-delay: 1;
   -XfcePanelWindow-popdown-delay: 1;
   -XfcePanelWindow-autohide-size: 1;
}

Last edited by ToZ (2021-11-07 23:23:05)

KBar · 2021-11-08 12:20:03

I have noticed that panels always have the same window identity, so I modified your script to include these three lines only:

#!/bin/bash

wmctrl -i -r 0x00e00003 -b add,below

exit 0

I can confidently proclaim that wmctrl is indeed the panacea for everything! So far it has worked like a charm, except now the compositor doesn't show shadows under the top panel.

I came across this very interesting reply of yours, which aroused my curiosity and made me set those properties but I couldn't feel any difference. The documentation says that the popdown-speed setting disables the autohide animation. In my case, I didn't notice anything; I commented out the lines in gtk.css just to test its behavior. Is there any distinction between popup/popdown-speed and popup/popdown-delay?

Anyway, things are looking way better now. I'm having so much fun! Thanks a lot!

ToZ · 2021-11-08 13:00:57

KBar wrote:

I came across this very interesting reply of yours, which aroused my curiosity and made me set those properties but I couldn't feel any difference. The documentation says that the popdown-speed setting disables the autohide animation. In my case, I didn't notice anything; I commented out the lines in gtk.css just to test its behavior. Is there any distinction between popup/popdown-speed and popup/popdown-delay?

Right. I forgot that they can be set through xfconf as well. popdown-speed is the delay to hide the panel and popup-speed is the delay to show it.

Anyway, things are looking way better now. I'm having so much fun! Thanks a lot!

Cool. Care to share a screenshot of what it looks like now?

KBar · 2021-11-08 14:20:23

ToZ wrote:

Right. I forgot that they can be set through xfconf as well. popdown-speed is the delay to hide the panel and popup-speed is the delay to show it.

So they're essentially the same thing, just under different names? popup-speed goes into xfconf, popup-delay goes in css, right?

Cool. Care to share a screenshot of what it looks like now?

Sorry, I forgot to make and attach one.

I'm probably going to have to create an xfwm4 theme for Ambiance from scratch and color it in a more fitting bluish scheme. I did find a couple of Ambiance blue themes on xfce-look.org, but sadly they are broken.

I also forgot to mention that I increased autohide-size to 24 and set the panel's leave opacity to 0. Additionally, since the top panel spawns in the background now, the shadows aren't shown and it disappears in full-screen applications, i.e. watching a video on YouTube in full-screen and switching to other applications leaves its area empty.

Despite all of the aforementioned, minor inconsistencies, I'm quite happy.

ToZ · 2021-11-08 23:05:44

KBar wrote:

ToZ wrote:
Right. I forgot that they can be set through xfconf as well. popdown-speed is the delay to hide the panel and popup-speed is the delay to show it.
So they're essentially the same thing, just under different names? popup-speed goes into xfconf, popup-delay goes in css, right?

I just tested both sets. The popdown-speed/popdown-delay values don't seem to work for me. xfconf's popup-speed and gtk.css popup-delay both work, but the gtk.css seems to be a more reliable setting in that the values seem to be more accurate.

KBar · 2021-11-10 20:01:00

I installed the xfce4-windowck-plugin, rearranged the three panels, increased the size of the left-side panel to 64 and its icons to 48, disabled shadowing of dock windows, changed the background and went back to Greybird xfwm4 theme for now. Here are some screenshots:

On the top side, there are two panels layered on top of each other. Panel 0 has the system tray and the title bar for maximized windows. Panel 2 is set to autohide and contains window controls and appmenu. Its length is set to 75% and when it appears, its border is also displayed. I couldn't find a way to make it disappear and I also couldn't set its length to adjust dynamically.

Such configuration is not necessary but I'm just trying to get as close to Unity as possible. I might delete the secondary panel later and re-arrange the top panel in a nice way.

To fix panels in full-screen applications, I modified the script to this:

wmctrl -i -r 0x00e00014 -b add,above

Now all panels are displayed properly when switching from full-screen applications.

I will leave theming for later.

Last edited by KBar (2021-11-10 20:02:22)

ToZ · 2021-11-10 20:06:47

Looks good.

KBar · 2021-11-10 20:24:02

Awesome and nostalgic indeed! It certainly wouldn't look as good without your help. A couple more tweaks:

KBar · 2021-11-11 16:12:27

No more annoying panel borders

Setting Style to Background image and File to none in Panel Preferences dialog will get rid of annoying and unpleasant borders for overlapping panels.

This corresponds to the background-style property being set to "2" for the respective panel and leaving the background-image empty.

Xubuntu BFB's debut

I made the Xubuntu logo transparent and of course named it Xubuntu BFB. This is now how it looks in my panel:

Here's a link if you want to check it out: https://drive.google.com/file/d/13g-B6v … sp=sharing

It would be awesome if someone creative could add some cool effects to it similar to the one present in the original Unity Launcher BFB:

Questions time

I've got four panels, three of which overlap at various points on the top. My question is: can I style each one of them individually? I'd like to add a border to my taskbar and make it semi-transparent akin to Unity's chameleonic panel, while other panels keep their solid color. This is from unity.css:

UnityPanelWidget,
.unity-panel {
    background-color: transparent;
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 1.5)),
                                     to (shade (@dark_bg_color, 1.04)));
    border-top-color: shade (@dark_bg_color, 1.6);
    border-style: solid;
    border-width: 1px 0 0 0;

    color: @dark_fg_color;
    text-shadow: 1px 0 #333, -1px 0 #333, 0 1px #333, 0 -1px #333;
}

Last edited by KBar (2021-11-11 16:16:35)

ToZ · 2021-11-11 17:08:23

They can’t be themed individually using CSS as they don’t have unique identifiers. However, they do support using images as backgrounds per panel. If you could create the background look and feel as an image, transparency supported, you could apply those background images to the panels.

KBar · 2021-11-11 17:15:03

Hmm, I see. It looks like I'm going to have to include a 1 px border in it.

Thank you and have a great weekend!

KBar · 2021-11-14 13:16:14

Hey, ToZ. I hope you're having a great weekend!

I stumbled upon one of your many informative posts (and this doc page) and learned that panels can actually be modified individually. Since I have two panels (four, technically) and one of them is a vertical deskbar, I can select and style each one of them with this:

.xfce4-panel.horizontal.background {
}

.xfce4-panel.background.panel.deskbar {
}

GTK Inspector is such a fantastic tool. This reply was a revelation to me. You're the best!

Now, let me delve into this and polish up my desktop because it's become an unusable ugly mess.

Last edited by KBar (2021-11-14 13:19:38)

ToZ · 2021-11-14 16:10:39

Interesting. I did not know that. I guess if you had more that one of the same directional (horizontal, vertical, deskbar) panel, they would theme identically, but if you have only one of either, this should allow you to do that. Thanks for sharing,

KBar · 2021-11-16 16:30:58

I still haven't tried the xfce4-genmon-plugin that you suggested because after reading your guide on how to use the GTK Inspector, I really wanted to fix the theming instead. At first, I tried to collage everything on top of the background image using GIMP (yes, even the shadow below the top panel) and making the panels transparent, but tweaking the .css file seemed easier and much more convenient, and I'm going to have to set the font color anyway. This is what I've got as of today:

When I hover my mouse over the top panel, the application menu pops up:

The following are instructions for those who might wish to try it out on their desktops. Questions further down below.

To the left is panel-1, i.e. the "Launcher", or shall I say the tasklist. It contains the Whisker Menu, the Window Buttons, a single expanding separator and Trash Applet. Styling this was relatively easy. Its color is the average color value of the background image, which is 130, 67, 122 and its alpha is set to 67% (launcher_opacity option). I set these via xfconf and the border to the right via CSS like so:

.background.panel.xfce4-panel.deskbar { 
	border-right-width: 1px;	
	border-right-style: solid;
	border-right-color: rgba(130,67,122,0.666700)
}

One thing that this approach lacks is that of course it's not dynamic, i.e. I'm going to have to manually adjust these anytime I change the wallpaper. Not being able to adjust panel's size by pixels is also a bit annoying as you can spot that the left panel clips over the top panel if you look very closely. It's actually hard to notice, but once you spot it, you won't ever unsee it. Well, perhaps I shouldn't have mentioned it.

The top panel, however, is a whole lot more complicated precisely because it's made up of three separate panels:

panel-0, which basically is a systray
panel-2 is hidden and pops up when hovered over. wckbuttons and appmenu are located here
panel-3 is below these two and only contains windowck-plugin

This little shell script rearranges their order at startup (not portable):

#!/bin/bash
#
# This little shell script will bring panel-0 and panel-2 above panel-3 with the help of wmctrl.
# 

# First, make sure to save the PID of the running instance:
panel_pid=$(pgrep --exact 'xfce4-panel')
# Next, set some variables:
panel0=$(wmctrl -lpG | grep ${panel_pid} | sed --silent '1p' | cut --delimiter=' ' --fields=1)
panel1=$(wmctrl -lpG | grep ${panel_pid} | tr --squeeze-repeats ' ' | grep '0 0 1366 24' | cut --delimiter=' ' --fields=1)
panel2=$(wmctrl -lpG | grep ${panel_pid} | tr --squeeze-repeats ' ' | grep '\-9999 \-9999 1366 25' | cut --delimiter=' ' --fields=1)
# Finally, manage their windows in a proper way:
wmctrl -i -r ${panel2} -b toggle,above; sleep 0.25s; wmctrl -i -r ${panel1} -b toggle,above; sleep 0.25s; wmctrl -i -r ${panel0} -b add,above; sleep 0.5s; wmctrl -i -r ${panel1} -b toggle,above; wmctrl -i -r ${panel2} -b toggle,above; exit 0

This script is essential to make the panels work properly. While previous versions messed with full-screen windows, this version doesn't and hasn't failed me yet. Even works for panel restarts, if you combine it with xfce4-panel -r in another shell script with a name like rp:

#!/bin/bash
# panels is the name of the main script
# very handy for debugging and testing
xfce4-panel --restart && sleep 2s; panels; exit 0

Theming for the menu bar is already present in Ambiance/gtk-3.0/apps/unity.css:83, so I shamelessly copied it. After a long trial and error process and dozens of GTK Inspector invokations, this is what I ended up with that kind of works:

.background.panel.xfce4-panel.deskbar { 
	border-right-width: 1px;	
	border-right-style: solid;
	border-right-color: rgba(130,67,122,0.666700)
}

#XfcePanelWindowHidden, #wckbuttons-2 #XfceWckButtonsPlugin .horizontal, .-vala-panel-appmenu-private, .background.panel.xfce4-panel #windowck-plugin-9	 #XfceWindowckPlugin {
    background-color: transparent;
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@dark_bg_color, 1.5)),
                                     to (shade (@dark_bg_color, 1.04)));
    border-top-color: shade (@dark_bg_color, 1.6);
    border-style: solid;
    border-width: 1px 0 0 0;

    color: @dark_fg_color;
    text-shadow: 1px 0 #333, -1px 0 #333, 0 1px #333, 0 -1px #333
}

#XfcePanelWindow {
	-XfcePanelWindow-popup-delay: 100;
	-XfcePanelWindow-popdown-delay: 120;
	-XfcePanelWindow-autohide-size: 24
}

Issues and problems

From the screenshots you can clearly see that panel-3 is not getting picked up fully. Only font color is changed, while the background stays at 0xf2f1f0. If I add .horizontal class, this is the result:
This is the property that I'm looking to set, but somehow I cannot seem to select it. Obviously, I am doing something terribly wrong, but what?

Another problem is these annoying 1px borders around panel-2:

They don't appear around XfcePanelWindowHidden:

I'm not touching the systray and tasklist for now. They might require a different approach since they're buttons. The .tasklist selector should help with the latter.

Update: I can set panel-3's background color with basic color keywords by selecting it with #XfcePanelWindowWrapper, but it refuses to pick up the transparent color keyword. If I set it to black, it appears black. If I set it to be transparent and include -gtk-gradient, it becomes wholly transparent but won't shade itself.

---
For reference, here is how Unity 7.4.5 looks.

Last edited by KBar (2021-11-16 17:36:08)

KBar · 2021-11-20 08:49:25

Hey, ToZ!

I have a little problem and I thought you might come up with something, as you always do. Here's what I did to my Whisker Menu button:

However, I cannot seem to decrease the size of the button itself. I don't want to change the panel size, it's set to 65 and icon size is set to fixed 48. I found that XfcePanelPlugin controls its size, but would I be able to somehow tweak it? Or is it hard-coded to expand to fit in and the only way is do it programmatically? The problem is that clicks outside the borders (it's actually just a background-image) are registered and I find that annoying. Preferrably, the button should be contained within the borders/background.

Another issue is that it seems impossible to draw two borders at the same time. Setting border-image-source to launcher_icon_edge got rid of all the border-right properties, which are needed to separate the panel. But I solved this by combining all images and setting the background-image property instead. Tasklist doesn't seem to have the same problem as it's in panel's window, not inside a wrapper.

Thank you and have a nice weekend!

Last edited by KBar (2021-11-20 10:19:57)

ToZ · 2021-11-20 21:41:19

KBar wrote:

However, I cannot seem to decrease the size of the button itself. I don't want to change the panel size, it's set to 65 and icon size is set to fixed 48. I found that XfcePanelPlugin controls its size, but would I be able to somehow tweak it? Or is it hard-coded to expand to fit in and the only way is do it programmatically? The problem is that clicks outside the borders (it's actually just a background-image) are registered and I find that annoying. Preferrably, the button should be contained within the borders/background.

This seems to work:

.xfce4-panel #whiskermenu-button { margin: 5px; }

KBar · 2021-11-20 22:07:45

Yes, it does! You're a genius!

KBar · 2021-11-21 09:18:38

Well, unfortunately, it also messes up my arrows and border-right. Here's a sneak peek of my panel:

In Unity, open applications have a little arrow to the left of their Launcher icons and active windows to the right. However, since I'm only using a tasklist, I changed their purpose: left arrow denotes an active window, right arrow appears on an icon if hovered, multiple windows of the same application are grouped and their number appears on its icon (default behavior) and minimized groups have their icons faded (default behavior). These arrows are part of the background-images. Here's the code:

#whiskermenu-button {
	background-blend-mode: normal;
	background: border-box border-box url("assets/whisker_icon_inactive.png") center/62px 62px no-repeat;
	border-image: none;
	border-radius: 0px;
	border-style: none;
	border-width: 0px;
	border-right-color: lighter(lighter(lighter(@average_bg)));
	border-right-style: solid;	
	border-right-width: 1px;
	padding: 0px
}

#whiskermenu-button:active, #whiskermenu-button:checked {
	background-blend-mode: normal;
	background: border-box border-box url("assets/whisker_icon_active_hover.png") center/62px 62px no-repeat
}

#whiskermenu-button:hover {
	background-blend-mode: normal;
	background: border-box border-box url("assets/whisker_icon_hover.png") center/62px 62px no-repeat
}

If I add the margin property to that, arrows become barely visible since background images are now "shrinked", in a way. With arrows, images are 62x62, so this property will only work if they're attached to a window behind them rather than to a button. Is that possible, though? If it's not, then I'm going to have to l live with buttons occupying all of the available space, as arrows are more important to me.

On a side note, why are tasklist items checkboxes? Neither of :active or :focus work on them. I can uncheck an active window and it will lose its arrow. Greybird has the same issue, you can uncheck any active window button and it will lose its background color. I think left-clicking a second time should minimize the active window.

Last edited by KBar (2021-11-21 10:14:19)

ToZ · 2021-11-21 12:38:01

KBar wrote:

If I add the margin property to that, arrows become barely visible since background images are now "shrinked", in a way. With arrows, images are 62x62, so this property will only work if they're attached to a window behind them rather than to a button. Is that possible, though? If it's not, then I'm going to have to l live with buttons occupying all of the available space, as arrows are more important to me.

I'm not sure that's possible - how would the window know which button is positioned where or when the button is being hovered over. The hover effect is related to the button.

On a side note, why are tasklist items checkboxes? Neither of :active or :focus work on them. I can uncheck an active window and it will lose its arrow. Greybird has the same issue, you can uncheck any active window button and it will lose its background color. I think left-clicking a second time should minimize the active window.

Not sure but I noticed that as well. Its just the way it was coded I guess.

Xfce Forum

Sub domains

#1 2021-11-06 09:57:04