Theming help: window corners and titlebar color

Style your desktop
Forum rules
Before you post read how to get help. Topics in this forum are automatically closed 6 months after creation.
Post Reply
fbachofner
Level 3
Level 3
Posts: 105
Joined: Sun Aug 08, 2010 6:49 pm
Location: Seaside, CA

Theming help: window corners and titlebar color

Post by fbachofner »

There are two things I abhor with the default Cinnamon look:
  • rounded window corners (especially since it is only at the top of the window) and
  • the titlebar blending into the menubar (and panel in dark themes, especially)
Where in a theme can these things be changed? [ Is there a theming manual for Cinnamon somewhere? ]

For themes there is "gtk.css" in the "gtk-4.0" folder and "cinnamon.css" in the main folder of the theme.

In gtk.css, for example, there is

Code: Select all

window.dialog.message .titlebar {
  min-height: 20px;
  background-image: none;
  background-color: #2b2b2b;
  border-bottom: 1px solid #191919;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px; }
/* previously 8px for both */
This would seem to be the correct place to make the change (at least for message dialogs!), but this does nothing to change the window corners when applying the theme.

I am similarly lost when attempting to change the color of a window title bar.

Why are the CSS files so opaque. They are not commented at all. Disappointing . . . and this is a problem ongoing for many since at least 2022

Any help would be most appreciated.
various self-built desktop machines and a MiniForums U550 mini-PC
each runs Fedora (current) with Cinnamon
i7 self-built server --> Fedora Server (current) (with Cinnamon, for the rare GUI login)
various VPSes --> Fedora Server (headless)
KodiakCanoe
Level 3
Level 3
Posts: 141
Joined: Wed Nov 23, 2022 12:30 am

Re: Theming help: window corners and titlebar color

Post by KodiakCanoe »

This works for the titlebar color:

https://github.com/the-allanc/minty-color-titles

It works OK for me, I use the Mint-Y theme and use a custom color for the titlebar. In the same css there's an option at the bottom to increase the size of the min/max/close buttons, and in the "Issues" section of the github someone has posted a method to also add window borders.
fbachofner
Level 3
Level 3
Posts: 105
Joined: Sun Aug 08, 2010 6:49 pm
Location: Seaside, CA

Re: Theming help: window corners and titlebar color

Post by fbachofner »

Hey @KodiakCanoe

Thanks!!

This is a big step towards getting the minor visual changes that I want in Cinnamon.

I also integrated the window border CSS into the file, now i just have to figure out how to get the window corners how I want.

I am pretty thrilled that Cinnamon somehow includes a partial CSS file like this into the active theme. I wonder where the documentation is for this. Would the same thing work for icons and other aspects of Cinnamon's look and feel?

I'll report back here about window geometry when I have a fix.
various self-built desktop machines and a MiniForums U550 mini-PC
each runs Fedora (current) with Cinnamon
i7 self-built server --> Fedora Server (current) (with Cinnamon, for the rare GUI login)
various VPSes --> Fedora Server (headless)
fbachofner
Level 3
Level 3
Posts: 105
Joined: Sun Aug 08, 2010 6:49 pm
Location: Seaside, CA

Re: Theming help: window corners and titlebar color

Post by fbachofner »

Bad, BAD Cinnamon!!

gtk.css will be completely overwritten if you change the scrollbar width in Themes/Settings

I am not yet sure whether other changes in settings will bork the file.
various self-built desktop machines and a MiniForums U550 mini-PC
each runs Fedora (current) with Cinnamon
i7 self-built server --> Fedora Server (current) (with Cinnamon, for the rare GUI login)
various VPSes --> Fedora Server (headless)
fbachofner
Level 3
Level 3
Posts: 105
Joined: Sun Aug 08, 2010 6:49 pm
Location: Seaside, CA

Re: Theming help: window corners and titlebar color

Post by fbachofner »

fbachofner wrote: Sun Jun 09, 2024 4:57 pm gtk.css will be completely overwritten if you change the scrollbar width in Themes/Settings
Weird! I flipped some other switches in the theme/settings and then the file was NOT overwritten when changing the scrollbar width.

BUT it turned the file into an absolute mess by duplicating the CSS into sections commented as follows:

Code: Select all

/***** scrollbar slider - cinnamon-settings-generated - do not edit *****/
EACH time the slider width is adjusted a "new" section is created.

This violates Cinnamon's general respect for not grossly editing users' configuration files!
various self-built desktop machines and a MiniForums U550 mini-PC
each runs Fedora (current) with Cinnamon
i7 self-built server --> Fedora Server (current) (with Cinnamon, for the rare GUI login)
various VPSes --> Fedora Server (headless)
KodiakCanoe
Level 3
Level 3
Posts: 141
Joined: Wed Nov 23, 2022 12:30 am

Re: Theming help: window corners and titlebar color

Post by KodiakCanoe »

You're welcome! I wasn't aware that changing scrollbar width overwrites the file, I would guess that deleting the css, choosing a width, then modifying the file with custom entries might work OK.

Another thing to be aware of is that the window borders also exist on maximized windows. So if you typically move your mouse all the way to the right to use a scrollbar, that will place the cursor over the border and you'll have to move the mouse slightly left.

That may be OK for many, but it was enough of an annoyance for me that I eventually removed the window borders css. The lack of borders doesn't make much sense to me purely from a usability standpoint, hopefully there is a better workaround in future versions.
Sewbej
Level 1
Level 1
Posts: 4
Joined: Sat Jun 01, 2024 2:10 pm

Re: Theming help: window corners and titlebar color

Post by Sewbej »

To modify corner roundings, edit this in the gtk.css file in the "gtk-3.0" folder (usr/share/themes/Mint-Y/gtk-3.0):

Code: Select all

.background .titlebar:backdrop, .background .titlebar {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px; }

Code: Select all

decoration {
  border-radius: 8px 8px 0 0;

Code: Select all

window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized) > decoration-overlay {
  border-radius: 8px; }
And gtk.css file in the "gtk-4.0" folder:

Code: Select all

  window.csd {
    box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.75);
    margin: 0;
    border-radius: 8px 8px 0 0; }
Post Reply

Return to “Themes, Icons & Wallpaper”