Home / ubuntu / Questions / 1236244
Accepted
antoniom96
Asked: 2020-05-07 08:56:49 +0800 CST

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

  • 772

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:

themes style css gnome-shell

1 Answers

  1. Best Answer

    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); }

    enter image description here

    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; }

    enter image description here

    Search Field Unfocused.. Green Color

    • 1