GTK3 Customization

94xtl · 2016-11-25 01:18:49

I've just received updates for xfce4-battery-plugin (1.1.0 over 1.0.5) and xfce4-datetime-plugin (0.7.0 over 0.6.2) and suddenly my color customization I had setup by .gtkrc-2.0.mine according to http://wiki.xfce.org/tips does not work anymore for those plugins.

I assume that is because they have been ported to gtk3!? Do I have to edit gtk3 settings.ini and setup a .css file now? How so?

ToZ · 2016-11-25 02:44:56

94xtl wrote:

I've just received updates for xfce4-battery-plugin (1.1.0 over 1.0.5) and xfce4-datetime-plugin (0.7.0 over 0.6.2) and suddenly my color customization I had setup by .gtkrc-2.0.mine according to http://wiki.xfce.org/tips does not work anymore for those plugins.
I assume that is because they have been ported to gtk3!?

Yes.

Do I have to edit gtk3 settings.ini and setup a .css file now? How so?

If you want to change the default colours, make the change in ~/.config/gtk-3.0/gtk.css.

If you're not familiar with GTK3 theming, here is the gtk3.22 theming start page (change the 3.22 in the url to match the version of gtk3 installed on your system). Here is the link to the GTK3 inspector (which is a great tool).

Specifically to answer your questions, here is a snippet to change the progress bar colour in the battery monitor (works with gtk 3.22):

#battery-10 progressbar progress {
		background-color: #ff0000;
}

...and here is the code to change the label colour of the datetime plugin:

#datetime-8 label {
	color: #ff0000;
}

Note that the names of the widgets (battery-10 and datetime-8) come from the actual widget names (hover over the plugin name in the Panel Properties Item tab to see them or use the inspector). Restart the panel to see the change.

94xtl · 2016-11-25 21:13:02

Thanks a lot for all the info ToZ!

ToZ wrote:

If you're not familiar with GTK3 theming, here is the gtk3.22 theming start page (change the 3.22 in the url to match the version of gtk3 installed on your system). Here is the link to the GTK3 inspector (which is a great tool).

It seems like you have to be a developer yourself just to be able to configure it - not saying that gtk2 is any easier though. Unfortunately my distro neither has packages for inspector nor parasite to easily try them. Is there another way to be able to know about xfce4 gtk elements and their property names. Is there a comprehensive list?

Unfortunately the examples you've posted do not seem to have any effect (panel restarted):

~$ cat .config/gtk-3.0/gtk.css
#datetime-13 label {
        color: #add8e6;
}

To rule out errors I just focused on datetime.

... where 13 is the number found in the panel item configuration for datetime.
What does label mean btw? My goal is to just change fg/bg of the item shown in the panel.
Can I btw use a separate .css for every element I want to change or do I need to have everything in gtk.css?

My gtk version is gtk3.14, but if I change the whole theme the 2 plugins change accordingly, so it's not like they can't change.
Last but not least are there any logs to go through?

ToZ · 2016-11-26 00:57:12

94xtl wrote:

Unfortunately my distro neither has packages for inspector nor parasite to easily try them.

Which distro are you using? The inspector is packaged into gtk3 - you just need to set it up to work (it was added in 3.14). To get it to work (I believe you need to have the gtk3-dev libraries installed for it to work):

gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true
xfce4-panel -q
GTK_DEBUG=interactive xfce4-panel

Is there another way to be able to know about xfce4 gtk elements and their property names. Is there a comprehensive list?

To get a list of the xfce4 plugin widget names, go to Panel Preferences > Items tab and hover your mouse over the plugin (the name will appear in the tooltip). Property names are more difficult - they will show up with the inspector or otherwise you need to browse the plugin source code to figure it out.

Unfortunately the examples you've posted do not seem to have any effect (panel restarted):

GTK theming changed significantly through the 3 series. Let me know your distro, I'll throw it up in a VM and see if I can figure it out.

What does label mean btw?

GtkLabel is a GTK widget. "label" is the keyword that references that widget within the datetime plugin. The plugin uses a GtkLabel widget to display the date/time. See here for a list of the widgets in 3.14.

Can I btw use a separate .css for every element I want to change or do I need to have everything in gtk.css?

Yes, but you'll need to reference that file from within gtk.css. This gtk.css can exist in a number of places:
- ~/.config/gtk-3.0/gtk.css (for user-specific configurations)
- /etc/gtk-3.0/gtk.css (for system-wide configurations)
- /usr/share/themes/THEME_NAME/gtk-3.0/gtk.css or ~/.themes/THEME_NAME/gtk-3.0/gtk.css (as part of a theme)
You would use the following syntax to include your other file:

@import url("my.css");

Last but not least are there any logs to go through?

Logs for what? What would you expect to see in these logs? GTK will log by default to the Xsession log file - usually something like ~/.xsession-errors (but it will only log errors).

94xtl · 2016-11-28 23:49:54

With your help I finally could get the Inspector running. Also all the other info was very useful. Very nice of you ToZ! The object is 'GtkLabel' instead of just 'label'. I corrected it and it works now.

I still have a question though. In the battery monitor I have both 'Display percentage' and 'Display time' checked. The time is obviously only shown while (dis-)charging, but in this case the plugin uses 2 lines of text instead of just one. I have not enough height in my panel to show both lines at the standard font size of 9, so I have set up a separate config for each line:

#battery-17 GtkBox GtkBox GtkBox GtkLabel{
        font-size: 8;
}
#battery-17 GtkBox GtkBox GtkBox GtkLabel:nth-child(2){
        font-size: 7;
}

Is there a way to enforce the first rule only if 'nth-child(2)' exist so I can still use the standard size if there is only one line (one GtkLabel instead of two).

ToZ · 2016-11-29 00:41:28

94xtl wrote:

With your help I finally could get the Inspector running. Also all the other info was very useful. Very nice of you ToZ! The object is 'GtkLabel' instead of just 'label'. I corrected it and it works now.

As I mentioned earlier, GTK3 versions went through many theming changes. What works in 3.14 might not work in later versions. Keep this in mind as your distro upgrades its GTK3 version. For GTK3.22, for example, the snippet I posted above works.

I still have a question though. In the battery monitor I have both 'Display percentage' and 'Display time' checked. The time is obviously only shown while (dis-)charging, but in this case the plugin uses 2 lines of text instead of just one. I have not enough height in my panel to show both lines at the standard font size of 9, so I have set up a separate config for each line:
#battery-17 GtkBox GtkBox GtkBox GtkLabel{
        font-size: 8;
}
#battery-17 GtkBox GtkBox GtkBox GtkLabel:nth-child(2){
        font-size: 7;
}
Is there a way to enforce the first rule only if 'nth-child(2)' exist so I can still use the standard size if there is only one line (one GtkLabel instead of two).

Unfortunately, I don't know. In the Overview of this page, there is some discussion about nonterminals that you might be able to use, but I have no knowledge of how this would work.

I've moved this discussion into its own thread.

Xfce Forum

Sub domains

#1 2016-11-25 01:18:49

GTK3 Customization

#2 2016-11-25 02:44:56

Re: GTK3 Customization

#3 2016-11-25 21:13:02

Re: GTK3 Customization

#4 2016-11-26 00:57:12

Re: GTK3 Customization

#5 2016-11-28 23:49:54

Re: GTK3 Customization

#6 2016-11-29 00:41:28

Re: GTK3 Customization

Board footer