How do I make the sidebar transparent?

Customization
#6

To set a background color, you would use the background-color property, not image.

background-color: rgba (20, 20, 20, 1.0);

For a background image, you would have the url to the file. If you place the image referenced near the gtk.css, you do not need the full path. If you place the image in the same directory as the gtk.css, for example:

background-image: url("image-file.png");

If the image is placed two folders away from the gtk.css, for example in /theme/assets:

background-image: url("theme/assets/image-file.png");

2 Likes
#7

Thanks for the clarification.

#8

You can use a color under the background-image property when using a gradient.
To use mine from Azenis2021 for example:

background-image: linear-gradient(to right, #353535 0%, #4c4e52 15%, #53565B 85%, #2e2e2e 100%);

Let's say you want that to be one color; an easy way would be:

background-image: linear-gradient (to right, #4cd9a4, #4cd9a4);

You can use rgba (The a in rgba is the alpha or opacity) instead of hex in gradients, too:

background-image: linear-gradient (to right, rgba(76, 217, 164, 0.5), rgba(76, 217, 164, 0.9));

While exploring, you can explore radial gradients as well as gradient stops to get even more clever things, as well.
My example from Azenis 2021 above is an example of color stops.

2 Likes
#9

Progress... :stuck_out_tongue:

Screenshot from 2021-07-06 19-16-31
Screenshot from 2021-07-06 19-16-311920×1080 280 KB

1 Like
#10

Ah, so it is my window manager that prevented me from testing it. :slight_smile:

1 Like
#11

Okay, I got set selected windows to have 20% opacity. What should I look for to change unselected windows?

#12

Unfocused is the backdrop property:

.nautilus-window .sidebar:backdrop {
}

1 Like
#13

Is this CSS?

#14

Yes, everything covered in this thread so far has been with .css.

1 Like
#15

I have uploaded my changes to githhub for those who are interested - 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.

#16

Added opacity to the context menus, 90% not 80% so they don't melt together.

Screenshot from 2021-07-07 21-25-14
Screenshot from 2021-07-07 21-25-141920×1080 399 KB

#17

It seems that right click on some elements in nautilus doesn't get opacity when editing menu. I'm not sure what to look after here. Is it in the .menu section or the .nautilus section.

Screenshot from 2021-07-07 21-50-08
Screenshot from 2021-07-07 21-50-08999×524 39.4 KB

#18

try:

menu, .menu, .csd menu {
}

1 Like
#19

Found it:

.csd menu, .csd .menu, .csd .context-menu { border: none; border-radius: 8px; background-color: rgba ( 20, 20, 20, 0.9);}

Noticed that I inserted an Zorin logo in nautilus :slight_smile:

Screenshot from 2021-07-07 22-39-19
Screenshot from 2021-07-07 22-39-191018×529 55.2 KB

#20

I can't see it...

#21

It's vague in the right upper corner of nautilus. :slight_smile:

1 Like
#22

Got it. I was looking for something icon sized. :smiley:
Do you have it positioned so that expanding the window won't cut it off?

#23

No, I'm not sure how to that...

#24

You can use the background-position property.
One thing that makes making a theme difficult is that not everyone sizes their window the same way. As well as other variances.
For the value of the property, you can use percentages for x and y:

background-position: 40% 60%

Or set values:
inherit
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

1 Like
#25

Works like a charm, thanks.