[SOLVED] Menu Borders

mobius · 2024-01-04 21:29:02

Hello there.

A newcomer here, trying to gain some experience with Linux. Not sure yet which distro I want to stay with, but am sure that I want to use Xfce. smile Right now I am running Salix 15 in a VM on a Windows 10 host. From the package manager, it seems that my Xfce is 4.16, which is the latest available in this distro; and I'm using the Salix theme.

So far, I've had several questions, the answers to which I have been able to find by searching this very helpful forum--thanks to all here! But now I've hit a snag. The menus in the various applications are very difficult to read, because they have no borders, so they just kind of flow into the application's content. I wish to place some borders on the menus, but don't know whether I need to find a theme which does so, or whether this can be accomplished with CSS. I've already fixed the scroll bars by use of ~/.config/gtk-3.0/gtk.css, so adding to that file is an option, but I don't what what needs to be added. Or, if it requires adding a new theme, then any pointers to a theme with good menu borders would help.

Last edited by mobius (2024-01-07 21:22:06)

ToZ · 2024-01-04 22:48:24

Hello and welcome.

You could try something like this in ~/.config/gtk-3.0/gtk.css:

menu {border: 5px; border-style: solid; border-color: red}

...change the values to suit.

You'll probably need to log out and back in again for it to take effect system-wide. You can test by running "mousepad" after the making the change to see the effect in it's menus.

mobius · 2024-01-04 23:29:05

Hi @Toz, thanks. It didn't have any effect, even after logging out/in. Tried a ';' after 'red', but didn't help either.

ToZ · 2024-01-05 00:06:15

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

The Salix theme does seem to provide a border. From /usr/share/themes/Salix/gtk-3.0/gtk.css (line #784):

menu, .menu, .context-menu { margin: 4px; padding: 4px 0px; background-color: #ffffff; border: 1px solid #cdc7c2; }

You could also try replicating that code and adjusting the values to see if you notice an effect.

Last edited by ToZ (2024-01-05 00:07:42)

mobius · 2024-01-05 00:10:35

Thanks, will do tomorrow. Strange that I don't see a border on any menu, regardless of which of the supplied themes I try.

mobius · 2024-01-05 16:52:30

So, when booted today, the menu CSS was taking effect. It seems that logging out/in was not sufficient, or that an application (mousepad, terminal) had to be closed and reopened to see any change. So your response did answer the question, thank you.

I'm still at a loss to explain why, without that custom line, none of the installed themes show any borders around any menus. Also, just a plain, solid border doesn't seem very attractive, as it doesn't match the theme. Since I'm not all that creative with CSS (or with UI design?), perhaps it would be better for me to find a theme that already incorporates the borders. Do you know of any such themes? And also, how does one install themes that aren't shown in the package manager?

ToZ · 2024-01-05 17:51:59

Are you able to post a screenshot? I installed the Salix theme (light version) and I can definitely see a border. Also, can you post the complete content of ~/.config/gtk-3.0/gtk.css (in case something is conflicting) as well as the results of the following command:

xfconf-query -c xsettings -lv

mobius · 2024-01-05 20:03:41

ToZ wrote:

Are you able to post a screenshot?

Here is a screenshot of mousepad with the Edit menu pulled down; this is with the menu CSS commented out.
mousepad menu

I installed the Salix theme (light version) and I can definitely see a border. Also, can you post the complete content of ~/.config/gtk-3.0/gtk.css (in case something is conflicting)

/*** Menus ***/
menu { border: 2px; border-style: solid; border-color: gray; }


/********* Scrollbars *********/
scrollbar { background-image: linear-gradient(to right, #e8e8e8, white); transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }

*, headerbar.selection-mode .subtitle:link, .selection-mode.titlebar:not(headerbar) .subtitle:link { -GtkScrollbar-has-backward-stepper: true; -GtkScrollbar-has-forward-stepper: true; }

scrollbar.top { border-bottom: 1px solid #dbdbdb; }

scrollbar.bottom { border-top: 1px solid #dbdbdb; }

scrollbar.left { border-right: 1px solid #dbdbdb; }

scrollbar.right { border-left: 1px solid #dbdbdb; }

scrollbar:backdrop { background-color: #c6c6c6; border-color: #dbdbdb; transition: 10ms ease-out; }

scrollbar slider { min-width: 18px; min-height: 18px; margin: 2px; border: 0px solid #828282; border-radius: 4px; background-clip: padding-box; background-image: linear-gradient(to right, #c4c4c4, #c1c1c1); }

scrollbar slider:hover { background-image: linear-gradient(to right, #a0a0a0, #a4a4a4); }

scrollbar slider:hover:active { background-color: #1a74d3; }

scrollbar slider:active { background-image: linear-gradient(to right, #707070, #747474); }

scrollbar slider:backdrop { background-color: white; }

scrollbar.horizontal slider { min-width: 40px; }

scrollbar.vertical slider { min-height: 40px; }

scrollbar button { padding: 0; min-width: 18px; min-height: 18px; border-style: none; border-radius: 0; transition-property: min-height, min-width, color; border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #cecece; }

scrollbar button { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #404040; }

scrollbar button:hover { border-color: transparent; background-color: #d1d1d1; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #202020; }

scrollbar button:active, scrollbar button:checked { border-color: transparent; background-color: #a1a1a1; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #101010; }

scrollbar button:backdrop { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: white; }

scrollbar.vertical button.down { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }

scrollbar.vertical button.up { -gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }

scrollbar.horizontal button.down { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }

scrollbar.horizontal button.up { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }

This is the complete file. There are only two sections: the new menu section, and the scrollbar section, which I took from a post of your (thank you) and edited.

as well as the results of the following command:
xfconf-query -c xsettings -lv

xfconf-query

ToZ · 2024-01-05 23:28:50

Hmmmm. This is what I get:

Do you have the compositor enabled? What video card do you have? Do you have an ~/.config/gtk-3.0/settings.ini file, and if so, what are its contents?

mobius · 2024-01-06 18:01:00

Salix is running on a VM on a Windows 10 host--would that have anything to do with it?

ToZ wrote:

Do you have the compositor enabled?

Yes, it is enabled.

What video card do you have?

The underlying hardware is using the i7 graphics.

Do you have an ~/.config/gtk-3.0/settings.ini file, and if so, what are its contents?

[Settings]
gtk-print-preview-command = atril %f
gtk-font-name = DejaVu Sans 10
gtk-icon-theme-name = Qogir
gtk-theme-name = Salix
gtk-application-prefer-dark-theme = false
gtk-fallback-icon-theme = Qogir
gtk-primary-button-warps-slider = false

mobius · 2024-01-06 18:18:47

I did a quick check of some other systems using Xfce, in VMs:

PCLinuxOS with default theme Adwaita? Mousepad menus did have borders.

MX-Linux, in appearance no theme was highlighted, so not sure what the default theme was, but in a couple of applications (it didn't have mousepad), the menus did have borders.

Aritx with default theme Adwaita, mousepad menus did have borders.

So it would appear to be something with this Salix installation?

mobius · 2024-01-06 19:59:47

Just to add that this Salix installation has the guest additions installed, but I don't think that that has anything to do with the problem. To test, I re-ran both PCLinuxOS and Artix, and installed the guest additions in each, and the menus still had borders.

mobius · 2024-01-06 20:39:47

Also, although it can't be seen in my screenshot, the menu background is transparent, and also can't be seen in your screenshot. I would like to know how to remove that transparency as well.

ToZ · 2024-01-06 20:43:29

mobius wrote:

I did a quick check of some other systems using Xfce, in VMs:
PCLinuxOS with default theme Adwaita? Mousepad menus did have borders.
MX-Linux, in appearance no theme was highlighted, so not sure what the default theme was, but in a couple of applications (it didn't have mousepad), the menus did have borders.
Aritx with default theme Adwaita, mousepad menus did have borders.
So it would appear to be something with this Salix installation?

My image is from a VM as well. Perhaps there is something wrong with your Salix installation. Can you try creating a secondary account and see if it has the same problem? See if its a profile or system-based issue.

ToZ · 2024-01-06 20:46:26

mobius wrote:

Also, although it can't be seen in my screenshot, the menu background is transparent, and also can't be seen in your screenshot. I would like to know how to remove that transparency as well.

Go to Settings Manager > Window Manager Tweaks > Compositor, and make sure the "Opacity for popup windows" slider is fully to the right.

mobius · 2024-01-06 21:15:29

ToZ wrote:

mobius wrote:
Also, although it can't be seen in my screenshot, the menu background is transparent, and also can't be seen in your screenshot. I would like to know how to remove that transparency as well.
Go to Settings Manager > Window Manager Tweaks > Compositor, and make sure the "Opacity for popup windows" slider is fully to the right.

That corrected it. Thanks.

mobius · 2024-01-06 21:21:49

ToZ wrote:

My image is from a VM as well. Perhaps there is something wrong with your Salix installation. Can you try creating a secondary account and see if it has the same problem? See if its a profile or system-based issue.

Okay, created another user, and in this user, mousepad menus still have no border. However, other utilities (engrampa, l3afpad, etc.) menus do have borders.

Back to my usual user, and am noticing now that other utilities do have menu borders. But mousepad does not! So, apparently a problem with mousepad on this installation. Mousepad version is 0.5.8 according to Help > About. It is the only version available in the package manager.

Added: tried every installed theme, and mousepad menus never have borders. However, they do have borders when I add the CSS shown earlier in this thread.

Last edited by mobius (2024-01-06 21:24:21)

ToZ · 2024-01-07 00:13:28

So, is it only mousepad that doesn't have menu borders? Are there any other apps that have this problem?

Also, for engrampa and leafpad, can you run the following and post back the output?

ldd $(which engrampa) | grep -E 'gtk|qt'
ldd $(which leafpad) | grep -E 'gtk|qt'
ldd $(which mousepad) | grep -E 'gtk|qt'

I'm curious to see which toolkits they are built with. That might offer an explanation.

mobius · 2024-01-07 00:35:07

ToZ wrote:

So, is it only mousepad that doesn't have menu borders? Are there any other apps that have this problem?

At least the few applications that I checked in the different distros all had menu borders, apart from mousepad. I didn't text extensively, though.

Also, for engrampa and leafpad, can you run the following and post back the output?
ldd $(which engrampa) | grep -E 'gtk|qt'
ldd $(which leafpad) | grep -E 'gtk|qt'
ldd $(which mousepad) | grep -E 'gtk|qt'
I'm curious to see which toolkits they are built with. That might offer an explanation.

ToZ · 2024-01-07 01:34:35

Ahhh, you're using gtk3-nocsd. Did you install this to replace gtk3 or does it come pre-loaded with the distro?

The next logical step would be to revert to true gtk3 to see if the problem goes away.

mobius · 2024-01-07 20:41:10

ToZ wrote:

Ahhh, you're using gtk3-nocsd. Did you install this to replace gtk3 or does it come pre-loaded with the distro?

Hi ToZ, thanks for sticking with me on this. No, gtk3-nocsd was not pre-loaded; I loaded it after reading about CSD on this forum (the last time I looked into Linux, CSD was not a thing).

The next logical step would be to revert to true gtk3 to see if the problem goes away.

To revert, I assume, is to just use the package manager to remove gtk3-nocsd? In any case, that's what I did do. Following that, and after commenting the menu CSS line in gtk.css and restarting mousepad, mousepad menus now have a border, as shown in your screenshot. So that was the issue which occasioned this thread. Thanks for your help in tracking it down. smile

However, this has revealed some other issues. Now, each start of the terminal produces an error about something not being found, although the terminal functions fine after that. A reboot of the system cured that.

But more importantly (to me), is that some of the utilities no longer look the same. In particular, the title bar does not have the same colour as other utilities, presumably because of CSD. This is shown with the title bar in your screenshot (assuming yours was made with the Salix theme) being different than that shown in my screenshot.

Yet also noticeable in my screenshot, is a gray bar between the title bar and the menu bar, which presumable is an artifact of CSD. So there are pluses and minuses either way.

What may perhaps be the best course for me, is to use gtk3-nocsd, since mousepad was the only application found thus far that showed any negative effects, and it was easily corrected by using CSS to give the menus a border. Having a consistent look (same colour title bars) is important to me.

However, I would appreciate any input about the pros and cons of using gtk3-nocsd, as if there were to be significant negative consequences, I would certainly reconsider.

ToZ · 2024-01-07 21:18:24

mobius wrote:

However, I would appreciate any input about the pros and cons of using gtk3-nocsd, as if there were to be significant negative consequences, I would certainly reconsider.

What gtk3-nocsd does is hack the main gtk3 code to remove all CSD windows (I believe there are some other changes as well). Because it is a hack, it may break some things. Xfce developers do their development against the real gtk3 codebase, so there is no guarantee that things will work with solutions like gtk3-nocsd you would need to follow up with those developers regarding issues like this one). Ultimately, the decision to use gtk3 or gtk3-nocsd is yours. I don't really have an opinion on it since I've never used it.

Note that in Xfce 4.18, CSD windows have been made optional, so you can disable them from within Xfce settings without the need to resort to gtk3-nocsd.

mobius · 2024-01-07 21:26:37

ToZ wrote:

Note that in Xfce 4.18, CSD windows have been made optional, so you can disable them from within Xfce settings without the need to resort to gtk3-nocsd.

Thanks. Yes, I did read that somewhere. Unfortunately, the latest available in the Salix (and Slackware) repos is 4.16, and they are pretty slow moving. Is there a way to update apart from the repos, and is it advisable to do so?

Meanwhile, I've marked this thread solved, since the original question has been answered.

Xfce Forum

Sub domains

#1 2024-01-04 21:29:02

[SOLVED] Menu Borders

#2 2024-01-04 22:48:24

Re: [SOLVED] Menu Borders

#3 2024-01-04 23:29:05

Re: [SOLVED] Menu Borders

#4 2024-01-05 00:06:15

Re: [SOLVED] Menu Borders

#5 2024-01-05 00:10:35

Re: [SOLVED] Menu Borders

#6 2024-01-05 16:52:30

Re: [SOLVED] Menu Borders

#7 2024-01-05 17:51:59

Re: [SOLVED] Menu Borders

#8 2024-01-05 20:03:41

Re: [SOLVED] Menu Borders

#9 2024-01-05 23:28:50

Re: [SOLVED] Menu Borders

#10 2024-01-06 18:01:00

Re: [SOLVED] Menu Borders

#11 2024-01-06 18:18:47

Re: [SOLVED] Menu Borders

#12 2024-01-06 19:59:47

Re: [SOLVED] Menu Borders

#13 2024-01-06 20:39:47

Re: [SOLVED] Menu Borders

#14 2024-01-06 20:43:29

Re: [SOLVED] Menu Borders

#15 2024-01-06 20:46:26

Re: [SOLVED] Menu Borders

#16 2024-01-06 21:15:29

Re: [SOLVED] Menu Borders

#17 2024-01-06 21:21:49

Re: [SOLVED] Menu Borders

#18 2024-01-07 00:13:28

Re: [SOLVED] Menu Borders

#19 2024-01-07 00:35:07

Re: [SOLVED] Menu Borders

#20 2024-01-07 01:34:35

Re: [SOLVED] Menu Borders

#21 2024-01-07 20:41:10

Re: [SOLVED] Menu Borders

#22 2024-01-07 21:18:24

Re: [SOLVED] Menu Borders

#23 2024-01-07 21:26:37

Re: [SOLVED] Menu Borders

Board footer