Changing either hover background or favorites in menulibre?

SMXuser · 2025-04-07 12:50:54

Hi everyone,
I spent a long time getting my XFCE setup to look just perfect for me. Now there's only one thing left that I've spent days trying to figure out, but I just can't find the answer anywhere.

When you click on the main menu button at the bottom of the screen, the menulibre opens up.
Part of menulibre displays the categories such as office, accessories, internet, graphics, etc.
But there's also a FAVORITES button which is also part of the categories.
This is what I would like to change .....
... either the symbol itself of the favorites category, or the hover background color.

The favorites symbol on my machine is a blue folder symbol that opens instantly by default.
It also has a blue hovering background color.
So when I hover over the Favorites symbol, blue on blue is not very attractive.

I have found "gazillion" sites including the developer site of menulibre, but nothing can point me in the right direction for this. There are only two things, well I suppose three things that I cannot seem to edit in the menulibre menu. 1 = Favorites symbol. 2 = All apps symbol. 3 = Hover background color.
Does anyone know where these can be edited?
Thank you.

.

.

Last edited by SMXuser (2025-04-07 12:53:58)

ToZ · 2025-04-07 14:54:06

Are you sure this is menulibre that we are looking at? It looks like xfce4-whiskermenu-plugin.

Either way, can share the versions that you are using?
- distro
- Xfce
- menulibre
- xfce4-whiskermenu-plugin

SMXuser · 2025-04-08 05:50:49

Thanks for the response. The XFCE version is 4.20. Yes, it's menulibre with a modified menu from MX Linux loaded "on top of it" it seems? I suppose that would be the whisker-menu-plugin because when I right click on the menu button I can see whisker menu at the very top and it's greyed out.
However, I also have the option of gaining access to the actual whisker-menu settings from within the main settings. When I do that it's pretty much the same thing though. Accessories, System, Internet, Office, etc. all show up and all of the menu symbols are there. As in the screenshot above the blue favorites folder is still blue and the highlight is also still a more transparent blue. I probably should have taken a screenshot from that, sorry.
The menulibre version is 2.2.2

.

ToZ · 2025-04-08 10:49:48

Thats the whiskermenu you're looking at. Menulibre is the menu editor.

The easier thing to do is change the background colour of the active highlight. See: https://gottcode.org/xfce4-whiskermenu-plugin/theme/. For your specific use-case, try adding to ~/.config/gtk-3.0/gtk.css (create the file if it doesn't exist):

#whiskermenu-window .category-button:checked {background: red}

...change "red" to whatever color you want - you can use rgb codes as well (exanple: #ff0000).

Restart the panel for the change to take effect:

xfce4-panel -r

eriefisher · 2025-04-08 11:04:23

That sure looks like xfce4-whiskermenu-plugin. Menulibre is just a menu editor as far as I know. Not an actual menu.

I don't know if that particular element can be edited with GTK or not. It's part of the theme you have chosen and you might be able to edit that.

SMXuser · 2025-04-08 15:39:02

Thanks everyone. Like they say, life is an adventure .... wink
The gtk.css file was already there but I received an error referring to a missing whisker-tweak.css file.
So I created the whisker-tweak.css file followed by adding:

/*Note for me*/
.category-button:checked {background: red}

Restarted the panel and received some line with a single GTK error 4:33 which ended with whisker-tweak.css would recurse. Nothing changed anywhere though. So I went ahead and replaced the word checked with hover instead since that worked on the desktop switcher. That caused a frame to appear around the hover selection. I didn't even know that there was a frame since none existed before. Tried a few other things but always ended up with the whisker-tweak.css would recurse error.

So apparently there must be object specific terminology to describe:
A. The space which is occupied by a menu symbol.
B. The specific text which appears in that space.
C. The color of that complete section of space.
D. The background color which appears when selecting that space.
E. The color of the frame, of the space which has been selected.

Getting closer, but I have no idea what those "would recurse" errors mean or what's causing them. Aside from that error showing up, everything else remains the same and the panel with all items functions as before.

.

ToZ · 2025-04-08 16:02:47

What version of xfce4-whiskermenu-plugin are you running?

Can you post back the full contents of the existing ~/.config/gtk-3.0/gtk.css file?

Also, which gtk (appearance) theme are you using? The theme itself might have some whiskermenu css directives that may be directed at those elements that you would need to override.

Last edited by ToZ (2025-04-08 16:08:44)

SMXuser · 2025-04-08 18:33:55

Hmmm, not really 100% certain what you mean about the WM version? XFCE is version 4.20 and menulibre is version 2.2.2 while the OS is the newest MX Linux 23.5 Libretto, running on licquorix kernel 6.11
I have no idea which appearance theme is running, just a default theme I suppose.

I'll have to post the gtk-3.0/gtk.css contents tomorrow since it's on a different machine in another room that I'm working in. Initially the gtk.css file was empty. It wasn't until I added content for color changes to the desktop switcher that it actually got some real content in it. No errors though when it's running, it's all fine.
The changes that I'm trying to make now were first added to the gtk.css which is how I found out about the whisker-tweak.css file. Initially there was just an error that the whisker-tweak.css couldn't be found. So I created one in ~/.config/gtk-3.0/

.

ToZ · 2025-04-09 02:09:26

Running MXLinux 23.5 in a VM and set the following:

.category-button:checked {background: white; color: black}

...and got:

Also:

apt-cache policy xfce4-whiskermenu-plugin

...returns version 2.7.2

As for the appearance theme, post back the output of:

xfconf-query -c xsettings -p /Net/ThemeName

And lets see whats in your ~/.config/gtk-3.0/gtk.css file.

SMXuser · 2025-04-09 12:27:05

Thanks ToZ, that worked for me, with an HTML color hover background:

.category-button:checked {background: white; color: black}

My theme is a mix, so I suspect that may have something to do with the terminal errors as I'm using the theme: mx.comfort-dark .... but also mixed with a variety of custom symbols ranging from my own to oxygen symbols. The cursor is also from the oxygen cursor selection. The whisker-menu version is the same as yours, 2.7.2 -1

I left the text color in the above command but don't actually need it since my menu is now set up where only the category symbols are present, without the text. When I hover over a category a very small descriptive text still appears while hovering and that's perfectly fine with me.

This is just freakin' awesome !!! I am thrilled to have a menu which jives with my panel. Way cool. Thanks a bunch. big_smile

.

k3dAR · 2025-04-09 14:13:41

only as clarification :-)
WhiskerMenu = Xfce enhanced "Start" menu plugin/applet, which show all defined *.desktop (Freedesktop standard) apps files
MenuLibre = GTk Editor of *.desktop files, which is run when in right click WhiskerMenu select "Edit Applications" (or can be ofcourse run as standalone app)

SMXuser · 2025-04-11 06:15:09

Hi again,
There is one more question that I have.
I know that it is possible to create some transparency in the left side of the menu where the topics are. But one thing that I've actually been thinking about for a long time is how to create transparency in the window with all of the symbols ... the window which normally appears to the right side of the topics?
The compositor allows me to set transparency for inactive windows amongst other things. But this would be neither an active nor an inactive window since it is a portion of the open whisker menu. Viewing my first screenshot at the top of this posting, it would be the right portion of the menu where all of the app symbols are. Any thoughts or ideas about that? Thank you.

.

Last edited by SMXuser (2025-04-11 06:16:48)

ToZ · 2025-04-11 10:04:47

Try using:

#whiskermenu-window treeview {background: transparent}

SMXuser · 2025-04-11 10:57:30

Hmmm, well actually I was looking for partial transparency like say 90% since the desktop background would otherwise be too distracting. Is there a possibility of doing partial transparency instead?

And how do you mark a thread as solved here? wink

.

Added later 19 min 53 s:
I'm getting a Theme parsing error whisker-tweak.css 7:56 .... Unit is missing
I did try to add a space followed by 0.5 behind the word transparent so it wouldn't be full transparency.

.

Added later 3 h 46 min 57 s:
Well, I got the transparency working with a couple of minor tweaks for text color, but somewhere along the line I lost the background color of the color when you select an app without actually clicking on it. Before I messed that up I could select a category with the proper hover background color, and then move through the apps in the category, which also had a hovering background color.
I tried all functions for selected, hovering, and backgrounds.
Should have saved the file first and worked with a duplicate instead. Bummer .... sad

.

Last edited by SMXuser (2025-04-11 10:59:10)

ToZ · 2025-04-11 23:14:58

For transparency, you could try something like:

#whiskermenu-window treeview {background: rgba(255,255,255,0.2)}

...adjust the rgb values to match closer to your background colour.

Well, I got the transparency working with a couple of minor tweaks for text color, but somewhere along the line I lost the background color of the color when you select an app without actually clicking on it.

This is controlled by the hover psuedo class, and it seems to be the result of transparency setting. Have a look at these directives:

#whiskermenu-window treeview {background: rgba(255,0,0,0.2)}
#whiskermenu-window treeview:hover {background-color:green}

#whiskermenu-window .category-button:hover {background: red}
#whiskermenu-window .launcher:hover {background: red}

SMXuser · 2025-04-15 11:32:38

Well, this all appears to be over my head. Problem is that I have no idea what I'm doing and some of the descriptors / titles don't make any sense to me either. I've added those four lines to my gtk.css file which now results in receiving 5 error lines in the terminal when I restart the panel. Before there used to be one error line for missing unit which I can't change because that unit is the transparency level that I assigned to the icon window background.
The new four lines of error come from adding those four lines .... sad

Here's the content of my entire gtk.css along with the wnck-pager code for the workspace switcher on the taskbar.

#whiskermenu-window iconview {
  background: transparent 0.9; /*actual background color of the working apps symbols view*/
  color: #ffffff
  exit
  ; /*title text descriptions of apps in menu */
border-radius: 10px;
}
#whiskermenu-window button:hover {
  background-color: #B91416; /*Button Color click/Hover */
  transition: 50ms;
}
#whiskermenu-window treeview:selected {
  color: #ffffff; /*Text Color of App descriptions */
}

#whiskermenu-window treeview {background: rgba(50, 52, 61, 0.1)}
#whiskermenu-window treeview:hover {background-color:green}

#whiskermenu-window .category-button:hover {background: #red}
#whiskermenu-window .launcher:hover {background: #red}


wnck-pager {box-shadow: inset 0 0 0 1px red}
wnck-pager {background-color: black}
wnck-pager:hover {background-color: LightGreen}
wnck-pager:selected {background-color: grey}


@import url("whisker-tweak.css");
@import url("xfce4-panel-tweaks.css");

.

ToZ · 2025-04-15 16:15:36

#whiskermenu-window .category-button:hover {background: #red}
#whiskermenu-window .launcher:hover {background: #red}

Color names do not need to be preceeded with a hash mark. Instead:

#whiskermenu-window .category-button:hover {background: red}
#whiskermenu-window .launcher:hover {background: red}

You can use color names [ "red" ] or color codes [ #FF0000 ] or rgb values [ rgb(255,0,0) ] or rgba values [ rgb(255,0,0,0.5) ]. See: https://docs.gtk.org/gtk3/css-overview.html and https://docs.gtk.org/gtk3/css-properties.html.

SMXuser · 2025-04-17 06:18:05

Good morning, and thanks. I finally got it all sorted out. With one exception, that being the single error during a panel restart, it's all perfect now.

The error reads missing unit on line 7 of the css, at character space 29. That would be this code in the css file:

  background: transparent 0.9; /*actual background color*/

If I remove the semi-colon I lose the transparency altogether.
If I remove the space after the semi-colon, nothing changes, error still there.
If I remove the comment tag nothing changes either.
I'm tempted to just live with the error since everything else is working just fine. I can't imagine what this "missing unit" in the error could possibly be? Does it show up perhaps because the transparency is unexpected?

.

ToZ · 2025-04-17 10:02:26

Try removing the "0.9", its not a valid parameter there. If you are trying to set a semi-transparency, use:

background_color: rgba(0,0,0,0.9);

...you might need to adjust the rgb values to suit.

SMXuser · 2025-04-17 10:30:59

Hmmm, I think I'll need to leave it as I had it. Trying it with the replaced rgba values as per your suggestion caused for two new errors (three total) to appear and for the transparency to stop functioning altogether.

The reason behind using transparent 0.9 is because of a css webmaster forum where it was suggested that transparency levels would be best achieved with the word transparent as well as including the value 1 or 0 or something in between. I tried several values and 0.9 provided the least amount of transparency (10%) which is exactly what I was looking for. I just want the desktop picture to bleed through a little bit, so the background won't distract too much from the open menu window with its application symbols.
When I reverted back to what I had, I was left with the single "missing unit" error again, whatever that means.

.

ToZ · 2025-04-17 20:45:41

SMXuser wrote:

Well, this all appears to be over my head. Problem is that I have no idea what I'm doing and some of the descriptors / titles don't make any sense to me either. I've added those four lines to my gtk.css file which now results in receiving 5 error lines in the terminal when I restart the panel. Before there used to be one error line for missing unit which I can't change because that unit is the transparency level that I assigned to the icon window background.
The new four lines of error come from adding those four lines ....
Here's the content of my entire gtk.css along with the wnck-pager code for the workspace switcher on the taskbar.
#whiskermenu-window iconview {
  background: transparent 0.9; /*actual background color of the working apps symbols view*/
  color: #ffffff
  exit
  ; /*title text descriptions of apps in menu */
border-radius: 10px;
}
#whiskermenu-window button:hover {
  background-color: #B91416; /*Button Color click/Hover */
  transition: 50ms;
}
#whiskermenu-window treeview:selected {
  color: #ffffff; /*Text Color of App descriptions */
}

#whiskermenu-window treeview {background: rgba(50, 52, 61, 0.1)}
#whiskermenu-window treeview:hover {background-color:green}

#whiskermenu-window .category-button:hover {background: #red}
#whiskermenu-window .launcher:hover {background: #red}


wnck-pager {box-shadow: inset 0 0 0 1px red}
wnck-pager {background-color: black}
wnck-pager:hover {background-color: LightGreen}
wnck-pager:selected {background-color: grey}


@import url("whisker-tweak.css");
@import url("xfce4-panel-tweaks.css");
.

Issues

have an errant "exit" command above
the semi-colon right after "exit" should be at the end of the line above

If the current version is different, please post it back for further review.

SMXuser · Yesterday 11:43:14

Yes, the file has changed and I did catch that "exit" error too. I'll be back in the next day or two and then I'll post the final finished version of the gtk.css that I'm using. Have a great day.

.

Xfce Forum

Sub domains

#1 2025-04-07 12:50:54

Changing either hover background or favorites in menulibre?

#2 2025-04-07 14:54:06

Re: Changing either hover background or favorites in menulibre?

#3 2025-04-08 05:50:49

Re: Changing either hover background or favorites in menulibre?

#4 2025-04-08 10:49:48

Re: Changing either hover background or favorites in menulibre?

#5 2025-04-08 11:04:23

Re: Changing either hover background or favorites in menulibre?

#6 2025-04-08 15:39:02

Re: Changing either hover background or favorites in menulibre?

#7 2025-04-08 16:02:47

Re: Changing either hover background or favorites in menulibre?

#8 2025-04-08 18:33:55

Re: Changing either hover background or favorites in menulibre?

#9 2025-04-09 02:09:26

Re: Changing either hover background or favorites in menulibre?

#10 2025-04-09 12:27:05

Re: Changing either hover background or favorites in menulibre?

#11 2025-04-09 14:13:41

Re: Changing either hover background or favorites in menulibre?

#12 2025-04-11 06:15:09

Re: Changing either hover background or favorites in menulibre?

#13 2025-04-11 10:04:47

Re: Changing either hover background or favorites in menulibre?

#14 2025-04-11 10:57:30

Re: Changing either hover background or favorites in menulibre?

#15 2025-04-11 23:14:58

Re: Changing either hover background or favorites in menulibre?

#16 2025-04-15 11:32:38

Re: Changing either hover background or favorites in menulibre?

#17 2025-04-15 16:15:36

Re: Changing either hover background or favorites in menulibre?

#18 2025-04-17 06:18:05

Re: Changing either hover background or favorites in menulibre?

#19 2025-04-17 10:02:26

Re: Changing either hover background or favorites in menulibre?

#20 2025-04-17 10:30:59

Re: Changing either hover background or favorites in menulibre?

#21 2025-04-17 20:45:41

Re: Changing either hover background or favorites in menulibre?

#22 Yesterday 11:43:14

Re: Changing either hover background or favorites in menulibre?

Board footer