Xfce Forum

spacerobin

Member

Registered: 2020-01-28

Posts: 6

[Solved] How do I change the panel font and the clock font colour?

Original title: How do I change the panel font and the clock font colour in 2020?

I am at my wits end. I've been using XFCE for a while, and about a year ago it decided to not have the text on the panel be white anymore, and this seems to be completely out of my control. This is my 5th attempt at trying to find answer, but every thread I could find on the topic are so dated the solutions to not apply anymore. This includes editing gtkrc-2.0, installing gtk-theme-config, and so on.

All I want is to change the text-colour on my panel to white.

I am using the Numix theme, and in its GTK-3.0 folder, the css only contains a link "@import url("resource:///org/numixproject/gtk/dist/gtk.css");"

So editing here doesn't count for anything either.

What's the solution in 2020 to edit the text on the panel and widgets to be a more readable colour?

Thank you.

- SpaceRobin

Last edited by spacerobin (2020-01-29 10:25:31)

alcornoqui

Member

Registered: 2014-07-28

Posts: 832

Re: [Solved] How do I change the panel font and the clock font colour?

Did you see this thread? It has a lot of details on inspecting GTK3 stuff.

Welcome to the forum and good luck!

Aravisian

Member

Registered: 2019-08-17

Posts: 410

Re: [Solved] How do I change the panel font and the clock font colour?

I am at my wits end. I've been using XFCE for a while, and about a year ago it decided to not have the text on the panel be white anymore, and this seems to be completely out of my control. This is my 5th attempt at trying to find answer, but every thread I could find on the topic are so dated the solutions to not apply anymore. This includes editing gtkrc-2.0, installing gtk-theme-config, and so on.

All I want is to change the text-colour on my panel to white.

I am using the Numix theme, and in its GTK-3.0 folder, the css only contains a link "@import url("resource:///org/numixproject/gtk/dist/gtk.css");"

So editing here doesn't count for anything either.

What's the solution in 2020 to edit the text on the panel and widgets to be a more readable colour?

Thank you.

- SpaceRobin

You really hit the nail on the head in regards to the Major Changes that are made in Linux that other O.S's kinda don't do.
What you referenced: "@import url("resource:///org/numixproject/gtk/dist/gtk.css");" you can import that theme in a full .css file in order to have it as a file on your machine that you can edit and make changes to- Technically.
But a better method would be to navigate to .config in your home folder.
~/.config/gtk-3.0/gtk.css
If there is no gtk.css file, you can make one. If there is one, you can add to it.
Please add the folowing and then save the file.

.xfce4-panel.panel {
  background-color: #3C3E40; }
  .xfce4-panel.panel button.flat, .xfce4-panel.panel button.sidebar-button {
    color: #ffffff;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
    -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.7); }
    .xfce4-panel.panel button.flat:hover, .xfce4-panel.panel button.sidebar-button:hover {
      color: #ffffff;
      outline-color: rgba(243, 243, 245, 0.3);
      text-shadow: 0 1px rgba(0, 0, 0, 0.7);
      -gtk-icon-shadow: 0 1px rgba(0, 0, 0, 0.7); }
    .xfce4-panel.panel button.flat:active, .xfce4-panel.panel button.sidebar-button:active, .xfce4-panel.panel button.flat:checked, .xfce4-panel.panel button.sidebar-button:checked {
      color: #ffffff;
      text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
      -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.4);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

Without knowing more about the theme you are using (I can examine Numix later) some of those shadows may be off but for a first try, it should change the text color.
To see the changes immediately, open a terminal and restart your panel:

xfce4-panel -r

Where it says "color: #ffffff" in the file, you can change the #ffffff to another color you prefer.
I hope this helps.

EDIT: I just saw that alcornoqui linked over to some excellent instructions, too. But maybe this post will give you an immediate start to help you keep your sanity while you learn more.

Last edited by Aravisian (2020-01-28 15:24:55)

alcornoqui

Member

Registered: 2014-07-28

Posts: 832

Re: [Solved] How do I change the panel font and the clock font colour?

I just saw that alcornoqui linked over to some excellent instructions, too. But maybe this post will give you an immediate start to help you keep your sanity while you learn more.

Best of both worlds!

spacerobin

Member

Registered: 2020-01-28

Posts: 6

Re: [Solved] How do I change the panel font and the clock font colour?

xfce4-panel -r

Where it says "color: #ffffff" in the file, you can change the #ffffff to another color you prefer.
I hope this helps.

EDIT: I just saw that alcornoqui linked over to some excellent instructions, too. But maybe this post will give you an immediate start to help you keep your sanity while you learn more.

Thank you for your help, but I regret to report that it didn't work. I cannot tell what the problem is, but I have 3 css files in my gtk3 folder, and none them seem to have any interaction with my system at all. Should I attempt to reinstall GTK somehow?

Did you see this thread? It has a lot of details on inspecting GTK3 stuff.

Welcome to the forum and good luck!

Thank you too for your suggestion. Sadly, I got stuck way before I could do anything useful, as I could not get the program to find my clock plugin. It's the default one, but my GTK-inspect showed criminally fewer elements than the one given in the thread.

It should be noted that I am Xubuntu, sorry for not posting this in the original thread, and this may causing issues as Ubuntu has a way of not feeling like doing things other distros do without much effort. What distros are you two running where this process is so clean?

Again, thank you so much for your help, and I am sorry it didn't work.

Aravisian

Member

Registered: 2019-08-17

Posts: 410

Re: [Solved] How do I change the panel font and the clock font colour?

Thank you for your help, but I regret to report that it didn't work. I cannot tell what the problem is, but I have 3 css files in my gtk3 folder, and none them seem to have any interaction with my system at all. Should I attempt to reinstall GTK somehow?

No, that is a pretty drastic measure. I am certain that gtk on your system is most likely working.

First- We will get this fixed. Don't worry. It may take some back and forth, but you can be confident that you will not end up having to tolerate the unwanted change.

Can you state exactly what OS you are running and version?
For example, is it Xubuntu 18.04, Xubuntu 16.04?

You said that in your /home/USER$/.config/gtk-3.0/ folder you have THREE gtk.css files?
Really, one is all you should ever need. Would you be willing to paste the contents of each file in code tags in order from the first to last? That way we can try to figure out what can go and what can stay. The cause of your problem may just be in one of those .css files.

spacerobin

Member

Registered: 2020-01-28

Posts: 6

Re: [Solved] How do I change the panel font and the clock font colour?

Thank you for your help, but I regret to report that it didn't work. I cannot tell what the problem is, but I have 3 css files in my gtk3 folder, and none them seem to have any interaction with my system at all. Should I attempt to reinstall GTK somehow?

No, that is a pretty drastic measure. I am certain that gtk on your system is most likely working.

First- We will get this fixed. Don't worry. It may take some back and forth, but you can be confident that you will not end up having to tolerate the unwanted change.

Can you state exactly what OS you are running and version?
For example, is it Xubuntu 18.04, Xubuntu 16.04?

You said that in your /home/USER$/.config/gtk-3.0/ folder you have THREE gtk.css files?
Really, one is all you should ever need. Would you be willing to paste the contents of each file in code tags in order from the first to last? That way we can try to figure out what can go and what can stay. The cause of your problem may just be in one of those .css files.

Xubuntu 18.04, sorry again, it's been some time since I have posted on a proper forum.

Here are the contents of the three files, as of right now:

gtk.css

/*general area*/
#whiskermenu-window {
	color: #f2f2f2;
  	background-color: #2b2e37;
}

/*catagory buttons*/
#whiskermenu-window button {
	background-color: #2b2e37;
	color: #f2f2f2;
}
#whiskermenu-window button:hover {
	background-color: #3f4453;
	color: #f2f2f2;
}
#whiskermenu-window button:checked {
	background-color: #4084d6;
	color: #f2f2f2;
}
#whiskermenu-window button:focus {
	background-color: #3f4453;
	color: #f2f2f2;
}

/*tree list*/
#whiskermenu-window treeview {
	background-color: #06060f;
	color: #fff;
}
#whiskermenu-window treeview:hover {
	background-color: #3f4453;
	color: #f2f2f2;
}
#whiskermenu-window treeview:selected {
	background-color: #3f4453;
	color: #f2f2f2;
	outline-color: #3f4453;
}

#whiskermenu-window *:not(button){
	border-color: #2b2e37;
}

/*panel button*/
#whiskermenu-button{
	color: #bac3cf;
	font-weight: normal;
}
#whiskermenu-button:hover{
	color: #ffffff;
}
#whiskermenu-button:checked{
	color: #fff;
}#Xfce4PanelWindow button label {color: white;}

.xfce4-panel.panel {
  background-color: #3C3E40; }
  .xfce4-panel.panel button.flat, .xfce4-panel.panel button.sidebar-button {
    color: #ffffff;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
    -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.7); }
    .xfce4-panel.panel button.flat:hover, .xfce4-panel.panel button.sidebar-button:hover {
      color: #ffffff;
      outline-color: rgba(243, 243, 245, 0.3);
      text-shadow: 0 1px rgba(0, 0, 0, 0.7);
      -gtk-icon-shadow: 0 1px rgba(0, 0, 0, 0.7); }
    .xfce4-panel.panel button.flat:active, .xfce4-panel.panel button.sidebar-button:active, .xfce4-panel.panel button.flat:checked, .xfce4-panel.panel button.sidebar-button:checked {
      color: #ffffff;
      text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
      -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.4);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

gtk new.css (I think I may have made these when I was following another tutorial years ago, obviously it didn't work)

/*general area*/
#whiskermenu-window {
	color: #f2f2f2;
  	background-color: #2b2e37;
}

/*catagory buttons*/
#whiskermenu-window button {
	background-color: #2b2e37;
	color: #f2f2f2;
}
#whiskermenu-window button:hover {
	background-color: #3f4453;
	color: #f2f2f2;
}
#whiskermenu-window button:checked {
	background-color: #4084d6;
	color: #f2f2f2;
}
#whiskermenu-window button:focus {
	background-color: #3f4453;
	color: #f2f2f2;
}

/*tree list*/
#whiskermenu-window treeview {
	background-color: #fff;
	color: #2b2e37;
}
#whiskermenu-window treeview:hover {
	background-color: #3f4453;
	color: #f2f2f2;
}
#whiskermenu-window treeview:selected {
	background-color: #3f4453;
	color: #f2f2f2;
	outline-color: #3f4453;
}

#whiskermenu-window *:not(button){
	border-color: #2b2e37;
}


/*panel button*/
#whiskermenu-button{
	color: #bac3cf;
	font-weight: normal;
}
#whiskermenu-button:hover{
	color: #ffffff;
}
#whiskermenu-button:checked{
	color: #fff;
}

.xfce4-panel.panel {
  background-color: #3C3E40; }
  .xfce4-panel.panel button.flat, .xfce4-panel.panel button.sidebar-button {
    color: #ffffff;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
    -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.7); }
    .xfce4-panel.panel button.flat:hover, .xfce4-panel.panel button.sidebar-button:hover {
      color: #ffffff;
      outline-color: rgba(243, 243, 245, 0.3);
      text-shadow: 0 1px rgba(0, 0, 0, 0.7);
      -gtk-icon-shadow: 0 1px rgba(0, 0, 0, 0.7); }
    .xfce4-panel.panel button.flat:active, .xfce4-panel.panel button.sidebar-button:active, .xfce4-panel.panel button.flat:checked, .xfce4-panel.panel button.sidebar-button:checked {
      color: #ffffff;
      text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
      -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.4);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

gtk old.css

#whiskermenu-window {
	background-color: #404040;
	color: #ccc;
}

/* Make sidebar buttons match */
#whiskermenu-window button {
	background-color: #404040;
	color: #ccc;
}
#whiskermenu-window button:hover {
	background-color: #808080;
	color: #fff;
}
#whiskermenu-window button:checked {
	background-color: #606060;
	color: #fff;
}

/* Make treeview match */
#whiskermenu-window treeview {
	background-color: #404040;
	color: #ccc;
}
#whiskermenu-window treeview:hover {
	background-color: #808080;
	color: #fff;
}

.xfce4-panel.panel {
  background-color: #3C3E40; }
  .xfce4-panel.panel button.flat, .xfce4-panel.panel button.sidebar-button {
    color: #ffffff;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
    -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.7); }
    .xfce4-panel.panel button.flat:hover, .xfce4-panel.panel button.sidebar-button:hover {
      color: #ffffff;
      outline-color: rgba(243, 243, 245, 0.3);
      text-shadow: 0 1px rgba(0, 0, 0, 0.7);
      -gtk-icon-shadow: 0 1px rgba(0, 0, 0, 0.7); }
    .xfce4-panel.panel button.flat:active, .xfce4-panel.panel button.sidebar-button:active, .xfce4-panel.panel button.flat:checked, .xfce4-panel.panel button.sidebar-button:checked {
      color: #ffffff;
      text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
      -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.4);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

Thank you for meeting my naivety with patience and kindness.

- Spacerobin

Aravisian

Member

Registered: 2019-08-17

Posts: 410

Re: [Solved] How do I change the panel font and the clock font colour?

Xubuntu 18.04, sorry again, it's been some time since I have posted on a proper forum.

Ok, if you are not using those- I would say that they can go. I would suggest keeping one as a back up. You could rename it to gtk-css.txt

Then get rid of the extras. If you would like to theme your whiskermenu, we can look at doing that later.

Now, you should have a .config/gtk-3.0 folder with no gtk.css files in it at all.
I just re-tested what I posted earlier on my own copy of Zorin 15 Lite- which is based on Xubuntu 18.04.
Zorin 15 Lite uses XFCE 4.14 which uses gtk3.

However... Xubuntu 18.04 - as downloaded- comes with XFCE 4.12 which is gtk2. I BELIEVE, though I could be wrong, that Xubuntu updates the xfce to 4.14- I put an apt-mark hold on mine to prevent it from doing that.
But we should check to be sure. In terminal, can you run:

xfdesktop --version

spacerobin

Member

Registered: 2020-01-28

Posts: 6

Re: [Solved] How do I change the panel font and the clock font colour?

Xubuntu 18.04, sorry again, it's been some time since I have posted on a proper forum.

But we should check to be sure. In terminal, can you run:

xfdesktop --version

I cleaned out my gtk folder, but you were spot on about Xubuntu. My version is GTK 2.24, does this mean I am not using gtk3?

xfdesktop --version
This is xfdesktop version 4.12.3, running on Xfce 4.12.
Built with GTK+ 2.24.31, linked with GTK+ 2.24.32.
Build options:
    Desktop Menu:        enabled
    Desktop Icons:       enabled
    Desktop File Icons:  enabled

Aravisian

Member

Registered: 2019-08-17

Posts: 410

Re: [Solved] How do I change the panel font and the clock font colour?

Xubuntu 18.04, sorry again, it's been some time since I have posted on a proper forum.

But we should check to be sure. In terminal, can you run:

xfdesktop --version

I cleaned out my gtk folder, but you were spot on about Xubuntu. My version is GTK 2.24, does this mean I am not using gtk3?

xfdesktop --version
This is xfdesktop version 4.12.3, running on Xfce 4.12.
Built with GTK+ 2.24.31, linked with GTK+ 2.24.32.
Build options:
    Desktop Menu:        enabled
    Desktop Icons:       enabled
    Desktop File Icons:  enabled

Correct. You are using XFCE 4.12 which is gtk2. Congratulations- So am I. I dislike the gtk3 XFCE 4.14... But, I will begrudginly admit I have found success in some of its components.
Ok, so- you could upgrade your xfdesktop to 4.14...
OR
We can set up your system as it currently is to solve your issue.
Let's start with a solution, first.
In your home folder (Not in .config) there should be a file named .gtkrc-2.0
Can you paste the following into it, then save the file:

  style "panel-clock-color-fix"
  {
  fg[NORMAL]    = "#ffffff"
  fg[PRELIGHT]    = "#ffffff"
  fg[ACTIVE]    = "#ffffff"
  text[NORMAL]    = "#ffffff"
  text[PRELIGHT]    = "#ffffff"
  text[ACTIVE]    = "#ffffff"
  }
  widget "Xfce*Panel*clock*"    style "panel-clock-color-fix"

Restart panel with

xfce4-panel -r

and check if clock text color changed

spacerobin

Member

Registered: 2020-01-28

Posts: 6

Re: [Solved] How do I change the panel font and the clock font colour?

But we should check to be sure. In terminal, can you run:

xfdesktop --version

I cleaned out my gtk folder, but you were spot on about Xubuntu. My version is GTK 2.24, does this mean I am not using gtk3?

xfdesktop --version
This is xfdesktop version 4.12.3, running on Xfce 4.12.
Built with GTK+ 2.24.31, linked with GTK+ 2.24.32.
Build options:
    Desktop Menu:        enabled
    Desktop Icons:       enabled
    Desktop File Icons:  enabled

Correct. You are using XFCE 4.12 which is gtk2. Congratulations- So am I. I dislike the gtk3 XFCE 4.14... But, I will begrudginly admit I have found success in some of its components.
Ok, so- you could upgrade your xfdesktop to 4.14...
OR
We can set up your system as it currently is to solve your issue.
Let's start with a solution, first.
In your home folder (Not in .config) there should be a file named .gtkrc-2.0
Can you paste the following into it, then save the file:

  style "panel-clock-color-fix"
  {
  fg[NORMAL]    = "#ffffff"
  fg[PRELIGHT]    = "#ffffff"
  fg[ACTIVE]    = "#ffffff"
  text[NORMAL]    = "#ffffff"
  text[PRELIGHT]    = "#ffffff"
  text[ACTIVE]    = "#ffffff"
  }
  widget "Xfce*Panel*clock*"    style "panel-clock-color-fix"

Restart panel with

xfce4-panel -r

and check if clock text color changed

Oh, brilliant! That actually worked, thank you so much! Can I do the same for the text on the panel using this file?

Aravisian

Member

Registered: 2019-08-17

Posts: 410

Re: [Solved] How do I change the panel font and the clock font colour?

I cleaned out my gtk folder, but you were spot on about Xubuntu. My version is GTK 2.24, does this mean I am not using gtk3?

xfdesktop --version

Correct. You are using XFCE 4.12 which is gtk2. Congratulations- So am I. I dislike the gtk3 XFCE 4.14... But, I will begrudginly admit I have found success in some of its components.
Ok, so- you could upgrade your xfdesktop to 4.14...
OR
We can set up your system as it currently is to solve your issue.
Let's start with a solution, first.
In your home folder (Not in .config) there should be a file named .gtkrc-2.0
Can you paste the following into it, then save the file:

xfdesktop --version
This is xfdesktop version 4.12.3, running on Xfce 4.12.
Built with GTK+ 2.24.31, linked with GTK+ 2.24.32.
Build options:
    Desktop Menu:        enabled
    Desktop Icons:       enabled
    Desktop File Icons:  enabled

Restart panel with

  style "panel-clock-color-fix"
  {
  fg[NORMAL]    = "#ffffff"
  fg[PRELIGHT]    = "#ffffff"
  fg[ACTIVE]    = "#ffffff"
  text[NORMAL]    = "#ffffff"
  text[PRELIGHT]    = "#ffffff"
  text[ACTIVE]    = "#ffffff"
  }
  widget "Xfce*Panel*clock*"    style "panel-clock-color-fix"

and check if clock text color changed

Oh, brilliant! That actually worked, thank you so much! Can I do the same for the text on the panel using this file?

Yes, you can see where at the bottom of the resource code (or .rc code):
widget "Xfce*Panel*clock*"    style "panel-clock-color-fix"
Make a style like above for what you want to theme and annotate the widget you wish to change the color of the text on.
I don't know exactly what else you are looking to change, but you need to put the widget name exactly for it to register it.
For example:
widget "*Xfce*Panel*"                                 style "theme-panel"
class "*Xfce*Panel*"                                  style "theme-panel"
widget "*Xfce*Panel*GtkProgressBar"   style "theme panel"

Previously, we saw that you were looking to theme your entire WhiskerMenu. Misko on here had written an great write up on it that I used, as well.
I have themed mine in gtk2 and gtk3.
It looks like this, in the style of Azenis.

Please speak up if you would like assistance doing your own theme.

xfce4-panel -r

spacerobin

Member

Registered: 2020-01-28

Posts: 6

Re: [Solved] How do I change the panel font and the clock font colour?

Correct. You are using XFCE 4.12 which is gtk2. Congratulations- So am I. I dislike the gtk3 XFCE 4.14... But, I will begrudginly admit I have found success in some of its components.
Ok, so- you could upgrade your xfdesktop to 4.14...
OR
We can set up your system as it currently is to solve your issue.
Let's start with a solution, first.
In your home folder (Not in .config) there should be a file named .gtkrc-2.0
Can you paste the following into it, then save the file:

xfdesktop --version

Restart panel with

xfdesktop --version
This is xfdesktop version 4.12.3, running on Xfce 4.12.
Built with GTK+ 2.24.31, linked with GTK+ 2.24.32.
Build options:
    Desktop Menu:        enabled
    Desktop Icons:       enabled
    Desktop File Icons:  enabled

and check if clock text color changed

Oh, brilliant! That actually worked, thank you so much! Can I do the same for the text on the panel using this file?

Yes, you can see where at the bottom of the resource code (or .rc code):
widget "Xfce*Panel*clock*"    style "panel-clock-color-fix"
Make a style like above for what you want to theme and annotate the widget you wish to change the color of the text on.
I don't know exactly what else you are looking to change, but you need to put the widget name exactly for it to register it.
For example:
widget "*Xfce*Panel*"                                 style "theme-panel"
class "*Xfce*Panel*"                                  style "theme-panel"
widget "*Xfce*Panel*GtkProgressBar"   style "theme panel"

Previously, we saw that you were looking to theme your entire WhiskerMenu. Misko on here had written an great write up on it that I used, as well.
I have themed mine in gtk2 and gtk3.
It looks like this, in the style of Azenis.
http://i.imgur.com/JRTGzh4.png
Please speak up if you would like assistance doing your own theme.

  style "panel-clock-color-fix"
  {
  fg[NORMAL]    = "#ffffff"
  fg[PRELIGHT]    = "#ffffff"
  fg[ACTIVE]    = "#ffffff"
  text[NORMAL]    = "#ffffff"
  text[PRELIGHT]    = "#ffffff"
  text[ACTIVE]    = "#ffffff"
  }
  widget "Xfce*Panel*clock*"    style "panel-clock-color-fix"

Thank you so much for your assistance, you have really helped me out. I'll mark this thread as solved, if possible. Thank you again.

- Spacerobin

xfce4-panel -r