What's wrong with my custom made .css file for Gnome shell?

Customization
1

I'm trying to change the color of the font in overview. My custom made .css file look like this:

.show-apps .show-apps-icon {
border: none;
background-image: url("file:///home/storm/Documents/RetroRed.svg");
background-size: contain;
color: transparent; }

.show-apps:hover .show-apps-icon, .show-apps:active .show-apps-icon, .show-apps:checked .show-apps-icon, .show-apps:focus .show-apps-icon {
color: transparent; 
background-image: url("file:///home/storm/Documents/RetroRed.svg");
background-size: contain; }

#panel .panel-button {
    color: rgba(40, 40, 44, 255);
}

.show-apps .overview-icon {
    color: #28282C;
    font-weight: bold;
}

Everything works except this part:

.show-apps .overview-icon {
    color: #28282C;
    font-weight: bold;
}
2

Have you tried adding !important to those values?

3

Perhaps a font-size needs to be specified?

4

Did You tried instead of the Hex code a rgba Value for the Color?

And could it be that the Part must be directly under the other .show-apps Values and not be seperated by the #panel .panel-button Value?

5

Wasn't this class deprecated after Gnome 40?
Does GTK Inspector identify the Icon class?

6

It have no impact. :confused:

It shouldn't have. It will use the default if not specified.

Didn't have any impact, I'm afraid :confused:

It aren't easy to to keep up with the Gnome teams eradicating useful commands. I also try .icon-grid
The new black in inspector is "looking glass" in GTK4 - simple alt+f2 and write lg ... but it's harder to find what you're looking for.

7

I suspect that overview-icon is the issue. Part of the trouble of me not using GNome is my inability to simply go look for something...

I know that overview-icon was used in Gnome3+ for when a text label was carried but after Gnome4+, that class was removed.
BUT... I understood this was because they also removed the Text Label itself. Meaning that there is no over-view icon class (instead they use sticon for symbolic icons) and no label.

In Looking Glass, search show-apps and inspect its children.
You might see stbutton or sticon - Unless something has changed, I do not believe you will see st-label but happy to be wrong...

EDIT:
Try the .app-well class instead of .show apps class. Looking into documentation, that carries the overview...:

.app-well-app .overview-icon,
.app-folder-icon .overview-icon {
    color: #28282C;
    font-weight: bold;
}
1 Like