[How To] Setup a Shade of Z Desktop

Greetings,

This guide will show you how I set up my Desktop of Zorin OS 16 or use as an inspiration for something completely different.

It contains GTK and Gnome-shell theme which are modified Zorin OS theme. All credits goes to the Zorin team, I just edited some numbers.
The icon theme "Shade of Z" by me and a live wallpaper by "motionstock" on pixabay.

Application and Shell theme

  1. Download the modified GTK/Gnome-shell theme: Shade of Z - Desktop - pling.com

  2. Extract it to its rightful place. If you don't know how to install GTK/Gnome-shell theme, please check: How to set a third-party desktop theme

  3. Select ZorinGrey-Dark-Opacity in Application and Shell.

Icon theme

  1. Download "Shade of Z - White" from here: Shade of Z - Gnome-look.org

  2. Extract it to its rightful place. If you don't know how to install icon theme, please check: How to set a third-party icon theme

  3. Select Shade of Z - White in Icons box.

Live Wallpaper

  1. Download the video animation from here: https://pixabay.com/videos/rendering-3d-movement-geometry-26011/

  2. Follow this guide on how to have Live Wallpaper on Zorin OS: [HowTO] Live Wallpaper on Zorin 16

  3. A logout/login is required before it takes effect.

Other

The panels background opacity should be set to 80% to fit the rest of the themes.

That's it!
Enjoy!

I have now forked ZorinOS - Desktop themes and set up a github: GitHub - SethStormR/Shade-of-Z---Desktop
where the GTK/Gnome-shell themes are modified. Plus there's also now a light version of the GTK/Gnome-shell theme.

Version 1.1 of GTK/Gnome-shell have been released!

  • The menus are now opacity 90%
  • Zorin logo added to Nautilus

Download: GitHub - SethStormR/Shade-of-Z---Desktop: This is a fork of Zorin OS Desktop theme(s) and is modified by me. It adds opacity to the GTK theme and Gnome-shell menus.

XFCE is now supported and can be tested/used via the source code on my github page.
Special thanks to @Aravisian

One thing that bothers me about it is the titlebuttons.
The translucency of the window looks very Head Up Display. It also compliments the lack of window borders.
The Solid Opaque headerbar makes sense. But the titlebuttons stick out like a sore thumb, even turning a flat Red when pressed. The close x, maximize arrows and minimize line icons look very basic and old fashioned compared to the rest of the theme. I wonder if you might be interested in coming up with a design on those that compliments the rest of the appearance.

It's not finished yet. More is going to be done. :slight_smile:

Version 1.2 of Shade of Zorin - Desktop is out on github.

I made it little less translucent after feedback from users.
Added themes without the logo so people can choose.

Get it here: GitHub - SethStormR/Shade-of-Z---Desktop: This is a fork of Zorin OS Desktop theme(s) and is modified by me. It adds opacity to the GTK theme and Gnome-shell menus. XFCE is supported (for lite version of Zorin OS)

1 Like

Version 1.3 is out.

Made the final adjustment to opacity in gtk and gnome-shell.

@Aravisian is it possible instead of translucent to use a blur effect instead?

Currently gtk css does not support css3 filter.

There is a gnome-extension that may hep you achieve what you are aiming for (If I am understanding you correctly):

For XFCE (Seems to be only for the latest 4.16):
https://www.kalideva.com/xfwm-effects.html

1 Like

With blur. But damn it's heavy for the computer, plus it's buggy.

Looking at your screenshot, I wonder if a linear gradient with opacity might serve you better than Blur.
Maybe:

background-image: linear-gradient(to bottom, rgba(40,40,40,0.7), rgba(16, 16, 16, 0.65));

Change values to suit... I just made that up off the top of my head. That's hex #282828 and #101010.

In your screenshot, it is angled... You can also set the angle in your gradient:

background-image: linear-gradient(32deg, rgba(40,40,40,0.7), rgba(16, 16, 16, 0.65));

Or use rotation:

background-image: linear-gradient(.33turn, rgba(40,40,40,0.7), rgba(16, 16, 16, 0.65));

Change degrees or turn rotation to suit.

2 Likes

To Add:
I forgot an important detail- you already have a background image set (The Zorin Logo).
You can have more than one background image:

background-image: url("path/to/zorin-logo.png"), linear-gradient(32deg, rgba(40,40,40,0.7), rgba(16, 16, 16, 0.65));

If you need, you can have more gradient colors;

background-image: url("path/to/zorin-logo.png"), linear-gradient(32deg, rgba(40,40,40,0.7), rgba(36, 36, 36, 0.65), rgba(16, 16, 16, 0.65));

Playing with the values of the opacity on each can yield smoother or rougher effect, so that can be interesting to try different opacity values in each to see what happens.

1 Like

If people want to test the blur version, I have uploaded it to github, remember to install Gnome Extension: Blur. Feedback is welcome.

1 Like

Version 1.3 just hit Pling!!!!

Get the themes here: Shade of Z - Desktop - pling.com

1 Like

10 Days have gone and the Shadow of Z - Desktop theme(s) have been downloaded over 800 times alone on Pling and 600 times on Github. Wow!

3 Likes

Congrat!
Just realized it is also a very good advert for Zorin OS.

2 Likes

Shade of Z - Desktop (GTK/Gnome-shell) 1.4 has been released on github!

What's new?
Tree-view done translucent.
Sidebar right click done translucent.
Added colors: Blue, Green, Orange.

Get it here: GitHub - SethStormR/Shade-of-Z---Desktop: This is a fork of Zorin OS Desktop theme(s) and is modified by me. It adds opacity to the GTK theme and Gnome-shell menus. XFCE is supported (for lite version of Zorin OS)

1 Like

Shade of Z - Desktop (GTK/Gnome-shell) 1.4 has been released on Pling!

1 Like