[Users] GTK3 theme questions

[blind Pete]

On Sun, 10 Dec 2023 01:44:46 -0500
Brad Barnett <claws-ml at l8r.net> wrote:

> There is banding, or lines, which alternate between each item in the
> message list, and folder list views.
> 
> I seem to be able to change everything else.  Backgrounds, and the
> 'grey' bands, but when it comes to the light/white bands, no CSS
> theme or theme property seems to ever change them.
> 
> I've tried a bunch of themes, and tried using properties like * {}
> with background-color and variants, but I can never seem to change it
> to any other color.
> 
> The GTK3 inspector tool seems quite... useless to me.  Too much
> detail, without enough depth or something.  It just doesn't seem to
> tell me what each row, how each row is themed. 
> 
> Anyhow, does anyone know how to change the white bands?
> 
> (Bright colours burn my eyes)
> 
> Thanks

If you give up the banding then 

* {
  background-color: Gray;
}

in gtk.css will do it.

But if you want *gaudy* that responds to the Tab key and to the mouse
pointer...

<=== gtk.css ===

/* @import url("button.css"); */
   @import url("menu.css"); 
   @import url("file:/home/psd/.config/gtk-3.0/scrollbars.css"); 
   @import url("box.css"); 

/*
* {
  margin: 1px;
  border-width: 1px;
}
*/



/* https://docs.gtk.org/gtk3/css-overview.html
 *
 * Another use of pseudo-classes is to match widgets depending on their state. The available pseudo-classes for widget states are 
 * :active	    being run
 * :hover	    roll over with the mouse
 * :disabled	    not availible (by the application)
 * :selected 
 * :focus	    Tab key
 * :indeterminate 
 * :checked	    Alt-Tab preview, check boxes
 * :backdrop	    not the top window
 *
 * In addition, the following pseudo-classes don’t have a direct equivalent as a widget state: :dir(ltr) and :dir(rtl) (for text direction); :link and :visited (for links); :drop(active) (for highlighting drop targets). Widget state pseudo-classes may only apply to the last element in a selector.
 */

<==== end gtk.css ===

<==== box.css ===
button :hover, box :hover {
  border-width: 1px;
  border-color: Red;
  background: Orange;
  color: Crimson; 
}


box :focus {
  border-width: 1px;
  border-color: Crimson;
  background-color: white;
  color: Black;
}

* :checked {
  border-width: 1px;
  border-color: Green;
  background-color: YellowGreen;
  color: Blue;
}

box :selected {
  border-color: lightBlue;
  background-color: Orange;
  color: Black;
}

* :selected {
  border-width: 1px;
  border-color: Orange;
  background-color: LightGreen;
  color: Crimson;
}

box :active {
  color: Green;
  border-width: 1px;
  border-color: Red;
  background-color: Orange;
}

* {
  background-color: Gray;
}

<==== end box.css ===

<==== menu.css ===

menu {
  /*
  border-width: 1px;
  border-color: Red;
  background-color: Wheat;
  background: Wheat;
  */
  background-color: Linen;
  color: Red;
  margin: 0px;
}

menu :hover {
  background-color: Red;
  /*
  border-width: 1px;
  background: Red;
  border-color: Red;
  */
  background: Pink;
  color: Yellow;
}

<=== end menu.css ====

<=== scrollbars.css ===


scrollbar
{
    -XfceTasklist-max-button-size: 0; 
    -XfceTasklist-min-button-length: 3000; 
    /* Needed or else no buttons! */
    -GtkScrollbar-has-backward-stepper: true;
    -GtkScrollbar-has-forward-stepper: true;
}

scrollbar button {padding: 6px}

scrollbar trough               { background-color: #FF8070; }
scrollbar slider               { background-color: #FF0000; }
scrollbar button               { background-color: #FF0000; color: black; }

scrollbar trough:backdrop      { background-color: #dd69B4; }
scrollbar slider:backdrop      { background-color: #800000; }
scrollbar button:backdrop      { background-color: #a00000; color: #333333; }

scrollbar trough:hover         { background-color: #FF4088; }
scrollbar slider:hover         { background-color: #ff2200; }
scrollbar button:hover         { background-color: #000000; color: red;  }

scrollbar slider:active        { background-color: #000000; }

scrollbar button:disabled      { background-color: #C00088;  color: red; }

scrollbar button:backdrop:disabled { background-color: #600044; color: black; }

/* https://docs.gtk.org/gtk3/css-overview.html
 *
 * Another use of pseudo-classes is to match widgets depending on their state. The available pseudo-classes for widget states are 
 * :active, :hover :disabled, :selected, :focus, :indeterminate, :checked :backdrop. 
 * In addition, the following pseudo-classes don’t have a direct equivalent as a widget state: :dir(ltr) and :dir(rtl) (for text direction); :link and :visited (for links); :drop(active) (for highlighting drop targets). Widget state pseudo-classes may only apply to the last element in a selector.
 */

<==== end scrollbars.css ===

-- 
sig goes here...
bP