yad – styling a dialog with a label and a button

It turns out that yad dialog boxes can be styles using exactly the same technique as that I documented in the previous article for styling gtkdialog applications. In this article I document the serendipitous discovery I made when working with styles for gtkdialog applications so that you can take advantage of it if you feel the need.

Pre-Requisites

This article assumes that the Virtual Box Machine Image created in accordance with the instructions in the blog article to be found at http://blogs.czapski.id.au/2016/10/configure-virtual-box-virtual-machine-and-install-centos-6-8-base-image is available but it is expected that pretty much any Linux environment will do just as well so long as it supports yad and gtkdialog. For convenience I posted the export of the VirtualBox image which would have been built if the reader followed all the articles in the series “Build a Linux-based Infrastructure Solution Demonstration Series” to date, that is to the 8th of March 2017. The link to the main article is http://blogs.czapski.id.au/2017/04/virtualbox-image-with-content-as-built-so-far.

It also assumes that yad is installed, as discussed in the article “Install yad and gtkdialog” (http://blogs.czapski.id.au/2017/04/gtkdialog-for-rapid-prototyping-of-linux-applications-install-gtkialog-and-yad)

Applying styles to a yad dialog box with a label and a button

See my earlier article, “gtkdialog – Applying styles to gtkdialog applications”, at http://blogs.czapski.id.au/2017/04/gtkdialog-applying-styles-to-gtkdialog-applications, for context to this article – specifically for the discussion, references and examples of styles that can be applied to GTK objects, both these that are used by the gtkdialog applicaitns and evidently also by yad “applications”.

I am providing the example here, since the styling is covered in the previous article, and the yad “application” in this example is trivial.

So, consider the following set of commands and a Bash script:

> /tmp/yadstyling_01.sh
chmod ug+x /tmp/yadstyling_01.sh
cat <<-'EODECK' > /tmp/yadstyling_01.sh
#!/bin/bash

export GTK2_RC_FILES=/tmp/gtkrc

cat <<-'EOSTYLEDEF' > ${GTK2_RC_FILES}

pixmap_path "/usr/share/backgrounds/cosmos/:/usr/share/backgrounds/nature/:/usr/share/backgrounds/scenery/:/usr/share/icons/gnome/scalable/actions"

style "windowStyle" {
    engine "pixmap" {
    image
      {
          function        = FLAT_BOX
          file            = "Garden.jpg"
          border          = { 0, 0, 0, 0 }
          stretch         = TRUE
          overlay_file    = "media-playback-pause.svg"
          overlay_stretch = FALSE
      }
  }
}

style "contentStyle" {
    fg[NORMAL]      = "brown"    # colour of the content text
    font_name="CM Roman CE Regular 10"
    GtkLabel::use-markup = TRUE
}

style "buttonStyle" {
    fg[NORMAL]      = "white"   # button label text colour
    fg[PRELIGHT]    = "yellow"  # button label text colour when mouse is over the button
    bg[NORMAL]      = "blue"    # button background colour
    bg[PRELIGHT]    = "navy"    # button background colour when mouse is over the button
    font_name       = "Fixed Italic 14"
    xthickness      = 6         # adds "border" on either side of the button
    ythickness      = 6         # adds "border" above and below the button
}

## the paths below apply the named styles to the yad dialog text and button

# gives the entire dialogue background colour
widget_class "<GtkWindow>" style "windowStyle"

# give the Button background colour
widget_class "<GtkWindow><GtkVBox><GtkContainer><GtkButton>" style "buttonStyle"

# gives the button text colour
widget_class "<GtkWindow><GtkVBox><GtkContainer><GtkButton><GtkContainer><GtkHBox><GtkLabel>" style "buttonStyle"

# gives the dialog text colour
widget_class "<GtkWindow><GtkVBox><GtkHBox><GtkVBox><GtkLabel>" style "contentStyle"

EOSTYLEDEF

yad \
    --center --width=400 --image="gtk-dialog-authentication" --window-icon="gtk-dialog-authentication" \
    --title="Succesful connection" \
    --text="Succesfully <b>connected</b> to <span size='large' color='black'>database</span> schema" \
    --button=" Dismiss!gtk-ok!Dismiss this dialogue:0"

EODECK

/tmp/yadstyling_01.sh

Executing this script produces the following:

Critical to the success of this endeavour are the wiget_class paths in the .gtkrc style definitions. The specific paths I am using I worked out by trial and error. This is the only way short of asking the authors, https://www.mankier.com/1/yad#Authors, for the GTK paths to the various variants of yad dialogues.

Experiment with the various style settings and see what you get.

 

Leave a Reply

Your email address will not be published. Required fields are marked *