4

I'm using yad for GTK3 (not GTK2) on a Raspberry Pi 3 to display a set of buttons. The screen is far away from where I sit so I need a way to make the button text and highlighted button stand out. I'm totally unfamiliar with the inner workings of GTK3 and just need a step by step of what to do. I don't wish to change themes or other more global settings, I just want it to work for this YAD execution. Is it possible?

I saw a blog that described how to change the button style using an RC file but that was for the version of yad using GTK2 libraries. I soon learned this wouldn't work for me on the Pi 3. I should mention I'm using the default window manager of LXDE.

My hope is someone could provide a newbie step by step of file content, where to put the file and how to make use of it. I know the solution has to do with css but I'm not familiar with how to do something like that and how to make the CSS active for just yad nor do I know what things to put in said css file.

Rick
  • 103
  • 7
  • Off-topic: have you considered using an different language and using Gtk3 directly? Say, Python + Glade + Gtk3? Sizing buttons is easy with this combination. – theGtknerd Mar 27 '19 at 21:18
  • I haven't. To be honest I was hoping not to go down a bunch of alternative rabbit holes. I have yad working for what I need, I just need the buttons to be more visible. – Rick Mar 28 '19 at 01:28
  • Since posting my original question, I've made some progress. I'm further along than original. The thing that has helped is learning a bit about the GTK Interactive debugger. Through a bunch of fumbling, I was able to get the button font and color to be better. The problem I have now is I can't figure out how to have an application specific CSS file for yad. I turned on the debugger using 'GTK_DEBUG=interactive yad blah blah blah' – Rick Mar 28 '19 at 01:31
  • It appears that there is no implementation to load CSS files within yad. Yad will need to add the CSS functionality for you. That is why I suggested rolling your own 'app'. – theGtknerd Mar 28 '19 at 10:51
  • I figured out a solution that worked for me. See my answer below. – Rick Apr 01 '19 at 13:48

1 Answers1

4

I mostly solved my own situation. Hopefully this helps others. It's not perfect but it accomplished my needs.

The first thing I did was start yad using the GTK debugger.

export GTK_DEBUG=interactive
yad --title "my title" --button "button1:1" --button "button2:2" --button "button3:3" --text "some text"

The most useful thing to me in the debugger was selecting and finding the name of objects and editing css on the fly. I don't know css. I cobbled together bits and pieces I found on other sites which mostly worked.

Then the other thing that helped was the ability to change GTK3 themes "on the fly". I did that using:

export GTK_THEME="Adwaita-dark"

Then I reran the yad line again. It used the new theme temporarily.

I found the theme did mostly what I wanted and it seemed to respect my custom css. For some reason that I haven't dug into, using the default theme of "Adwaita" did not respect my custom css. Obviously if I pick a different theme, you have to put the custom css in that theme's directory instead of 'Adwaita-dark'

To save my customizations, I created $HOME/.themes and created the following directories under there:

  • $HOME/.themes/Adwaita-dark
  • $HOME/.themes/Adwaita-dark/gtk-3.0

Then I put my custom css in $HOME/.themes/Adwaita-dark/gtk-3.0/gtk.css

This is my custom css that override yad's defaults:

/* The background of the entire window
box {
    background-image: image(rgb(224, 224, 209));
} */

/* The progress slider */
progress {
   /* background-image: image(rgb(102, 102, 255)); */
   background-image: image(rgb(102, 0, 255));
}

/* this gets us the highlighting behavior */
button:focus {
   color: black;
   border-top-color: yellow;
   border-left-color: yellow;
   border-right-color: yellow;
   border-bottom-color: yellow;
   border-bottom-width: 10px;
   border-top-width: 10px;
   border-bottom-width: 10px;
   background-image: image(rgb(255,102,255));
}


button {
   color: yellow;
   font: 24px "comic sans";
   border-top-color: black;
   border-left-color: black;
   border-right-color: black;
   border-bottom-color: black;
   border-bottom-width: 10px;
   background-image: image(rgb(100,100,100));
}

Some of the above directives did not really do anything with this theme, but I left them in in case I wanted to try it in the future. My way of starting yad is something like this:

GTK_THEME="Adwaita-dark" yad --title "my title" --button "button1:1" --button "button2:2" --button "button3:3" --text "some text"
Rick
  • 103
  • 7
  • thx vm!! this onliner also works for every yad called, and it (of course) keeps the colors: `mkdir -vp ~/.themes/temp/gtk-3.0;echo "box {background-image: image(rgb(255, 0,0));}" >~/.themes/temp/gtk-3.0/gtk.css;GTK_THEME="temp" yad --title "my title" --text hi` – Aquarius Power Feb 19 '22 at 03:22