CSS classes in gnome-shell for panel's menus background and slider

Question

I would like to change the background of panel's menu (and make it transparent) and change the color of the slider (from purple to orange). I like the default Ubuntu shell theme, so I don't want to use custom themes. I also want to change the background of search text form (unfocused). What are the classes/ids in gnome-shell.css? I tried but I didn't find them.

Another question is where can I find a default gnome-shell.css file? Until now I used files from custom themes but if I extract the .gresource file in /usr/share/gnome-shell/themes/ I don't get the default css.

Check the image:

To start with, which version of Linux have you installed (Ubuntu server, Ubuntu desktop, Kubuntu, Lubuntu, Xubuntu, Ubuntu MATE, et al.) , and which release number? Different releases have different tools for us to recommend. Please click [edit] and add that vital information to your question so all the facts we need are in the question. Please don't use Add Comment, since that's our channel to you. All facts about your system should go in the Question with [edit] — K7AAY, May 06 '20 at 17:30

PRATAP · Accepted Answer · 2020-05-07T03:31:40.397

for Ubuntu 20.04 default shell theme, the css file is

Yaru/gnome-shell.css from the gresource file /usr/share/gnome-shell/theme/Yaru/gnome-shell-theme.gresource

For panel menu background, lookinto this part of the .css file

.popup-menu-boxpointer, .candidate-popup-boxpointer {
  -arrow-border-radius: 6px;
  -arrow-background-color: red;
  -arrow-border-width: 1px;
  -arrow-border-color: rgba(0, 0, 0, 0.35);
  -arrow-base: 24px;
  -arrow-rise: 12px;
  -arrow-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }

for changing the slider-background color: search for these fields..

.slider {
  height: 15px;
  -barlevel-height: 3px;
  -barlevel-background-color: #e1e1e1;
  -barlevel-border-width: 1px;
  -barlevel-border-color: #c7c7c7;
  -barlevel-active-background-color: #924D8B;
  -barlevel-active-border-color: #81447b;
  -barlevel-overdrive-color: #c7162b;
  -barlevel-overdrive-border-color: #b51427;
  -barlevel-overdrive-separator-width: 1px;
  -slider-handle-radius: 7.5px;
  -slider-handle-border-width: 1px;
  -slider-handle-border-color: #b5b5b5;

for changing the background color of "search entry" in overview..

.search-entry {
  width: 320px;
  padding: 7px 9px;
  border-radius: 18px;
  color: rgba(61, 61, 61, 0.7);
  background-color: #FAFAFA;
  border-color: #c7c7c7; }

Search Field Unfocused.. Green Color

Thank you all for the answers. Unfortunally I don't speak english very well so I don't know the exact name of some elements of the UI. Thanks for the search bar. Instead about the panel I was referring to the panel menus (example the one that appears if you click on the battery or the calendar/clock). I want to find the specific class to make the background color (at the moment white) more transparent. Thanks again! — antoniom96, May 06 '20 at 21:56
Ok.. I was misunderstood.. now corrected about "panel menu".. — PRATAP, May 07 '20 at 03:23

CSS classes in gnome-shell for panel's menus background and slider

1 Answers1