Editing gnome-shell.css

Customization
1

So far I've found and edited as I pleased in gnome-shell.css but there's one factor I can't find:

selected

The color gradient of selected menu in the panel. I've used hours looking through the file and I can't find it anywhere...

2

If you mean this

Screenshot from 2022-02-11 21-08-31

Try
Preformatted textpopup-menu-item.selected
look for background-color

3

Thanks for the reply

I found this string that only color half of it :thinking:

.popup-menu .popup-menu-item:checked.selected {
  background-color: #deaa87;
  color: #FFFFFF;
}

But that doesn't explain where the cyan color comes from....

4

I guess you actually meant the "Gradient".

I too have tried several ways to change that, especially with 3 gradient, which can be done in the gtk.css with -->

background-image: linear-gradient((to bottom/or to right) , #ffffff, #ffffff, #ffffff );
But the gnome-shell.css does not accept/work with the background-image option.

5

Yup, didn't work in gnome-shell.css
I'm modding someone else's work. I'm wondering how he manage to make the Gradient effect :thinking:

6

Try searching the file for gradient or a transition. I'm not sure what other possible keywords would be related to that color effect.

It might be in the javascript file and not the css at all. If you find what the variable is called, you may be able to modify it using css.

7

Tried that with no luck. I also checked if a image was used in the process. It's really a puzzle...

8

Is that part of the panel?

Try the js/ui/panel.js

Wouldn't know where it is in your system.

9

Other than gnome-shell.css there's nothing else other than pad-osd.css which contains;

Leader {
    stroke-width: .5 !important;
    stroke: #535353;
    fill: none !important;
}

.Button {
    stroke-width: .25;
    stroke: #ededed;
    fill: #ededed;
}

.Ring {
    stroke-width: .5 !important;
    stroke: #535353 !important;
    fill: none !important;
}

.Label {
    stroke: none !important;
    stroke-width: .1 !important;
    font-size: .1 !important;
    fill: transparent !important;
}

.TouchStrip, .TouchRing {
    stroke-width: .1 !important;
    stroke: #ededed !important;
    fill: #535353 !important;
10

/usr/share/extensions/zorin-taskbar etc.

11

I even have it in the calendar. This gradient is a combination of the color defined in field >.popup-menu-item:checked.selected

with the blue-ish one. This blue-ish color can even be found in the sound output level.

Screenshot from 2022-02-11 23-23-31

Screenshot from 2022-02-11 23-29-38
Screenshot from 2022-02-11 23-29-38705×224 10.9 KB

I looked in the files panel.js and taskbar.js in folders /usr/../zorin-taskbar..., but there is no color defined there.

Perhaps Aravisian can tell where that date icon/color in the calendar can be found.

1 Like
12

I just answered a PM on this before I saw this thread... :stuck_out_tongue:
I will wait on storm to reply back on whether he assigned the gradient in css2 or css3

3 Likes
13

It worked!

selected

.popup-menu .popup-menu-item:checked {
background-gradient-direction: horizontal;
     background-gradient-start: #765a4f;
     background-gradient-end: #deaa87;
  color: #FFFFFF;
  box-shadow: none;
  border: none;
  font-weight: normal;
}

.popup-menu .popup-menu-item:checked.selected {
  background-gradient-direction: horizontal;
     background-gradient-start: #765a4f;
     background-gradient-end: #deaa87;
}

Now I just do the same on the calendar spot.

1 Like
14

.calendar-today:active, .calendar-today:selected

15

it worked, I'm trying it vertical. But what I'm trying to achieve is a gradient of 3 colors which makes it more realistic and shiny. (I know we're never satisfied).

like this:
Screenshot from 2022-02-12 04-21-00

Its all css and defined in the gtk.css file as

background-image: linear-gradient(to bottom, #bf8b8b, #a10000, #ff3030 );

But that gnome-shell file will not accept it.

2 Likes
16

Are you logged in on Gnome or Cinnamon?
In Gnome-Shell, you gradients are not fully supported as they are in css3.
You must use two gradients:

{
     background-gradient-direction: vertical;
     background-gradient-start: #212121;
     background-gradient-end: white;
}
17

Nope, that's not it, whether I use Cinnamon or not.
On gnome defining the 3 colors while using nautilus gives me this;
Screenshot from 2022-02-12 19-15-04

And in gnome-shell with 2 colors gives me this.
Screenshot from 2022-02-12 19-15-13

Sadly we can't define "mid/center" tone (only start and end) to the horizontal or vertical gradient. I've been peeking in to your gtk.css and the linear-gradients can even have more than 3 colors. (In my opinion it looks more lively, not so flat).

18

A box-shadow may help.

box-shadow: inset 1px 4px 3px 2px rgba(255, 255, 255, 0.5);

I just made that up, haven't really tested it to see what it would look like against your color scheme - but you can play with the values.

1 Like
19

Whaaaaaaat :smiley: Are you rewriting css. You mean it was always there but we had no idea how to use it or....

That's why I'm puzzled why the gnome-shell css won't work with background-image as gradient or background gradient as image.

Like it, certainly gonna try it thanks a lot.

20

I meant that I made up the values used in it.

You can also set an image as border-image: and see if that works.