GTK theme question

Sasquatch · **Posted:** Tue Nov 22, 2016 10:04 am **(#1)**

Here's the background on the question;

I am doing a clean reinstall of my preferred Linux distro on this small laptop so my wife can enjoy the wonders of Linux. Part of the project is getting it all looking pretty so she'll really feel like it's hers rather than just an off-the-shelf OS. I did the usual theme hunting and found several that I know she will like. But my OCD has me wanting to meld the GTK bits with the xfce bits with the icons, with the cursors... you get the idea. I've made quite good progress already thanks to Graechan pointing me towards BIMP so I could recolor the icons much more easily. And I've started completely redoing the xfce parts. The GTK bits are going to remain almost completely untouched except for one fairly large problem, which is why I'm here, I don't have any radio buttons or check boxes that function. The boxes are there, but they don't change when I press them. They do make selections, I just can't tell which one is selected. So if it's a button to toggle something off/on I have no way of knowing whether it is off or on until I run whatever and see what happens.

That's a really long story just to ask a question. But I figured it might be a nice little update on my nearly-triumphant return to the GIMP world.

Does anybody know how I can diagnose the problem? I don't know if I'm missing the icons for the buttons and check boxes or if the gtkrc isn't pointing to the icons I have. Or could it be something else? I know gtk is infamous for being poorly documented and hard to decipher. I looked at the gtkrc already, but I have no idea what I'm looking for.

paynekj · **Posted:** Tue Nov 22, 2016 10:37 am **(#2)**

Presumably if you're looking at a gtkrc file then it's GTK+2 and not GTK+3 (which uses CSS for themes)

Here's any example from one of my GIMP themes that styles checkboxes:

Code: Select all

style "checkbuttons" = "gimp-default-style"
{
  engine "pixmap"
  {
    image
    {
      function         = CHECK
      state            = NORMAL
      shadow         = OUT
      overlay_file      = "/checkbuttons/check-norm-unchecked.png" # image for unchecked check button
      overlay_stretch   = TRUE      # set TRUE to get GtkCheckButton::indicator-size to be used
    }

    image
    {
      function         = CHECK
      state            = PRELIGHT
      shadow         = OUT
      overlay_file      = "/checkbuttons/check-prelight-unchecked.png" # image for hovered-over unchecked check button
      overlay_stretch   = TRUE
    }

    image
    {
      function         = CHECK
      state            = ACTIVE
      shadow         = OUT
      overlay_file      = "/checkbuttons/check-norm-unchecked.png" # image for unchecked check button when being clicked
      overlay_stretch   = TRUE
    }

    image
    {
      function         = CHECK
      state            = INSENSITIVE
      shadow         = OUT
      overlay_file      = "/checkbuttons/check-insens-unchecked.png" # image for unchecked disabled check button
      overlay_stretch   = TRUE
    }

    image
    {
      function         = CHECK
      recolorable      = TRUE
      state            = NORMAL
      shadow         = IN
      overlay_file      = "/checkbuttons/check-norm-checked.png" # image for checked check button
      overlay_stretch   = TRUE
    }

    image
    {
      function         = CHECK
      recolorable      = TRUE
      state            = PRELIGHT
      shadow         = IN
      overlay_file      = "/checkbuttons/check-prelight-checked.png" # image for hovered-over checked check button
      overlay_stretch   = TRUE
    }

    image
    {
      function         = CHECK
      recolorable      = TRUE
      state            = ACTIVE
      shadow         = IN
      overlay_file      = "/checkbuttons/check-prelight-checked.png" # image for clicked checked check button
      overlay_stretch   = TRUE
    }

    image
    {
      function         = CHECK
      recolorable      = TRUE
      state            = INSENSITIVE
      shadow         = IN
      overlay_file      = "/checkbuttons/check-insens-checked.png" # image for disabled checked check button
      overlay_stretch   = TRUE
    }

    image
    {
      function      = FLAT_BOX
      recolorable   = TRUE
      file         = "/checkbuttons/checklight.png" # Used to create a highlight for the whole widget (including label)
      border      = { 1, 1, 1, 1}
      stretch      = TRUE
    }
  }
}

And for radiobuttons:

Code: Select all

style "radiobuttons" = "gimp-default-style"
{
  engine "pixmap"
  {
    image
    {
      function         = OPTION
      state            = NORMAL
      shadow         = OUT
      overlay_file      = "/radiobuttons/radio-normal-unchecked.png" # image for unchecked radio button
      overlay_stretch   = TRUE
    }

    image
    {
      function         = OPTION
      state            = PRELIGHT
      shadow         = OUT
      overlay_file      = "/radiobuttons/radio-prelight-unchecked.png" # image for hovered-over unchecked radio button
      overlay_stretch   = TRUE
    }

    image
    {
      function         = OPTION
      state            = ACTIVE
      shadow         = OUT
      overlay_file      = "/radiobuttons/radio-normal-unchecked.png" # image for unchecked radio button when being clicked
      overlay_stretch   = TRUE
    }

    image
    {
      function         = OPTION
      state            = INSENSITIVE
      shadow         = OUT
      overlay_file      = "/radiobuttons/radio-insens-unchecked.png" # image for disabled radio button
      overlay_stretch   = TRUE
    }

    image
    {
      function         = OPTION
      recolorable      = TRUE
      state            = NORMAL
      shadow         = IN
      overlay_file      = "/radiobuttons/radio-norm-checked.png" # image for checked radio button
      overlay_stretch   = TRUE
    }

    image
    {
      function         = OPTION
      recolorable      = TRUE
      state            = PRELIGHT
      shadow         = IN
      overlay_file      = "/radiobuttons/radio-prelight-checked.png" # image for hovered-over checked radio button
      overlay_stretch   = TRUE
    }

    image
    {
      function         = OPTION
      recolorable      = TRUE
      state            = ACTIVE
      shadow         = IN
      overlay_file      = "/radiobuttons/radio-prelight-checked.png" # image for clicked checked radio button
      overlay_stretch   = TRUE
    }

    image
    {
      function         = OPTION
      recolorable      = TRUE
      state            = INSENSITIVE
      shadow         = IN
      overlay_file      = "/radiobuttons/radio-insens-checked.png" # image for disabled checked radio button
      overlay_stretch   = TRUE
    }

    image
    {
      function      = FLAT_BOX
      recolorable   = TRUE
      file         = "/radiobuttons/radiolight.png" # Used to create a highlight for the whole widget (including label)
      border      = { 1, 1, 1, 1}
      stretch      = TRUE
    }
  }
}

Code: Select all

class "GtkCheckButton"             style "checkbuttons"
class "GtkCheckMenuItem"          style "checkbuttons"
class "GtkRadioButton"             style "radiobuttons"
class "GtkRadioMenuItem"          style "radiobuttons"

This might help you in examining the gtkrc file to find where it's getting the image files from.

Kevin

Sasquatch · **Posted:** Tue Nov 22, 2016 10:54 am **(#3)**

So it might be getting buttons from an outside source rather than the GTK theme directory? Or am I misreading that? I have both 2.0 and 3.0 on my system, but I just checked again and the theme is definitely 2.0. Just strange that it has everything except the radio buttons. I'll have to mess with this later tonight. Too tired to think anymore this morning. Thanks for giving me something to look for. I'll sleep on it and update when I get it sorted.

paynekj · **Posted:** Tue Nov 22, 2016 11:02 am **(#4)**

If the theme doesn't have definitions for the radio buttons, then it will use the buttons from the system theme(?), so your themes author may have preferred their system buttons.

If you can zip-up the theme and attach it here, or post a link to the source of the theme we could have a look.

Kevin

Sasquatch · **Posted:** Tue Nov 22, 2016 8:15 pm **(#5)**

Here's the link Not sure how I got it from there, I was on xfce-look when I found it. Either the download link lead me there or I commented on the wrong page. Oops. So I hope that's the same version I installed.

I just woke up, haven't had my coffee yet. So I haven't had a chance to get back into it. I'll be looking for radio buttons, and making them if needed, in a bit.

Is there any benefit to a 3.0 theme? Would it be worth learning css to duplicate this theme in the new style? I was already seeing how complicated it would be to add icons to Firefox. So creating a uniform desktop looks like it could take months of searching for the right icons and replacing them.

Sasquatch · **Posted:** Tue Nov 22, 2016 10:46 pm **(#6)**

Okay, now that I've had my coffee and the wife is in bed I can get back to tinkering here.

I found this;

Code: Select all

class "GtkRadioButton"   style:highest "radiocheck"   # SZ07: Added for the checkmarks/radio
class "GtkCheckButton"   style:highest "radiocheck"   # SZ07: Added for the checkmarks/radio

And this;

Code: Select all

   GtkCheckButton::indicator-size = 14

And this;

Code: Select all

# SZ07: This is added to tell the theme how to color checkmarks and radio items that are not in menus.
style "radiocheck"
{
   text[NORMAL]   = @selected_fg_color   # Color for selected checks/radio items.
   text[PRELIGHT]   = @selected_fg_color   # Color for selected checks/radio items on prelight.
   engine "murrine"{
       roundness = 2
       contrast = 1.03
       highlight_shade = 1.0
       lightborder_shade   = 1.0
       gradient_shades = {1.1,1.0,1.0,0.9}
       reliefstyle       = 2 
   }
}

Using the search function of my text editor. Those are the only places "check" shows up in the gtkrc. Which is nothing like the section in the post above. So clearly this theme is missing the radio buttons. The question is whether I can simply copy/paste the segment above and add the appropriate images to the folder or will it take more work to add the buttons?

paynekj · **Posted:** Wed Nov 23, 2016 1:34 am **(#7)**

What you've shown is that the buttons are being drawn by the murrine theme engine rather than using images for the various states.

You should be able to replace that section with the image replacement code above and create suitable images.

Sasquatch · **Posted:** Wed Nov 23, 2016 2:49 am **(#8)**

According to my package manager I don't have the murrine engine installed. So that may explain the problem.

On a related note, I managed to break X somehow. All I've been doing is tinkering with the images and the rc files of a couple themes to bring it all together. I rebooted and couldn't get X to start. Actually did a complete reinstall of the OS to fix it. No idea what happened. I thought a glitch in a theme would just cause it to fall back to a default. But I haven't done anything else to that computer since updating after a clean install. So it had to be tweaking the themes.

I need to install that "widget factory" I'm always seeing on the theme sites. Then I can test my work in a controlled environment.

Sasquatch · **Posted:** Wed Nov 23, 2016 5:54 am **(#9)**

I installed this widget factory. It really shows how much is missing from the theme. I'm on my big laptop now, so the theme is untouched since I was tweaking it on the little laptop. The widget factory will definitely help me sort out what I need to add or fix. But it won't help me figure out how to do it.

I also installed the murrine engine. I'm not sure that's made a difference.