Hey,
I'm currently using ZorinPurple theme and I was asking how can I change the 'close window button'. I want to make it looks like MACos.
I changed pictures in /usr/share/themes/ZorinPurple-Dark/xfwm4 and restarted my computer but I still have old icons. Is there a way to change this ?
Thank you !
If you can post screenshots, that may help illustrate your intentions and results.
I also created the Zorin Based Zenith Themes, which correct for the impossibly narrow grabable area to resize a window; so we can be confident that we can fix your XFWM4 theme.
Sure ! I want to replace this:
By this:
I only want to change icons. Can you send me the link about what you created ? It looks like interesting.
EDIT: The test theme is comming from GitHub - vinceliuice/WhiteSur-gtk-theme: MacOS like theme for all gtk based desktops
I only created the Dark Themes - because I am evil.
https://launchpad.net/~aravisian/+archive/ubuntu/gtk-theming/+files/zenith-purple-dark_1.1-6_all.deb
Zenith Purple Dark is near the bottom.
Quick question:
XFWM4 - XFCE, that is Zorin OS Lite.
But... are you using Zorin OS Core?
Yes I'm using core
Core is Gnome. It themes very differently than XFCE does... and it is a lot harder to make changes to it...
The titlebuttons are themed in the gtk.css of gtk3 and gtk4 directories of the theme.
They rely on the gtk-icon-source of the symbolic icons, which is why you do not see specific close, minimize and maximize assets in the assets folder.
So If I edit the css file I may see changes. I'll look into it ty
1 Like
Maybe this can help?
Edit: I tried to install it but neither
~/.config/gtk-3.0/gtk.css
nor
~/.config/gtk-4.0/gtk.css
exist in Zorin. So I didn't get any further. I tried to add the @import... to my Zorin light gray theme in the 3.0 and 4.0 css files of the theme, but that didn't work.
So I am not sure if it would work on gnome 43. The code was only tested on gnome 46. And I don't know if it would help to download the css files from github shown at "source" and put them into the .config folder.
1 Like
I did it but I does not seems working.
Steps:
- Go into
/usr/share/themes/ZorinPurple-Dark/gtk-3.0/gtk.cssand paste@import "../macos-like-window-controls/gtk-3.0.css";at the top of the file - Go into
/usr/share/themes/ZorinPurple-Dark/gtk-4.0/gtk.cssand paste@import "../macos-like-window-controls/gtk-4.0.css";at the top of the file
and put the folder in /usr/share/themes
- Restart the computer
Did I do something wrong ?
macos-like-window-controls
├── assets
├── gtk-3.0.css
└── gtk-4.0.css
ZorinPurple-Dark
├── gnome-shell
├── gtk-2.0
├── gtk-3.0
├── gtk-4.0
├── xfwm4
└── index.theme
CSS is Cascading Style Sheet and the cascading is the important factor, here.
Reading that page, the themer seems confident and you seem to have followed the provided instructions.
But Gnome locks things down. LibAdwaita overrides user custom theming and injects its own...
I am not free to attempt a re-theme of Zorin-Purple GNome theme at this moment, but I can try reviewing this later in detail.
I am sorry, but - this will take time and work - it is not as simple as you may hope.
Yeah it's understandable. I through it was easy but it's not. I'll find an other way to do it. Ty for ur help !
1 Like
Finally I found something:
- Go into
Path/to/theme/gtk-3.0/gtx.cssand find
button.titlebutton:not(.appmenu) {
- Replace this by
button.titlebutton:not(.appmenu) {
border-radius: 50%;
padding: 0;
margin: 0 3px;
min-width: 12px;
min-height: 12px;
border: 1px solid rgba(0, 0, 0, 0.2);
background-color: #ff5f57; /* Rouge par défaut */
transition: all 150ms ease;
}
button.titlebutton.close {
background-color: #ff5f57;
border-color: #e0443e;
}
button.titlebutton.close:hover {
background-color: #ff6b63;
box-shadow: 0 0 0 1px rgba(224, 68, 62, 0.3);
}
button.titlebutton.close:active {
background-color: #e0443e;
}
button.titlebutton.minimize {
background-color: #ffbd2e;
border-color: #dea123;
}
button.titlebutton.minimize:hover {
background-color: #ffc539;
box-shadow: 0 0 0 1px rgba(222, 161, 35, 0.3);
}
button.titlebutton.minimize:active {
background-color: #dea123;
}
button.titlebutton.maximize {
background-color: #28ca42;
border-color: #1aab29;
}
button.titlebutton.maximize:hover {
background-color: #32d64c;
box-shadow: 0 0 0 1px rgba(26, 171, 41, 0.3);
}
button.titlebutton.maximize:active {
background-color: #1aab29;
}
button.titlebutton:backdrop {
background-color: #c4c4c4;
border-color: #a0a0a0;
opacity: 0.7;
}
button.titlebutton image {
opacity: 0;
}
button.titlebutton.close:hover::before {
content: "×";
color: #4a0000;
font-size: 10px;
font-weight: bold;
display: block;
text-align: center;
line-height: 10px;
}
button.titlebutton.minimize:hover::before {
content: "−";
color: #4a3400;
font-size: 10px;
font-weight: bold;
display: block;
text-align: center;
line-height: 10px;
}
button.titlebutton.maximize:hover::before {
content: "+";
color: #003d00;
font-size: 10px;
font-weight: bold;
display: block;
text-align: center;
line-height: 10px;
}