titlebar customization on lm21 cinnamon ?

[tpo100ckid]

Mint-Yz ( https://github.com/SebastJava/mint-yz-theme ) is an edit of the mint-y theme i really like!
but i don't like the title bar theme it has, i prefer the ones included in mint-y-legacy
since mint 21 cinnamon doesn't use metacity anymore, how can i change the theme files myself to use the other set?
i'd rather a css snippet or something (general statement i'm sure i'd probably need to copy a few files) than altering the source code and compiling it, the gtk devkit package is...big

[manyroads]

Have you reviewed available documentation on Cinnamon use and tweaks? These may help.
https://www.linuxmint.com/documentation ... h_18.0.pdf
https://www.technipages.com/linux-mint- ... of-windows

Given the theme you are using is not from Mint, you might also request help from the author of the theme.

[sebastjava]

Given the theme you are using is not from Mint, you might also request help from the author of the theme.

That's what he did. Unable to answer him, I referred him here...

This Mint-Yz theme is just a fork from the default standard Mint-Y. It is approximately the same as the official Mint-Y from LinuxMint, but with different colors and other small tweaks. So, this question about editing the titlebar control icons applies to Mint-Y as well. Before LinuxMint Cinnamon 21, this was pretty obvious and straightforward: you just had to look into the metacity-1 directory to find them and edit them. But now, AFAIK, these icons are created directly into the gtk.css file itself. I can't find where and how this is achieved in the gtk.css file. I was able to change the colors, but not the shapes.

He's talking about this:

He want's the old https://github.com/linuxmint/mint-themes-legacy look on the title bar. Any idea?

[tpo100ckid]

(i go by she/her...please don't assume people's pronouns)
but, yeah

[sebastjava]

Oops, yes, sorry. I had no information about that. Except some indication from your avatar. It came to my mind after posting...

[jelabarre59]

The problem is, all the theme designers seem to have bought into GNOME's twisted idea that there should be NO textures and colors in their themes. And also have the delusion that ALL your windows, whether active or inactive/background, should have the EXACT same coloring/shading. Makes me wonder if they actually use their machines for actual *WORK*.

Sure, if the GNOME folks want to make *their* desktop look/work a particular way, that's up to them. But I cannot abide by their fouling up GTK3/4 itself with the stench of their shoddy UI design. Because they've re-worked GTK+ to fit THEIR worldview, it breaks things for people who want to use their systems for actual productive tasks.

I just updated to Cinnamon 5.4.12 on my main system, and now I cannot set a USABLE titlebar / window border. Used to be I could just copy over my old Esco metacity files, but they couldn't leave things well enough alone.

THIS is what my titlebars should look like.

Any way of getting that back, without having to move to a different desktop? (I could never get KDE to work the way I like, Cinnamon has been the one that fits my workflow best).

[billyswong]

Mate still support separate window border theme. Mate support Compiz and I am in high faith that in the far future when even Mate also migrate to Wayland, they will support Wayfire and Wayfire will allow separate window border / title bar theme.

But if Cinnamon is the only choice, someone here does succeed in adding coloured active window titlebar back viewtopic.php?f=211&t=382890

P.s. Looks like this custom solution also colour those CSD applications developed by Gnome!

[johnsonmt01]

What the Linux world is missing is a quality GUI theme editor. Something where you could modify textures, dimensions, control colors, etc in real time, and save/export the gtk.css. It would save so much CSS guesswork.

Speaking of Cinnamon. We all know that Metacity is gone in LM21, and window controls are generated by the theme gtk.css. That means that within gtk.css there are sections defining colors, controls and dimensions of titlebars.

In jelabarre59's example, is it possible to copy the css from the Esco metacity theme, and paste it into an existing theme's gtk.css, making it auto-generate the Esco theme without metacity?

Maybe I'm asking an obvious redundant question, but there must be an answer to how all the nice Metacity themes can continue to be used with Cinnamon, even if they each require their own separate theme.

[jelabarre59]

In jelabarre59's example, is it possible to copy the css from the Esco metacity theme, and paste it into an existing theme's gtk.css, making it auto-generate the Esco theme without metacity?

Well no, because the Metacity theming is in XML format. It has to get converted to the CSS codes for GTK, and I haven't figured out 1: what the relevant pieces of the Metacity XML are and 2: what those would be equivalent to in gtk.css.



EDIT: I had to hunt down the XML for the example Metacity theme I was showing above. It's in the Mate Desktop repository at:
https://github.com/mate-desktop/marco/b ... heme-1.xml

(I had been thinking it was a v3 Metacity theme, but that was only because I had to rename it in order for it to be recognized in an earlier Cinnamon version)

[tpo100ckid]

But now, AFAIK, these icons are created directly into the gtk.css file itself. I can't find where and how this is achieved in the gtk.css file. I was able to change the colors, but not the shapes.

i've discovered that mint-yz actually pulls icons from whatever the current icon theme is for the title bar, not the actual theme folder
which leads to different looks with different icon themes
look at this!


EDIT: apparently, this also happens with normal mint-y as of the mint 21.1 version! it might have also happened with mint 21, but i don't remember checking...

[sebastjava]

That's a great discovery you've made. I investigated a bit more, based on this. To make this story universal, i worked on the original Mint-Y. The same findings should apply for Mint-Yz too. And, as if this was not complicated enough, i had to do my testings on a virtual LM Cinnamon 21.1, because i am still on the old LM Cinnamon 20.3. I am usually very quick to move to the latest, but this 21.x still has some ugly bugs and i am waiting for it to get fixed. I am talking about these annoying cropped and flashing shadows. Anyway, for now i work on LM C 20.3 and test on a VirtualBox LM C 21.1. But i will probably move to a real LM C 21.x soon anyway, as this is just getting too complicated.

• I started by searching through the /usr/share/themes/Mint-Y/gtk-3.0/gtk.css. In there i searched for "minimize", and quickly found this style sheet contains -gtk-icon-theme: "Mint-Y" So, yes, it seems these window control icons are defined in the icon theme. And both the Mint-Y and Mint-Yz depend on the Mint-Y icons for this.
• More precisely, these icons are located in /usr/share/icons/Mint-Y/actions/symbolic/ under the names window-close-symbolic.svg, window-maximize-symbolic.svg, window-minimize-symbolic.svg, window-restore-symbolic.svg.
• I think i have an exact visual memory of the icons you want. I did a quick search and could not find the exact same ones. I looked in https://github.com/linuxmint/mint-y-ico ... s/symbolic From there, I found things got changed on this commit: https://github.com/linuxmint/mint-y-ico ... b131f1e1d0 Short story, from there i could find the previous icon versions before they get deleted and replaced. As said before, it is probably not exactly the ones you were looking for, and i don't like them. Anyway, i still went on and downloaded those four icons one-by-one, just for testing purposes. Here they are:

  4-old-window-control-icons.zip

  (1.67 KiB) Downloaded 37 times

• For a quick and safe test, i just did a copy (Ctrl-C) of the entire /usr/share/icons/Mint-Y directory, and pasted it in ~/.icons. That's an hidden directory in your home folder. Press Ctrl+H to see it. Create this directory if missing.
• Then i pasted those four icons in ~/.icons/Mint-Y/actions/symbolic, replacing the new official ones.
• I then switched back and forth the "Applications" and "Icons" in my themes chooser, to make sure everything gets updated. And then i closed and re-opened all windows.

RESULTS:

It works on all windows, plain ones and CSD ones. You probably won't like these icons. The next step is to find the ones you want... Or just create them using this great Inkscape application. I hope i did not forget anything. Reply in case of trouble...

Merry Christmas and a Happy New Year !

[sebastjava]

Based on my findings, i think these window control icons are not supposed to change when you choose a different icon theme. The gtk.css clearly specifies the Mint-Y icons for the window control icons. This sounds like an old bug: https://github.com/linuxmint/mint-themes/issues/397

So, you are on LM Cinnamon 21.1? And your system is all up-to-date? I should check this later, downloading some other icons such as Elementary, and see how it goes...

[jelabarre59]

That's only icons. What do you do to put texture, color shading, etc back on the tittlebar? Or to force the system to USE titlebars, if there is sufficient GNOME-infected GTK code to break that? I had been using GTK-nocsd, but it seems that is breaking other applications now, or at least breaks itself when certain applications load.

I had put KDE and Mate on my laptop to try to get them to work how I want, but I'd still prefer Cinnamon, I had it configured just right.

[sebastjava]

That's only icons. What do you do to put texture, color shading, etc back on the tittlebar?

There was already a discussion about this there: https://github.com/SebastJava/mint-yz-t ... ussions/51

As you can see there, I could manage to do a little tweak on the gtk.css to change the titlebar background color. And I am pretty sure you could get gradients, textures, images or whatever you want using CSS properties such as background-color and background-image. More info: https://www.w3schools.com/css/default.asp

It wasn't hard to search and replace the titlebar background color because it is a pretty unique one: #e8e8e8. But then, having changed it to a dark gray, i had to change the title color and the icons colors too, to get a decent contrast. And that was too much trouble. I gave up. So, as said before in this https://github.com/SebastJava/mint-yz-t ... ussions/51 there is no easy "hacking" for this, you would have to go through the Sass process, as somewhat briefly described in https://github.com/SebastJava/mint-yz-t ... ourself.md But at least you can skip the time consuming ./update-variations.py All step, as you are not modifying the assets.

So, to sum up, it should be possible to do whatever you want, but it is not easy, not quick.

[sebastjava]

@tpo100ckid (OP)

If i got it correctly, you want the window control icons as found in /usr/share/themes/Mint-Y-Legacy/metacity-1. I tried. I renamed and replaced these icons as follows:

• /usr/share/themes/Mint-Y-Legacy/metacity-1/close-icon.svg -> ~/.icons/Mint-Y/actions/symbolic/window-close-symbolic.svg
• /usr/share/themes/Mint-Y-Legacy/metacity-1/max-icon.svg -> ~/.icons/Mint-Y/actions/symbolic/window-maximize-symbolic.svg
• /usr/share/themes/Mint-Y-Legacy/metacity-1/min-icon.svg -> ~/.icons/Mint-Y/actions/symbolic/window-minimize-symbolic.svg
• /usr/share/themes/Mint-Y-Legacy/metacity-1/max-icon.svg -> ~/.icons/Mint-Y/actions/symbolic/window-restore-symbolic.svg (duplicate)

It didn't work, at first. I was just getting 3 black squares replacing the control icons. I opened the new and the old controls in Inkscape, and compared them. There was an empty square behind the old Metacity icons. And the foreground color was not the same. Nor the background. So, i re-edited these old Metacity icons to make them the same way the new ones are made. And then it worked !

Here is the re-edited old Metacity window control icons:

window-controls-legacy.zip

(3.79 KiB) Downloaded 36 times

And I also tried a 150% enlarged custom version:

window-controls-legacy-150pc.zip

(3.9 KiB) Downloaded 32 times

To sum up, as explained before, all you have to do now is:

Code: Select all

mkdir -p ~/.icons # Just in case
cp -r /usr/share/icons/Mint-Y ~/.icons # For safe and quick testings

And then replace the four icons in ~/.icons/Mint-Y/actions/symbolic/ with the ones downloaded from here. And then refresh your windows to see those changes.

● ● ●

As said before, you could create your own custom icons using Inkscape. Just keep the exact same icon names, and make your drawing a #bebebe light gray on top of an empty, transparent background.

When you are sure everything is okay, you can then duplicate your mods into /usr/share/icons/Mint-Y and delete your previous ~/.icons/Mint-Y test zone. (OPTIONAL)

P.S.: Oh, and by the way, i can confirm this strange behavior on LM C 21.1: the window controls get changed when you select another icon theme. I just tested switching from Mint-Y to Mint-X icons, and this changed my window control icons...

[AZgl1800]

LM21 and LM 21.1 Cinnamon desktops,

I can't duplicate the effect at will, but sometimes, when my mouse cursor is at, or near the top edge of the Panel, the entire Panel display flashes rapidly full width....

Extremely annoying, when trying to click on a "link" just above the Panel.

[AZgl1800]

LM21 and LM 21.1 Cinnamon desktops,

I can't duplicate the effect at will, but sometimes, when my mouse cursor is at, or near the top edge of the Panel, the entire Panel display flashes rapidly full width....

Extremely annoying, when trying to click on a "link" just above the Panel.

It happened again, and I was able to Determine that it is when the Cursor is near the bottom of the page, and just crossing the Boundary between to Links, in this case, between two Email Messages...

this is NOT restricted to yahoo email, it just happened to be the 1st website that it reoccurred on.


https://www.youtube.com/watch?v=5Ty1sSmNHhw

[jelabarre59]

There was already a discussion about this there: https://github.com/SebastJava/mint-yz-t ... ussions/51

...

So, to sum up, it should be possible to do whatever you want, but it is not easy, not quick.

The problem there is how do you even determine what bit of the XML created the layout of the textured titlebar in the first place?

Between broken theming, the CSD abomination, etc, it's almost come to the point of having to fork GTK in order to undo/remove the breakage in GTK inflicted on it by the GNOME folks. Must be what becomes of a set of libraries promoted by a bunch of Microsoft fanboys. Certainly gtk-nocsd needs a lot of reworking since newer GTK seems bent upon breaking that workaround to their machinations.

[sebastjava]

The problem there is how do you even determine what bit of the XML created the layout of the textured titlebar in the first place?

Good question. I don't know. I am not making the effort to go into your XML and try to investigate. That would probably require lots of trials and errors, and i would probably have to logout-login for each tweak i would want to try. I would just want to create something new. I guess what you are looking for is something similar to the titlebar screen capture as posted on your previous viewtopic.php?p=2263206#p2263206 here. That's just a green-to-gray linear gradient. It shouldn't be too hard to achieve through CSS. I don't see any texture there. Just a linear color gradient. Something like this:

Code: Select all

background-image: linear-gradient(#bfdf9f, #80aa55);

Now, in my previous post i just referred you to https://github.com/SebastJava/mint-yz-t ... ourself.md without any other indication. That was not precise at all. I would recommend you first download or clone the official mint-themes or my Mint-Yz fork. And then take a look at src/Mint-Y/gtk-3.0/sass/_colors.scss. In there, you could experiment with the $header_bg and $header_border variables. You could also search for these variables in _common.scss or _drawing.scss to see how they are being used, and possibly make some more serious modifications.

But that's not so quick and easy. You need to install some additional packages such as apt install sassc and possibly others. You don't need to run ./update-variations.py All, but you need to run ./generate-themes.py. And then:

Code: Select all

sudo rm -r /usr/share/themes/Mint-Yz-*; sudo mv usr/share/themes/* /usr/share/themes
gsettings set org.cinnamon.desktop.interface gtk-theme 'Mint-Y' # (to force refresh)
gsettings set org.cinnamon.desktop.interface gtk-theme 'Mint-Yz-Base' # (to force refresh)

Yes, it's heavy and time consuming. All this just for a little titlebar.

You could start with something more fun, lighter, and offering instant gratifications:
The Widget Factory. That's part of the apt install gtk-3-examples package.

Here is my quick and fun try:

Widget Factory headerbar color gradient (click to enlarge)

I got that with just one line of code:

Code: Select all

headerbar.titlebar {background-image: linear-gradient(#bfdf9f, #80aa55);}

So, yeah, maybe you don't need to go through the heavy SASS process. Maybe you just need to add this line at the end of your gtk.css file and that's it that's all.

● ● ●

Here i was just trying to help with the GTK, CSS, SASS, and the titlebars. As for complaining against the disappearance of Metacity, i am sorry but i do not agree with you. I find it is better now. You don't have to create windows using XML and then struggle to get approximately the same with CSS for the CSD windows. Now, all windows are created equal, using only CSS (or SASS). And the themes chooser got more simple and friendly: you can't choose separate window borders, so there is no possible mismatch. That's newbie friendly... and dumb proof.

[sebastjava]

Just a little update...

I finally did a fresh install of LM Cinnamon 21.1 and started using it, despite my heavy frustrations about the flashing and cropped shadows on some windows, sometimes.

So i installed this gtk-3-examples package, to get to use this Widget Factory. But it was hidden ! I had to:

Right-click on menu icon to Configure...> menu tab > Open the menu editor > Select "Programming" section > Show Widget Factory

From now on, you just have to go to Menu > Programming to open the Widget Factory.

So i did this quick test:

Code: Select all

mkdir -p ~/.themes # Just in case
cp -r /usr/share/themes/Mint-Y ~/.themes # For safe and quick testings

Then i opened ~/.themes/Mint-Y/gtk-3.0/gtk.css and added

Code: Select all

/* CUSTOM EDITS */
headerbar.titlebar {background-image: linear-gradient(#bfdf9f, #80aa55);}

at the end of the file, as said before. Then i saved this gtk.css file and forced refresh:

Code: Select all

gsettings set org.cinnamon.desktop.interface gtk-theme 'Mint-X' # (to force refresh)
gsettings set org.cinnamon.desktop.interface gtk-theme 'Mint-Y' # (to force refresh)

It worked, as expected. I just had to click on the windows to wake them up. Of course, you might want to change those #bfdf9f, #80aa55 color values for a stronger gradient.

NOTE: I had to logout/login for some updates to apply. The window borders can be "sticky", sometimes...

But you will probably prefer to have this green gradient on active windows only. Then you should use this line instead:

Code: Select all

/* CUSTOM EDITS */
headerbar:not(:backdrop).titlebar {background-image: linear-gradient(#bfdf9f, #80aa55);}

It worked as expected. On all windows, plain or CSD windows. But only for the active (focused) ones, for this second version where i added this :not(:backdrop) tricky pseudo-selector...

Have fun ! (And a happy new year !)