Transparent windows on zorin os

Greetings

Almost in every video about Zorin OS on the internet you can see very nice transparent windows. I did search for it but as I'm new user in Linux, unfortunately I couldn't find any solution.

I will appreciate if anyone help me with that.

Thank you so much :pray:

Are you able to link to some of these videos?
I am not sure if you mean Panel Transparency or Window or Terminal...

Generally, the Zorin OS default themes are not transparent.

1 Like

Welcome to Linux :slight_smile:
I am assuming you want a transparent theme something like

Unfortunately there is no easy way to implement this.We can however jump through some hoops and implement it part by part.

First we can easily setup transparency for the taskbar from Zorin appearance-->interface-->taskbar settings-->opacity

Similarly for terminal open terminal and then click on three bars on top right-->preferences-->-->unnamed -->colors-->use transparent background.

As you are in gnome(core version) there is no easy way to get a transparent menu. The best I can think of would be to use gnome style layout from Zorin Appearance---> layout (select the third one ) which has a transparent background.

Or you can install Zorin OS light DE and install and configure the highly customizable whisker menu.You should find some threads in the forum detailing how

Now what you want is to add blur to the transparent windows(without which they are impossible to read from most of the time) now the 'recommended' way would be to use mutter rounded,but as you are new to linux plus the fact that it doesn't always work ,makes me think a alternative method would be better

For that you can install 'blur my shell' and 'blur me' extension from gnome extensions how?

Results:(I had to use both to get everything to blur


)

The blur extensions are resource intensive and might cause lagging if you don't have a powerful setup

To get file manager and other apps to follow the same theme you can install a transparent theme (I did not test this)
The guide I followed suggests this
If the blur is too laggy you can use the transparent theme alone.

Alternatively I Think You can install KDE DE which i think has better support for transparent/blur themes,keyword being,'I think' as I have no experience with KDE and I am not confident in guiding you

2 Likes

unfortunately I couldn't find those that I've seen before but here is one of them which you can see some of his windows transparency.

thank you so much it was very useful to me.

but let me ask it for last time. so there is no way that we could have windows in zorin os like this picture ?

image

There is and @Storm and I have both created translucent themes.
You can achieve this affect on most things by creating a custom gtk.css file in ~/.config/gtk-3.0
There is not a ready made GUI setting for it, though. We would need to walk you through that process and find the relevant classes to assign the transparency to.

This is an alternative to the "Blur my shell" extension mentioned by @Kayjzjzk above.

thank you

can you plz do me a favor and send me a picture of it ? so I can see how it is looks like ?

and do you have any type of instruction to send me ? or any kind of educational video ?

Sure, here is @Storm 's Shade of Z theme with window transparency:

Here is an example of one of mine also showing transparency:
https://www.deviantart.com/aravisian/art/Predator-Theme-895987019

You may not want "that theme" but it does illustrate the ability.

I am not aware of an educational video that can cover this topic neatly and swiftly. It comes down to learning .css and that is done by practice, practice, practice.

You can start out by creating a gtk.css file and placing it in ~/.config/gtk-3.0

Inside that file, put:

 .background {
     color: #fff;
     background-color: rgba( 10, 10, 10, 0.6);
}
 window.csd {
     background: rgba( 10, 10, 10, 0.5);
window.dconf-editor {
     background: rgba( 10, 10, 10, 0.94);
}
 .content-view {
     color: #fff;
     background-color: rgba( 10, 10, 10, 0.4);
}

Reload the desktop to see the changes.
Using that as a starting point, we can slowly make changes to the different classes to perfect it.

3 Likes

oh my goodness :heart_eyes:
you're amazing man, thank you soooooo much. you made my whole week :blush:

this is the result:

can you plz tell me what to do next? you know this is wonderful but reading is a little hard.

1 Like

Does this apply to every window or can you apply it selectively i.e., only the terminal, firefox, etc?

@Kamisema Looks good! Make sure to head over to this thread when you are done with your tweaks:

Share your desktop, what does it look like?

1 Like

Due to this: .background and window.csd - yes. For the most part.
Which can be problematic. You may notice I isolated window.dconf-editor and reduced its transparency because it has so many elements on screen, making it too transparent made it harder to read.
So, yes, you can apply it selectively per app.

Let's look at the property:
rgba( 10, 10, 10, 0.6)
That is RBG - A
The RGB is the color scheme and the A is the Alpha Transparency.
I set the value to 0.6 which is a bit middle of the road. You can set it to be more opaque:
(since there is this comment)

Maybe
rgba( 10, 10, 10, 0.75)

Or you can set it to less opaque:
rgba( 10, 10, 10, 0.3)

I have no idea. LOL. I am not using your computer to see what little faults there are. So as you use it, when you notice something that needs adjustment or changing, just please ask here in this thread.

And there are other things you can do in the .css including highlighting the text color, creating shadows and so forth.

3 Likes

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.