Change background color of ButtonGadget (GTK3 only)

[Shardik]

In GTK 3 it's possible to simply change the appearence of gadgets (widgets in GTK speak) by redefining some features of a gadget using CSS code. The following example demonstrates how to change the background color of the ButtonGadget to white and even change that color to yellow when the cursor is hovering over the button. And this should even work irrespective of your chosen Linux distribution, desktop manager and chosen theme!

Code: Select all

; CSS example from Carlos Garnacho: Styling GTK+ with CSS
; https://thegnomejournal.wordpress.com/2011/03/15/styling-gtk-with-css/

EnableExplicit

#GTK_STYLE_PROVIDER_PRIORITY_APPLICATION = 600

CompilerIf (#PB_Compiler_Version < 540 And Subsystem("gtk3") = #False) Or
  (#PB_Compiler_Version >= 540 And Subsystem("gtk2") = #True)
  MessageRequester("Program terminated", "This program only works with GTK 3!")
  End
CompilerElse
  ImportC ""
    gtk_css_provider_load_from_data(*CSSProvider, CSSData.P-UTF8, Length.I,
      *Error.GError)
    gtk_css_provider_new()
    gtk_style_context_add_provider_for_screen(*Screen.GdkScreen, *StyleProvider,
      Priority.I)
  EndImport

  Define CSSProvider.I
  Define CSSHoverButton.S
  Define Screen.I

  CSSHoverButton = "" +
    ".button {" + #LF$ +
    "  background: white;" + #LF$ +
    "}" + #LF$ +
    #LF$ +
    ".button:hover {" + #LF$ +
    "  transition: 300ms ease-in-out;" + #LF$ +
    "  background: yellow;" + #LF$ +
    "}" + #LF$

  CSSProvider= gtk_css_provider_new()
  gtk_css_provider_load_from_data(CSSProvider, CSSHoverButton, -1, 0)
  Screen = gdk_display_get_default_screen_(gdk_display_get_default_())
  gtk_style_context_add_provider_for_screen(Screen, CSSProvider,
    #GTK_STYLE_PROVIDER_PRIORITY_APPLICATION)
  g_object_unref_(CSSProvider)

  OpenWindow(0, 100, 100, 240, 100, "Color changing button")
  ButtonGadget(0, 20, 30, 200, 35, "Change my color!")

  Repeat
  Until WaitWindowEvent() = #PB_Event_CloseWindow
CompilerEndIf

Update: I changed 'background-color' to 'background' in the CSS string because newer GTK3 versions don't seem to recognize 'background-color' anymore whereas all versions seem to evaluate 'background' correctly. Thank you for your hint, Justin.

[Justin]

It does not work here, the button appears as a normal button.
Linux Mint 17
PB5.42b2 64

[Justin]

It works if i use 'background' instead of 'background-color'.
Do you know if there is a way to show the focus rectangles?
The widget properties interior-focus, focus-padding etc.. are deprecated in favor of outline styles, i tried outline-style and outline-width with no luck.

[Oma]

Yes, on Kubuntu 15.10 it only works with "background:" too.

@ Justin:
From gtk3.2 to gtk3.10 there was a property "gtk-visible-focus" but it's deprecated again.
I didn't find a theme on Mint 17.2 which show the focus. Mint is a very 'empty' distri without separatorlines, visible frames, ....

Don't know an other solution at the moment.

Charly

[Shardik]

It works if i use 'background' instead of 'background-color'.

Thank you for your hints, Justin and Charly. 'background-color' worked on Ubuntu 14.04 x64 with KDE but indeed didn't work on Ubuntu 15.10 x86 with Unity whereas 'background' worked in both distros without problems. I therefore modified my code example from above.

The modified code example was tested successfully on these distros and desktop environments:
- Bodhi Linux 3.0.0 x86 with Enlightenment E17
- Elementary OS 0.2 x86 "Luna" with Pantheon
- Fedora 23 x86 with Gnome 3
- Kubuntu 14.04 x86 with KDE
- Linux Mint 17.3 x86 "Rosa" with Cinnamon
- Lubuntu 14.04 x86 with LXDE
- Ubuntu 12.04 x86 with Unity
- Ubuntu 15.10 x86 with Unity
- Ubuntu 14.04 x86 MATE with MATE
- Xubuntu 14.04 x86 with Xfce

[Justin]

Oma, in gtksettings there was also "gtk-visible-focus", from the docs:
Whether 'focus rectangles' should be always visible, never visible, or hidden until the user starts to use the keyboard.
It's been deprecated and set to GTK_POLICY_AUTOMATIC, it seems someone at gnome really hates this when is extremely usefull to navigate the widgets with the keyboard, or it is set by the distro itself. Do you know any distro that shows them?
In Mint they only appear in dialogs like the shutdown dialog, maybe there is an obscure setting somewhere?

[Shardik]

You may again use CSS styles to emulate a focus rectangle either by setting a border on getting focus (currently commented out) or by setting the button color to white. You may change the focus by using the mouse or the up and down arrow keys.

I have tested the following code example successfully on these two Linux Mint distros (you should also always state your exact version!):
- Linux Mint 17 x86 "Qiana" with Cinnamon
- Linux Mint 17.3 x86 "Rosa" with Cinnamon

Code: Select all

CompilerIf (#PB_Compiler_Version < 540 And Subsystem("gtk3") = #False) Or
  (#PB_Compiler_Version >= 540 And Subsystem("gtk2") = #True)
  MessageRequester("Program terminated", "This program only works with GTK 3!")
  End
CompilerElse
  #GTK_STYLE_PROVIDER_PRIORITY_APPLICATION = 600

  ImportC ""
    gtk_css_provider_load_from_data(*CSSProvider, CSSData.P-UTF8, Length.I,
      *Error.GError)
    gtk_css_provider_new()
    gtk_style_context_add_provider_for_screen(*Screen.GdkScreen, *StyleProvider,
      Priority.I)
  EndImport

  Define CSSProvider.I
  Define CSSFocusButton.S
  Define Screen.I

  CSSFocusButton = "" +
    ".button:focus {" + #LF$ +
    "  background: white;" + #LF$ +
    "}" + #LF$

;   CSSFocusButton = "" +
;     ".button:focus {" + #LF$ +
;     "  border: 1px;" + #LF$ +
;     "}" + #LF$

  CSSProvider= gtk_css_provider_new()
  gtk_css_provider_load_from_data(CSSProvider, CSSFocusButton, -1, 0)
  Screen = gdk_display_get_default_screen_(gdk_display_get_default_())
  gtk_style_context_add_provider_for_screen(Screen, CSSProvider,
    #GTK_STYLE_PROVIDER_PRIORITY_APPLICATION)
  g_object_unref_(CSSProvider)

  OpenWindow(0, 100, 100, 300, 160, "Focus change demo")

  ButtonGadget(0, 100, 30, 100, 25, "Button 1")
  ButtonGadget(1, 100, 65, 100, 25, "Button 2")
  ButtonGadget(2, 100, 100, 100, 25, "Button 3")

  SetActiveGadget(0)

  Repeat
  Until WaitWindowEvent() = #PB_Event_CloseWindow
CompilerEndIf

[Oma]

Hi Justin.
As you can see in Shardik's example, themes could be manipulated in gtk3 - if you like this.

A lot of distris with their themes still show the focus - personally i prefer Kubuntu/Xubuntu 14.x.
As i sayd, Mint is a little bit too cleaned up for my taste and can not quite keep up with their easy handling.

Thank you Shardik - again
A little supplement how to expand the fokus-marking on more or all gadgets-types.

Code: Select all

;all GadgetTypes ...
CSSFocusButton = "" +
									"*:focus {" + #LF$ +
									"  background: white;" + #LF$ +
									"}" + #LF$

;i.e. Buttons, Entries ...
CSSFocusButton = "" +
									".button:focus, " + #LF$ + 
									".entry:focus {" + #LF$ + 
									"  background: white;" + #LF$ + 
									"}" + #LF$

Regards, Charly

[Justin]

Shardik, borders did not work as you typed it, i had to use:
"border: 2px dotted green;" or "border: 1px solid green", following the css rules.

I need this to work globally, not only in my apps so the options would be to edit an existing theme, it's possible? or create/find a new one.

A will take a look to Kubuntu/Xubuntu 14.x. , any more recomended distros that shows focus? I tend to use the mouse the less possible, in windows you can do almost anything without the mouse so i am looking for the best distro to achieve that.