How to get transparent notification on zorin 17.1

General Help
1

Hi
I want to get transparent notification in zorin os

1000009550
10000095502869×705 490 KB

transparent notification on gnome extension unsupported

1 Like
2

Proplerly you have to do some .css coding.

2 Likes
3

Explain to me

4

Well, first you need to eg. download a gnome-shell theme or a theme containing gnome-shell theming and installing it under ~/.themes.
Next you go to that themes gnome-shell folder and find gnome-shell.css and start coding.

5

You can also create a custom gtk.css file placed in ~/.config/gtk-3.0/ and ~/.config/gtk-4.0 that can facilitate this.
This file will only affect elements you specify and takes first priority.

With your files created, paste into each (it should be the same for both):

.notification {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    box-shadow: none;
    color: #ffffff;
}

.message {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    box-shadow: none;
    color: #ffffff;
}

The .notification and .message are the Style Classes defined by the widget that the .css can call on.
In the brackets are the Properties and the Values.
For example, border is the border property. You can give it a value, like none or dashed or ridge as well as values that assign in a width in pixels like 1px or 3px or a color in hex or by name; 000000 or black.
In the above, the .css calls on .notification to have a fully transparent background property, in this case specifying background-color (you can use background as an image, as well). This is rgba which is RGB (RedGreenBlue) plus A (ALPHA transparency).
The alpha value can be fine tuned, and you can adjust the color of the window to match your system to give the transparency an opaque finish instead of being fully transparent. The first three numbers are the RGB Colors and the forth is the Alpha layer transparency:
For example, slightly blue with less transparency:
background-color: rgba(0,191,255,0.3)
When the alpha reaches 1, all transparency is gone, so ``background-color: rgba(0,191,255,0.99)` would not appear transparent at all, being barely ever so.
An alpha value of 0.01 would be so transparent, you would think it was fully transparent.

You can use w3 schools and other resources to learn more about .css so you can really enhance your U.I. experience.
The above removes the border by setting it colorless with no other properties, but if you want a semi-transparent window with a dark border or the window to have a gradient shadow on the background as though it were hovering on your screen, these can easily be done by entering in values for those properties.

Once you have set the files, pasted the contents and adjusted any values to meet your needs, Save the Files and reboot to see the effect.

1 Like
6

Thank you for sharing this. I was having another issue related to my XFCE theming that couldn't work around for some reason. Writing the styles in this location absolutely did the trick.

To this I would just add that w3schools is mostly focused on CSS in the context of the web browser. CSS has come a long way and a lot of modern properties are not yet supported by the CSS engine that GTK uses, as I've found out recently.
For example properties like aspect-ratio and even something more straight forward like width don't work.

7

Or :before and :after transformations. But... For understanding Classes, properties and values, it will get a person most of the way there.

In gtk.css, width is usually handled by the .py file for the widget. If it isn't, there are usually ways to get what you are trying for...

1 Like
8

For now I'm happy with the small changes that I've made, I just wanted to make things a bit more consistent in terms of spacing which I did using padding. I will look into customizing the system tray next, that one seems a bit more complicated as there doesn't seem an easy way to target it. I might checkout the theme for Zorin OS Lite, that actually looks quite good.

9

Without really knowing what you are looking for and what you mean... it's hard to say. But for the plugins on the panel, you have the classes:

#pulseaudio-button, #xfce4-clipman-plugin, #xfce4-notification-plugin, #xfce4-power-manager-plugin, #indicator-button, #sn-button, #showdesktop-button, #dictionary-button, #clock-button

You may be able to narrow it down from there, for example the #xfce4-notification-plugin or sn-button.

10

Thanks, I'll have to try them out and see how they work. For now, I'm not even sure what I'd like to do. Perhaps changing the color so that it's monochrome? Although I see that the filter property to apply a grayscale is not valid... I would also like to change the order of the items if possible, but those are little things that don't bother me too much.

In any case, I don't want to hijack this thread so I'll look into it a bit more and see how far I can get on my own.