[Users] GTK3 theme questions

Brad Barnett claws-ml at l8r.net
Mon Dec 11 07:29:55 UTC 2023


Thanks everyone for their help, and Pete for the CSS.

None of this worked out for me.  Theming in GTK3 is a royal annoyance.

I got close to what I wanted, but couldn't get rid of all the extra
spacing, and just issues trying to work around (what I deem) to be a
silly and broken theming system.

Thankfully, I noticed that there is still a gtk2 maintained branch.  I
don't know how long it will last, hopefully for a few years, and thanks
to the claws team for doing so.

I mean it.  Thanks.  I'd be bananas without the gtk2 branch.

I used debian's rules directory, and tweaked things a bit, and have a
debian build/package I can employ down the road if needed.

Again, thanks claws team.

On Sun, 10 Dec 2023 21:29:46 +1100
blind Pete <peter_s_d at fastmail.com.au> wrote:

> 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
> _______________________________________________
> Users mailing list
> Users at lists.claws-mail.org
> https://lists.claws-mail.org/cgi-bin/mailman/listinfo/users


More information about the Users mailing list