XFCE Theming, help modifying Whiskermenu & Notification dialog buttton

littlekun · 27 September 2024 05:48

Hello all

I'm trying to achieve the opposite of what @zenzen is trying here, but only for my whiskermenu-window.

(The theme I'm using: Skeuos)

I'm trying to make it from non-rounded to rounded. With the help of GTK_DEBUG=INTERACTIVE, I can achieve the rounded corners but there is a thin black border behind which makes it wired (see the screenshot below)

I can't get rid of it no-matter what border property I set. Can anyone take a look at the code snipet and tell me what I'm missing to get rid of that think black border.

.background.whiskermenu {
	border-radius: 10px;
	border: none;
	box-shadow: none;
	border-image: none;
	background-image: none;
	outline: none;
}

-x-

Aravisian · 27 September 2024 06:01

Try using the class
#whiskermenu-window instead of setting the .background.
Setting the background can leave the window portion with transparent edges where they overlap. It is the entire window that you want rounded, not just the background within the window.

To set the background, you can use
#whiskermenu-window.background
and you can set teh same radius for both to ensure they match.

littlekun · 27 September 2024 06:20

Thank you Aravisian for the quick reply

I just tried it as you advised and it is still the same

Aravisian · 27 September 2024 06:21

Did you log out and in or completely restart the panel after saving changes to gtk.css?
alt+F2

xfce4-panel --restart

littlekun · 27 September 2024 06:30

Added and saved the changes to ~/.config/gtk-3.0/gtk.css and instead of log out, I did a complete restart. no luck here also, it's still the same.

Aravisian · 27 September 2024 06:32

Which theme are you modifying?
(I understand, you may be using a custom gtk.css, but the applied theme will still show its themed elements).

littlekun · 27 September 2024 06:40

I'm using Skeuos theme: Skeuos - Gnome-look.org

Aravisian · 27 September 2024 06:43

What about class #whiskermenu-window.popup?

I will need to download the theme and do some testing if we are not having any luck - but I have running processes I cannot stop right now so I won't be able to do thorough testing until tomorrow...

EDIT: I almost forgot... In WM Tweaks > Compositing, is compositor enabled?

littlekun · 27 September 2024 08:32

added it but still no luck.

It's fine, important things first. Take your time

If you do test it then I have one more thing to ask. Look at the screenshot:
notification button
(Notification Plugin: xfce4-notifyd)
You see the buttons in the notification dialog looks inactive/dead (Note: They are responding & working, just visually looks inactive). They were like this even with the Zorin's default themes. I want to customize them so that they appear like active buttons but I can't locate their css selector ids. If you could locate them during your test it will be very helpful.

And yes, Compositor is enabled.

-x-

Aravisian · 27 September 2024 15:36

In your ~/.config/gtk-3.0/gtk.css you might try adding the following:

messagedialog .dialog-action-area button:active, messagedialog .dialog-action-area button:checked, messagedialog .dialog-action-area button:hover {
    padding: 0 6px;
    color: #272a34;
    background-image: none;
    background-color: #737680;
    border-style: none;
    border-radius: 0;
    box-shadow: inset 0 0 0 1px #272a34;
    text-shadow: none;
    transition: none; }

Play with the values to suit...

Sigh... On Asmi, I cannot replicate your rounded borders holding that pattern. I loaded up Zorin OS Lite 17.2 and still cannot replicate:

I have run out of time. Today is a hectic day with two interviews and a lot of running around.
Will need to continue later.

littlekun · 28 September 2024 07:46

Make sure to take proper rest

(from your sceebshot) Your whiskermenu-window corners are rounded and no thin pointy black border in the corner. I'm getting the rounded corners too but can't get rid of those pointy black corner.

I tried something different to get rid of it. I thought adding border: 5px solid #1c1e25 with the border-radius: 10px; but that didn't work either. So I tried the below snippet to test how border , box-shadow and background all come together

#whiskermenu-window {
	background: green;
	border: 5px solid blue;
	box-shadow: 0 0 0 5px red;

I noticed that border property isn't applying at all and the box-shadow only appear on the corners only (See the screenshot)
(Note: border-radius: 10px; is already added in the gtk.css so I didn't add it here)

I'm assuming there is a container box inside which whiskermenu-window only appears and due to this, beyond that container box size, css properties of whiskermenu-window doesn't appear

And I tried your given code snippet for the notification dialog unfortunately this didn't work either. The button still looks inactive even with the mouse cursor hover above it.
Notification-preview

Aravisian · 28 September 2024 11:12

I have split these to a new topic as that thread is a solved thread and this is getting lengthier than I expected.
I have (as you saw) a copy of the theme and I will boot up a copy when I can to do some through testing and troubleshooting, rather than relying on memory. I admit... I am surprised about the message dialog button not changing...
Are you using a custom gtk.css or the css within the actual theme?
Is the theme systemwide /usr/share/themes or user side ~/.themes?
Many of mine are in both directories mostly because I build themes and need them in both for testing - but some users place them in both.

littlekun · 29 September 2024 05:18

Great that you split this topic. As it's getting lengthier and confusing let me add some details what I'm trying to achieve.

I'm using Skeuos as my base theme. The theme is present in both /usr/share/themes and ~/.themes
I'm not modifying the gtk.css that is provided with the theme. I'm using ~/.conifg/gtk-3.0/gtk.css to make small changes in the parts where I need. Specifically, Whiskermenu window and Notification dialog button in this case.
The contents of my ~/.config/gtk-3.0/gtk.css

#whiskermenu-button {
	color: white;
	font-size: 28px;
	margin-left: 5px;
	margin-top: 2px;
	margin-bottom: 2px;
	padding-left: 0px;
	padding-right: 9px;
}

#whiskermenu-button:hover {
	color: white;
	font-size: 28px;
	border-radius: 5px;
	background: #03469f;
	margin-left: 5px;
	margin-top: 2px;
	margin-bottom: 2px;
	padding-left: 0px;
	padding-right: 9px;
}

#whiskermenu-button:checked {
	color: white;
	font-size: 28px;
	border-radius: 5px;
	background: #03469f;
	margin-left: 5px;
	margin-top: 2px;
	margin-bottom: 2px;
	padding-left: 0px;
	padding-right: 9px;
}

#whiskermenu-window {
	border-radius: 10px;
	border: none;
	box-shadow: none;
	border-image: none;
	background-image: none;
	outline: none;
}

#whiskermenu-window entry {
	border-radius: 7px;
	border: 2px solid lightblue;
}

.background.whiskermenu
 .vertical
  .horizontal.title-area
   .profile-picture {
	border-radius: 50px;
	border: 2px solid lightblue;
/*	box-shadow: 0 0 15px 1px black;*/
}


#zorinmenulite-button {
	margin-left: 4px;
	margin-top: 2px;
	margin-bottom: 2px;
}

#zorinmenulite-button:hover {
	background: #03469f;
	border-radius: 7px;
	margin-left: 4px;
	margin-top: 2px;
	margin-bottom: 2px;
}

#zorinmenulite-button:checked {
	background: #03469f;
	border-radius: 7px;
	margin-left: 4px;
	margin-top: 2px;
	margin-bottom: 2px;
}

/*#docklike-plugin button {
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 7px;
	padding-right: 7px;
}

#docklike-plugin button:hover {
	border-radius: 7px;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 7px;
	padding-right: 7px;
}

#docklike-plugin button:checked {
	border-radius: 7px;
	margin-top: 2px;
	margin-bottom: 2px;
}*/

#pager-13 #xfce-panel-toggle-button {
	border-radius: 3px;
	font-size: 20px;
	/*color: rgba (189, 230, 251, 0);
	background-color: rgba (189, 230, 251, 0.1);
	border: 1px solid rgba (189, 230, 251, 0.2);*/
	color: rgba (189, 230, 251, 0.2);
	background-color: transparent;
	/*margin-top: 8px;
	margin-right: 1px;
	margin-left: 1px;
	margin-bottom: 8px;*/
	box-shadow: none;
}

#pager-13 #xfce-panel-toggle-button:hover {
	border-radius: 3px;
	font-size: 20px;
	/*color: rgba (189, 230, 251, 0.1);
	background-color: rgba (189, 230, 251, 0.6);
	border: 1px solid rgba (189, 230, 251, 0.2);*/
	color: rgba (189, 230, 251, 0.5);
	background-color: transparent;
	/*margin-top: 8px;
	margin-right: 1px;
	margin-left: 1px;
	margin-bottom: 8px;*/
	box-shadow: none;
}

#pager-13 #xfce-panel-toggle-button:checked {
	border-radius: 3px;
	font-size: 20px;
	/*color: rgba (189, 230, 251, 1);
	background-color: #bde6fb;
	border: 1px solid rgba (189, 230, 251, 0.2);*/
	color: white;
	background-color: transparent;
	/*margin-top: 8px;
	margin-right: 1px;
	margin-left: 1px;
	margin-bottom: 8px;*/
	box-shadow: none;
}

#pulseaudio-button menu .linked button {
	background: transparent;
	background-image: none;
	box-shadow: none;
}

menu menuitem,
  .menu menuitem,
  .context-menu menuitem {
    min-height: 16px;
    min-width: 40px;
    padding: 4px 6px;
    text-shadow: none;
    margin-left: 3px;
    margin-right: 3px; }
    menu menuitem:hover,
    .menu menuitem:hover,
    .context-menu menuitem:hover {
      color: #ffffff;
      background-color: #2777ff;
      margin-left: 3px;
      margin-right: 3px;
      border-radius: 5px; }
      
/*Thunar*/
.thunar.background
 .horizontal
  .horizontal
   .vertical
    .sidebar.frame.shortcuts-pane
     .view:hover { 
	background: rgba (189, 230, 251, 0.1);
	color: white;
}

/*Notification Dialog button
messagedialog .dialog-action-area button:active, messagedialog .dialog-action-area button:checked, messagedialog .dialog-action-area button:hover {
    padding: 0 6px;
    color: #272a34;
    background-image: none;
    background-color: #737680;
    border-style: none;
    border-radius: 0;
    box-shadow: inset 0 0 0 1px #272a34;
    text-shadow: none;
    transition: none; }*/

(I made the some changes in the Title of this topic better reflect the scenario.)

Now coming back to the problem, I'm playing around with the whiskermenu but still no luck.

The css ids you shared shows effect on pop up dialog buttons (like in permanent delete and copy) but it's not affecting the notification dialog buttons.

Popup dialog button
Notification dialog button

So I'm assuming that Notification dialog must have different css ids.

This will be great.

It's not that important so take your time and I'm not in a hurry so I will wait for your reply after you do your testing.

Aravisian · 29 September 2024 06:01

Ah, I understand, now.
Hmmm...
According to the documentation, for that class you need

#XfceNotifyWindow button {

}

#XfceNotifyWindow button:hover {

}

I tried this in testing and there was no change. But... the service may need to be restarted, not just the theme. You could use pkill to kill the service but restarting it may be trickier, so I would log out and in or reboot.
I cannot do this in testing without changing this to a persistent USB.

littlekun · 30 September 2024 05:05

It works after re-login
notification-button

Now the only thing left is that whiskermenu-window.

Aravisian · 30 September 2024 05:07

I am very glad that you are a patient sort.... Because once again, I will try to explore this in a testing environment. I cannot seem to replicate this on my build, nor on my install of Zorin OS 17 Lite on another machine that still has it.

There is a caveat to that: It is possible that I did encounter it on the default install some long time ago and solved that annoyance right away and forgot all about it, causing it to not appear in testing on the two established machines. Thus - test rig needed.

Aravisian · 1 October 2024 04:19

For the life of me, I cannot seem to replicate this...

@littlekun, in your Whiskermenu settings > General tab, what is the opacity slider set to?
If you slide it all the way to the left to zero, does the menu window turn fully transparent?

littlekun · 1 October 2024 06:06

By default it's at 100. I slide it all the way to zero and here is the result:

Aravisian · 1 October 2024 06:17

Try the css class #whiskermenu-window frame>border

littlekun · 1 October 2024 06:51

Devil's horns still won't go

BUT

this is interesting

The horns vanished when I set the opacity to 99 along with the frame>border.

and finally I got what I wanted to

@Aravisian
Thank you so much for your valuable time and effort to help me out on this