How to get maximized windows appears floating style?

Hello,

In continuation of the previous post How to keep taskbar having rounded theme without intellihide? for the sake of getting comfort desktop environment.

Normal opened windows (not maximized) appears with rounded edges while in maximized appears just rectangular fits the rest of the display area.

My objective is to align maximized windows with the floating taskbar as shown below,

Please advice on the relevant CSS parameters to be tweaked in .../gnome-shell.css

This cannot be done with the Gnome-Shell .css file since this is a facet locked in by the Gnome Desktop.
The Gnome Developers are firm believers that the Desktop UI should set "Screen real estate" as the priority, regardless of the users wishes, familiarity or Tool Access requirements.

Fortunately... There are Gnome-Extensions that can restore that feature:
https://extensions.gnome.org/extension/5237/rounded-window-corners/

Install the extension and enable it in your extension manager or Gnome Tweak tool (sudo apt install gnome-tweaks if you need to get the Gnome Tweak tool)

Ok, since I've got pretty extensive experience with CSS, I'll take this on, as I'm looking to do something similar. I'll update this post as I research.

First, find what theme you're using:
gsettings get org.gnome.desktop.interface gtk-theme

You can then switch themes to load any changes you've made to the CSS, without having to log out and back in, or reboot... switch to another theme, then switch back to the one you're editing:
gsettings set org.gnome.desktop.interface gtk-theme "theme name"

Second, if you don't have it, install Nautilus-admin:
sudo apt install nautilus-admin
nautilus -q
... trust me, it makes everything so much easier.

Next, make sure you're looking at the correct gnome-shell.css... each color theme has its own, with the same name.

Open Nautilus (file manager), scroll to the bottom, select "Other Locations", click "Computer", click the search icon, and enter "gnome-shell.css". Wait until Nautilus is done searching to see all the gnome-shell.css files. Select the one for the color theme you're using.

I'm using:
/usr/share/themes/ZorinBlue-Light/gnome-shell/gnome-shell.css

Right-click the file and select "Edit As Administrator", enter your password (it might prompt you twice... it's a bug) and you can now edit the file as sudo.

Ok, you're going to see a lot of stuff like this:
border-radius: 0 0 0 10px
That first 0 is the window's top-left corner, the second is the top-right corner, the third is the bottom-right corner and the fourth is the bottom-left corner.

Since maximized windows have no rounding, and because a single 0 is a shortcut for 0 0 0 0, we're searching for "radius: 0". That gives us 17 options, only 7 of which meet our search in this case.

StScrollBar StBin#trough { border-radius: 0; background-color: transparent; }

.workspace-switcher { background: transparent; border: none; border-radius: 0; padding: 0; spacing: 12px; }

#panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner { -panel-corner-radius: 0; -panel-corner-background-color: transparent; -panel-corner-border-color: transparent; }

#panel .panel-corner { -panel-corner-radius: 0; -panel-corner-background-color: transparent; -panel-corner-border-color: transparent; }

.tile-preview-left.on-primary { border-radius: 0; }

.tile-preview-right.on-primary { border-radius: 0; }

.tile-preview-left.tile-preview-right.on-primary { border-radius: 0; }

Those # symbols aren't comments, they're element name selectors.

Now we just have to figure out which of those applies to maximized windows.

We may not strike paydirt here, as not mentioning a border radius is also akin to border-radius: 0... but now we'll just start hacking.

Take a line:
#panel .panel-corner { -panel-corner-radius: 0; -panel-corner-background-color: transparent; -panel-corner-border-color: transparent; }

and comment it:
/* #panel .panel-corner { -panel-corner-radius: 0; -panel-corner-background-color: transparent; -panel-corner-border-color: transparent; } */
... then paste the same line directly below that:
#panel .panel-corner { -panel-corner-radius: 0; -panel-corner-background-color: transparent; -panel-corner-border-color: transparent; }
... and edit that pasted line:
#panel .panel-corner { -panel-corner-radius: 10; -panel-corner-background-color: transparent; -panel-corner-border-color: transparent; }

We do it as above so if you mess up the settings badly, you can easily revert to stock (just delete the line you're working on, and uncomment the line you'd commented previously).

Now, I'm unsure if the effect is immediate, or if we have to do something else to effect the change... researching...

@Aravisian Thanks again for your prompt feedback
I will check it out but I can see (based on screenshot on github) that non-maximized windows have already rounded corners.

@Mr_Magoo Appreciate your initiative action and I will be waiting for further updates

I'm using /usr/share/themes/ZorinGrey-Light/gnome-shell/gnome-shell.css and I can access it as root using webmin Panel.

I will be interested to see how this thread progresses.

The .css file may only effect the output as long as the class is assigned.

This is an excellent tip and is worthy of a place in the Tutorials and Guides subforum. :slight_smile:

1 Like

yes, I like it, it gives the same ability of Open as root in nemo file manager equipped with Linux Mint.

yet nautilus is my favorite file manager ever!

Please post screenshot to show the effect of this parameter.
I change it, but can't see any effect; not sure which aspect got affected by #panel class?

In an effort to be helpful, you can use GTK-Inspector for this task.
For example, with Nautilus:
GTK_DEBUG=interactive nautilus

If null result - you may need to enable the inspector, first:
gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true

Part of the issue on this one is that with these windows on Gnome, the two things we can focus on are the GTK Widget - or box and the .css content.
The .css content can theme what is specified with a class by the gtk widget.
If the gtk widget does not assign a class - then .css cannot do anything with that element.

As a fast example of this in action - launch Gnome Sound Recorder.
This app does not call a widget window, but instead, a notebook stack.
And for this reason, you will see no Rounded Corners on the bottom of the window. The top has the headerbar / titlebar class, so it can have rounded corners. But the bottom will just be 90 degree angles, no matter what.

What the Gnome Extension does is give mutter a class for the Maximized window- which then can be used to round them.

This is how I understand it - I would be quite happy if shown wrong and method produced to resolve this in Gnome. @Mr_Magoo is a very capable and knowledgeable member so again - I will follow along with this with interest.

@Aravisian as mentioned earlier, I can see rounded corners already there by default as long as window is in normal mode as below,


but once maximized it fits the rest of display area as shown below,

In other words, to help me follow you, the lower part, I added the below section

/* Floating Panel */
#panelBox { padding-top: 0.4em; padding-bottom: 0.5em; padding-left: 0.5em; padding-right: 0.5em; }
#panel { border-radius: 12px; } 

The way I look at is, #panelBox defines the taskbar area; So what we can call the rest of area in CSS language?

I don't have that schema.

gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true
No such schema “org.gtk.Settings.Debug”

The schemas I've got:
gsettings list-schemas

Summary
org.gnome.Disks
org.gnome.settings-daemon.plugins.color
org.gnome.crypto.pgp
org.gnome.desktop.peripherals.touchpad
org.gnome.eog.fullscreen
org.gnome.desktop.peripherals
org.gnome.desktop.calendar
org.gnome.shell.extensions.window-list
org.gnome.gnome-system-monitor.disktreenew
org.gnome.nautilus
org.gnome.shell.weather
org.freedesktop.ibus.panel.emoji
org.gnome.desktop.media-handling
org.gnome.gnome-system-monitor.memmapstree
org.gnome.nautilus.list-view
org.gnome.settings-daemon.plugins.gsdwacom
org.gnome.settings-daemon.plugins.mouse
org.gnome.FileRoller.General
ca.desrt.dconf-editor.Demo.Conflict1
org.gnome.settings-daemon.plugins.media-keys
ca.desrt.dconf-editor.Settings
org.gnome.gedit.plugins
org.gnome.settings-daemon.plugins.a11y-keyboard
org.gnome.settings-daemon.plugins.background
org.gnome.software
org.gnome.Evolution.DefaultSources
org.gnome.Evince
ca.desrt.dconf-editor.Demo.Conflict2
com.ubuntu.update-notifier
org.gnome.FileRoller.Dialogs
org.freedesktop.Tracker.Writeback
org.gnome.gedit.preferences.editor
ca.desrt.dconf-editor.Demo
org.gnome.desktop.thumbnail-cache
org.gnome.Evince.Default
org.gnome.desktop.default-applications.office.tasks
org.gnome.FileRoller.UI
org.freedesktop.Tracker
org.gnome.login-screen
org.gnome.settings-daemon.plugins.datetime
org.gnome.desktop.a11y
org.gnome.desktop.datetime
org.gnome.FileRoller.Dialogs.LastOutput
org.gtk.Settings.EmojiChooser
org.gnome.nautilus.window-state
org.gnome.settings-daemon.plugins.sharing
org.gnome.evolution.eds-shell
org.gnome.settings-daemon.plugins
org.gnome.SessionManager
org.gnome.gedit
org.gnome.desktop.wm.keybindings
org.gnome.settings-daemon.plugins.rfkill
org.gnome.libgnomekbd.keyboard
org.gnome.mutter.wayland.keybindings
org.gnome.shell.keybindings
org.gnome.eog
org.gnome.desktop.screensaver
org.gnome.shell.window-switcher
com.zorin.desktop.auto-theme
org.gnome.desktop.peripherals.keyboard
org.gnome.Logs
org.freedesktop.ibus.panel
org.gnome.settings-daemon.plugins.orientation
org.gnome.desktop.peripherals.trackball
org.gnome.desktop.a11y.mouse
org.gnome.system.locale
org.gnome.settings-daemon.plugins.xrandr
org.gnome.libgnomekbd
org.gnome.shell
org.gnome.Cheese
org.gnome.shell.extensions.user-theme
org.gnome.shell.extensions.zorin-menu
org.freedesktop.Tracker.Extract
org.gnome.gedit.state.history-entry
org.gnome.evolution-data-server.addressbook
org.gnome.Terminal.ProfilesList
org.gnome.mutter.wayland
org.gnome.system.smb
org.gnome.evolution-data-server.calendar
org.gnome.Terminal.Legacy.Settings
org.gnome.eog.plugins
com.ubuntu.update-manager
com.ubuntu.login-screen
org.gnome.settings-daemon.peripherals.touchscreen
org.gnome.shell.extensions.native-window-placement
org.gnome.Characters
ca.desrt.dconf-editor.Demo.Empty
org.gnome.settings-daemon.plugins.print-notifications
org.gnome.system.dns_sd
org.gnome.GWeather
org.gnome.settings-daemon.peripherals.mouse
org.gnome.mousetweaks
org.gnome.desktop.search-providers
org.gnome.shell.app-switcher
org.gnome.desktop.a11y.keyboard
org.gnome.shell.extensions.zorin-desktop-icons
org.gnome.settings-daemon.plugins.clipboard
org.gnome.system.proxy.socks
org.gnome.nautilus.compression
org.gnome.system.proxy
org.gnome.system.proxy.http
org.gnome.desktop.a11y.applications
org.gnome.settings-daemon.peripherals.smartcard
org.gnome.settings-daemon.plugins.cursor
org.gnome.FileRoller.Dialogs.New
com.ubuntu.SoftwareProperties
org.gnome.settings-daemon.peripherals.input-devices
org.gnome.seahorse
org.gnome.desktop.peripherals.mouse
org.gnome.FileRoller.FileSelector
org.gnome.seahorse.manager
org.gnome.shell.extensions.zorin-taskbar
com.canonical.Unity.Lenses
org.gnome.desktop.input-sources
org.gnome.gedit.preferences.encodings
org.gnome.eog.view
org.gnome.settings-daemon.plugins.sound
org.freedesktop.Tracker.Miner.Files
org.gtk.Settings.FileChooser
org.gnome.eog.ui
org.rnd2.cpupower_gui
org.gnome.desktop.wm.preferences
org.gnome.shell.world-clocks
org.gnome.desktop.default-applications
org.gnome.settings-daemon.plugins.wwan
org.gnome.calculator
org.gnome.shell.extensions.auto-move-windows
org.gnome.online-accounts
org.gnome.libgnomekbd.desktop
org.gnome.ControlCenter
org.gnome.gnome-screenshot
org.gnome.gedit.plugins.filebrowser
org.gnome.desktop.default-applications.office.calendar
com.github.maoschanz.drawing
org.gnome.libgnomekbd.preview
org.gnome.evolution-data-server
org.freedesktop.Tracker.FTS
org.gnome.gedit.plugins.externaltools
org.gnome.libgnomekbd.indicator
org.freedesktop.ibus.general.hotkey
com.zorin.desktop.appearance
org.freedesktop.Tracker.Store
org.gnome.FileRoller.Dialogs.Extract
org.gnome.mutter
org.gnome.nm-applet
org.gnome.FileRoller.Listing
org.gnome.settings-daemon.plugins.screensaver-proxy
org.gnome.gedit.plugins.filebrowser.nautilus
org.freedesktop.ColorHelper
org.gnome.desktop.background
org.gnome.crypto.cache
org.gnome.settings-daemon.plugins.a11y-settings
org.gnome.settings-daemon.plugins.power
org.gnome.desktop.a11y.magnifier
org.gnome.settings-daemon.plugins.smartcard
org.gnome.gedit.plugins.pythonconsole
org.gnome.desktop.privacy
org.gnome.gnome-system-monitor.openfilestree
org.gnome.settings-daemon.peripherals.keyboard
org.gnome.evolution.shell.network-config
org.gnome.desktop.interface
org.gnome.FileRoller.Dialogs.Add
org.gnome.gedit.preferences.print
org.gnome.gnome-system-monitor.proctree
org.gnome.desktop.default-applications.terminal
org.gnome.gedit.plugins.spell
org.gnome.FileRoller
org.freedesktop.ibus
org.gnome.settings-daemon.plugins.keyboard
org.gnome.nautilus.icon-view
org.gnome.gedit.preferences.ui
org.gnome.desktop.session
org.gnome.settings-daemon.plugins.housekeeping
org.gnome.settings-daemon.plugins.xsettings
org.gnome.system.location
org.gtk.Settings.ColorChooser
org.gnome.settings-daemon.plugins.remote-display
org.gnome.gedit.preferences
org.gnome.mutter.x11
org.freedesktop.ibus.general
org.gnome.nautilus.preferences
org.gnome.desktop.thumbnailers
org.gnome.shell.overrides
org.gnome.settings-daemon.peripherals
org.gnome.system.proxy.ftp
org.gnome.shell.extensions.screenshot-window-sizer
org.gnome.desktop.app-folders
org.gnome.gnome-system-monitor
org.gnome.shell.extensions.zorin-printers
org.gnome.desktop.notifications
org.gnome.gedit.state.file-filter
org.gnome.desktop.sound
org.gnome.desktop.lockdown
org.gnome.system.proxy.https
org.gnome.gedit.state
org.gnome.mutter.keybindings
org.gnome.yelp
org.freedesktop.Tracker.DB
org.gnome.gedit.state.window
org.gnome.desktop.default-applications.office
org.gnome.gedit.plugins.time

Woooof... to get GTK Inspector to work, one must install libgtk-3-dev.... and that wants to install 86 packages on my machine. No thank you, I'll hack it bare-bones.

Summary

gir1.2-harfbuzz-0.0 icu-devtools libatk-bridge2.0-dev libatk1.0-dev libatspi2.0-dev libblkid-dev libcairo-script-interpreter2 libcairo2-dev libdatrie-dev libdbus-1-dev libegl-dev libegl1-mesa-dev libepoxy-dev libexpat1-dev libfontconfig1-dev libfreetype-dev libfreetype6-dev libfribidi-dev libgdk-pixbuf2.0-dev libgl-dev libgl1-mesa-dev libgles-dev libgles1 libglib2.0-dev libglib2.0-dev-bin libglvnd-dev libglx-dev libgraphite2-dev libgtk-3-dev libharfbuzz-dev libharfbuzz-gobject0 libice-dev libicu-dev liblzo2-2 libmount-dev libopengl-dev libpango1.0-dev libpcre16-3 libpcre2-32-0 libpcre2-dev libpcre2-posix2 libpcre3-dev libpcre32-3 libpcrecpp0v5 libpixman-1-dev libpng-dev libpng-tools libpthread-stubs0-dev libselinux1-dev libsepol1-dev libsm-dev libthai-dev libwayland-bin libwayland-dev libx11-dev libxau-dev libxcb-render0-dev libxcb-shm0-dev libxcb1-dev libxcomposite-dev libxcursor-dev libxdamage-dev libxdmcp-dev libxext-dev libxfixes-dev libxft-dev libxi-dev libxinerama-dev libxkbcommon-dev libxrandr-dev libxrender-dev libxtst-dev pango1.0-tools python3-distutils python3-lib2to3 uuid-dev wayland-protocols x11proto-core-dev x11proto-dev x11proto-input-dev x11proto-randr-dev x11proto-record-dev x11proto-xext-dev x11proto-xinerama-dev xorg-sgml-doctools xtrans-dev

1 Like

I understand this - that is an assigned class. However, is the Maximized State also an assigned class?
That is the important question.

Yes, exactly. The panel is the taskbar.

The area in question is generally the window class. You can perform a quick test - in your .css file, place window { border-radius: 0px; } and reload the theme and you should see all square corners on all windows.

In Maximized state the Borders are no longer involved. You can perform another quick test on this. You can give your borders a color or a border property like dashed or a gradient - it doesn't matter. Just something visible. Maximize the window and the entire borders are no longer present - with or without the dashed line or color or gradient.

You got it even as I was typing.
Since I do development; it... I think it did not occur to me that would be an issue.

Ahhhh, I see what you're saying... the default is square with no 'window dressing'... we may have to create and assign that class.

yes please @Mr_Magoo

Exactly And in order to do this, you must write it into the gtk widget, not into the themes .css file.
Which is what the gnome-extension does.
Now - I am ALL FOR you guys hacking out an extension on your own. You do not have to use a ready made one.

This, right here, is the aggravation and sheer frustration of so many things left out that halted my theming of Gnome. I will happily make themes for XFCE, Cinnamon, Mate and so on. But it is rare I will theme Gnome and whenever I do, I must alter the theme to make a lot of exceptions for elements that won't or cannot work or will bleed and blend together since gnome lacks a dedicated Window Manager.
That last one I made for Gnome was Predator and really, it was for @StarTreker as I doubt anyone else could have convinced me to theme Gnome at that point.

This has a somewhat straightforward although hacky solution that relies on conky (please let me know if it works :smiley: )

1 Like

I can see how that would work - it basically stops the window from being Maximized, but gets it reeeally close to looking like it is maximized. Novel... I would not have thought of that at all.

Although it probably won't round the corners, so you'd still need to use some other extension. Even round my corners extension doesn't work on maximized windows.

Nope, doesn't work. In fact, I've got Conky set up as "own_window = true" (ie: it prevents a maximized window from expanding across the entire screen, so Conky is never covered unless you manually drag a window on top of it)... the corners of the window still go square.

So it works for the window margin, just not the rounded corners?

Could this be due to the "maximize button" be used to select the window size, rather than the size parameters themselves?