Help changing a GTK3 theme color

Forum rules
Before you post please read how to get help
Post Reply
elbullazul
Level 2
Level 2
Posts: 50
Joined: Wed Aug 12, 2015 1:41 pm

Help changing a GTK3 theme color

Post by elbullazul » Wed Aug 12, 2015 2:44 pm

Hi everyone,

I'm new in the forum, and I've searched for days for a solution for my problem, but couldn't find one :(

I've been using Mint 17.1 for seven months now, and I have started a couple of days ago my own GTK3 theme.

It's been pretty easy, but I can't resolve some issues. I included a screenshot of the theme below :

Image

Here are the issues

1) Can't make that black bar just under the titlebar to change color

2) The App-grouping widget still shows the previews and active icons on a dark background, just like in the picture :

Image

3) The chromium browser still displays a black interface

Image

Here is the base theme : http://cinnamon-spices.linuxmint.com/themes/view/400

hope to find a solution soon...

Penn
Level 5
Level 5
Posts: 753
Joined: Tue Jun 10, 2014 1:12 pm

Re: Help changing a GTK3 theme color

Post by Penn » Fri Aug 14, 2015 11:06 am

I can't tell much from the small screenshots. Is that Caja (Mate), Nemo (Cinnamon) or something else?

I glanced at the theme you use as a base but didn't delve deep into what is needed. First thing is it uses and engine called Unico. Did you install it (search software manager for gtk3-engines)? I'm guessing you did.

I saw a file in gtk-3.0/assets called "menubar.svg". Did you change the color of that?

The chromium issues can probably be resolved one of 2 ways. Got the your Mint-X theme folder and find the chrome.rc file and replace the Android chromium.rc file.

The better way to fix the chromium.rc file is what should be standard procedure for writing (or re-writing) any theme. Open terminal and use it to open several different types of apps looking for theme errors. Chromium is opened from terminal by typing "chromium-browser". It may give you an error message or even several with a line number for the error.

Some lines not in the Mint-X chrome.rc and the Android chromium.rc files mentioned that may be of use to add but your current questions don't address-

Code: Select all

style "chrome_menu_item"
{
        bg[SELECTED] = @selected_bg_color
        text[SELECTED]		= @selected_fg_color
}
and

Code: Select all

widget_class "*<GtkCustomMenu>*<GtkCustomMenuItem>*" style "chrome_menu_item"

elbullazul
Level 2
Level 2
Posts: 50
Joined: Wed Aug 12, 2015 1:41 pm

Re: Help changing a GTK3 theme color

Post by elbullazul » Mon Aug 17, 2015 4:33 pm

Penn wrote:I can't tell much from the small screenshots. Is that Caja (Mate), Nemo (Cinnamon) or something else?

I glanced at the theme you use as a base but didn't delve deep into what is needed. First thing is it uses and engine called Unico. Did you install it (search software manager for gtk3-engines)? I'm guessing you did.

I saw a file in gtk-3.0/assets called "menubar.svg". Did you change the color of that?

The chromium issues can probably be resolved one of 2 ways. Got the your Mint-X theme folder and find the chrome.rc file and replace the Android chromium.rc file.

The better way to fix the chromium.rc file is what should be standard procedure for writing (or re-writing) any theme. Open terminal and use it to open several different types of apps looking for theme errors. Chromium is opened from terminal by typing "chromium-browser". It may give you an error message or even several with a line number for the error.

Some lines not in the Mint-X chrome.rc and the Android chromium.rc files mentioned that may be of use to add but your current questions don't address-

Code: Select all

style "chrome_menu_item"
{
        bg[SELECTED] = @selected_bg_color
        text[SELECTED]		= @selected_fg_color
}
and

Code: Select all

widget_class "*<GtkCustomMenu>*<GtkCustomMenuItem>*" style "chrome_menu_item"
Hi,

Thanks for your answers. I can't really try them now but I'll give your answers a try as soon as I can

It's Nemo that's in the screenshot.

editing software? I've just been editing the CSS files for now

As for the menubar.svg file I think I replaced it by a png and exporting it in svg may be the solution.

Do you know of some tutorial or way to export the theme I've edited so that it may apply to other computers?

Penn
Level 5
Level 5
Posts: 753
Joined: Tue Jun 10, 2014 1:12 pm

Re: Help changing a GTK3 theme color

Post by Penn » Mon Aug 17, 2015 6:33 pm

elbullazul wrote: Thanks for your answers. I can't really try them now but I'll give your answers a try as soon as I can

It's Nemo that's in the screenshot.
Nemo has some css lines specific to it. Go to /usr/share/themes/Mint-X/gtk-3.0/apps and copy the cinnamon-applications.css file. Paste that into the Android/gtk-3.0 folder. Open gtk.css in that same Android folder and scroll to the bottom where you see a few lines to "import" some css files. Create a line to import the "cinnamon-applications.css". You can make modifications to the cinnamon-applications.css file if you want but I think it uses the standard color system assigned at the beginning of gtk.css .
editing software? I've just been editing the CSS files for now
I'm not sure what you are referring to here? In cinnamon setting - themes there is a way of adding themes but I don't use that. I just make the theme and drop the folder in the /usr/share/themes folder (or /home/username/.themes).

If you mean my reference to the engine, that isn't editing software. An engine is a way (or language) for the computer to draw the window. Some can do things others can't or just in a different way. An example would be the scroll bar in one engine may look substantially different than the way it would look in another engine. I just meant the software manager you have in your main menu (start menu) is the easiest way to install the Unico engine since it isn't a default engine in Cinnamon.
As for the menubar.svg file I think I replaced it by a png and exporting it in svg may be the solution.
The png can work. Just search all your css files and replace any entries for "menubar.svg" with "whatever_you_named_it.png". But exporting an svg would be easier.
Do you know of some tutorial or way to export the theme I've edited so that it may apply to other computers?
Exporting the theme is easy. Copy the folder the theme is in and move it to any gtk3 or gtk2 machine (so no, you can't use it on Windows as far as I know but other mint or gnome3 based distros it should work). Depending on how you send it you may need to zip the folder.

elbullazul
Level 2
Level 2
Posts: 50
Joined: Wed Aug 12, 2015 1:41 pm

Re: Help changing a GTK3 theme color

Post by elbullazul » Mon Aug 17, 2015 8:03 pm

Penn wrote:
elbullazul wrote: Thanks for your answers. I can't really try them now but I'll give your answers a try as soon as I can

It's Nemo that's in the screenshot.
Nemo has some css lines specific to it. Go to /usr/share/themes/Mint-X/gtk-3.0/apps and copy the cinnamon-applications.css file. Paste that into the Android/gtk-3.0 folder. Open gtk.css in that same Android folder and scroll to the bottom where you see a few lines to "import" some css files. Create a line to import the "cinnamon-applications.css". You can make modifications to the cinnamon-applications.css file if you want but I think it uses the standard color system assigned at the beginning of gtk.css .
editing software? I've just been editing the CSS files for now
I'm not sure what you are referring to here? In cinnamon setting - themes there is a way of adding themes but I don't use that. I just make the theme and drop the folder in the /usr/share/themes folder (or /home/username/.themes).

If you mean my reference to the engine, that isn't editing software. An engine is a way (or language) for the computer to draw the window. Some can do things others can't or just in a different way. An example would be the scroll bar in one engine may look substantially different than the way it would look in another engine. I just meant the software manager you have in your main menu (start menu) is the easiest way to install the Unico engine since it isn't a default engine in Cinnamon.
As for the menubar.svg file I think I replaced it by a png and exporting it in svg may be the solution.
The png can work. Just search all your css files and replace any entries for "menubar.svg" with "whatever_you_named_it.png". But exporting an svg would be easier.
Do you know of some tutorial or way to export the theme I've edited so that it may apply to other computers?
Exporting the theme is easy. Copy the folder the theme is in and move it to any gtk3 or gtk2 machine (so no, you can't use it on Windows as far as I know but other mint or gnome3 based distros it should work). Depending on how you send it you may need to zip the folder.
I found out from another theme that I can import an image to fill in the black space (changing the menubar.svg didn't worked), but for that I must import another CSS file, and adding the instruction in gtk.css doesn't make any difference.

Maybe you know this other theme, delorean dark

elbullazul
Level 2
Level 2
Posts: 50
Joined: Wed Aug 12, 2015 1:41 pm

Re: Help changing a GTK3 theme color

Post by elbullazul » Mon Aug 17, 2015 8:05 pm

Say, do you have any idea to fix the dark-hover in the cinnamon panel ? (the second picture)

For the chrome theme it was a an issue with a chrome theme I had installed. My bad...

Penn
Level 5
Level 5
Posts: 753
Joined: Tue Jun 10, 2014 1:12 pm

Re: Help changing a GTK3 theme color

Post by Penn » Mon Aug 17, 2015 9:16 pm

I'm still not certain what you mean since that pic is so small. If it is indeed tied to the panel you can find the settings for that in the cinnamon folder file cinnamon.css . The fact that I don't use the cinnamon panel gets in my way for a true panel issue (I use Cairo Dock instead).

Since you know it's a hover issue just search the file for "hover" or "panel" and see what you can figure out. That css also controls the menu, alt tab appearance, every detail of the panel and a few other aspects.

In case you aren't familiar with different color formats some of the values won't be the hexdecimal color values in other areas of the theme. You can use hexdecimal but you can use RGB and RGBA numbers. first value is red from 0 (none) to 255 (full red) and the same for green and blue. The "A" is alpha meaning tranparency. 0 is full transparent and 1 is full opacity and a value of 0.5 is midway between. edit - I forgot to point you to a good site for choosing colors and converting hexdecimal values the RGB http://www.2createawebsite.com/build/hex-colors.html

This may be more info than you intend to use (or even less) but I think it can help you on the way to truly personalizing your theme which is IMO gratifying.

Yes, I am familiar with a few of killhellokitty's themes including Delorean Dark and the Dorian versions. Some of my own personal theme came straight from how he did things. If you like dark themes he has some great stuff. I also learned that some of his themes have errors reported when opening apps from terminal but those errors might only exist in cinnamon or he might have fixed them by now since that was more than a year ago.

elbullazul
Level 2
Level 2
Posts: 50
Joined: Wed Aug 12, 2015 1:41 pm

Re: Help changing a GTK3 theme color

Post by elbullazul » Tue Aug 18, 2015 11:35 am

Penn wrote:I'm still not certain what you mean since that pic is so small. If it is indeed tied to the panel you can find the settings for that in the cinnamon folder file cinnamon.css . The fact that I don't use the cinnamon panel gets in my way for a true panel issue (I use Cairo Dock instead).

Since you know it's a hover issue just search the file for "hover" or "panel" and see what you can figure out. That css also controls the menu, alt tab appearance, every detail of the panel and a few other aspects.

In case you aren't familiar with different color formats some of the values won't be the hexdecimal color values in other areas of the theme. You can use hexdecimal but you can use RGB and RGBA numbers. first value is red from 0 (none) to 255 (full red) and the same for green and blue. The "A" is alpha meaning tranparency. 0 is full transparent and 1 is full opacity and a value of 0.5 is midway between. edit - I forgot to point you to a good site for choosing colors and converting hexdecimal values the RGB http://www.2createawebsite.com/build/hex-colors.html

This may be more info than you intend to use (or even less) but I think it can help you on the way to truly personalizing your theme which is IMO gratifying.

Yes, I am familiar with a few of killhellokitty's themes including Delorean Dark and the Dorian versions. Some of my own personal theme came straight from how he did things. If you like dark themes he has some great stuff. I also learned that some of his themes have errors reported when opening apps from terminal but those errors might only exist in cinnamon or he might have fixed them by now since that was more than a year ago.

I've half fixed the problem :)

I had to edit th gtkrc file to change the two main "rebel" colors. I'm still searching for a solution for the Nemo issue, but maybe one of the .rc files is causing the issue

Penn
Level 5
Level 5
Posts: 753
Joined: Tue Jun 10, 2014 1:12 pm

Re: Help changing a GTK3 theme color

Post by Penn » Wed Aug 19, 2015 4:09 pm

I had time to look more closely at that theme and may have found the Nemo issue. Towards the bottom of gtk.css in the last @define-color section is a line for the toolbar gradient. Again, it is hard to tell with the size of pics but I think this is it.

The toolbar_gradient_base is the top of the tool bar and it fades to the toolbar_gradient_final color but in this case both are set to full black. Replacing "#000000" with "@base_color" might fix it or if you want a gradient you can enter something like "shade (@base_color, 1.9)" to make one value darker and "shade (@base_color, 0.2)" for a lighter color than your base. I prefer using the basic defined colors at the beginning of either gtk.css for 3.0 (in some themes it's gtk-main.css) or gtkrc in 2.0. After those are defined there should be almost no use of hexdecimal or rgb values in my opinion (I say almost because the rarely used misc. colors do need to be defined also).

I'm still not sure what you mean by "app-grouping widget". I temporarily put a cinnamon panel back and didn't see it. Is that the actual name of an applet or desklet? If so where can I find it to look more closely? If that ins't the actual name are you able to post a larger pic and a precise description of where the color is so (I do think I can see it but not completely sure) I can get a better look or provide the actual name? Basically, I need to know how to recreate the same thing since I didn't see how it is done.

I know you didn't ask but I thought I'd off the info that the title bar is controled in the metacity xml.

elbullazul
Level 2
Level 2
Posts: 50
Joined: Wed Aug 12, 2015 1:41 pm

Re: Help changing a GTK3 theme color

Post by elbullazul » Wed Aug 19, 2015 4:33 pm

Penn wrote:I had time to look more closely at that theme and may have found the Nemo issue. Towards the bottom of gtk.css in the last @define-color section is a line for the toolbar gradient. Again, it is hard to tell with the size of pics but I think this is it.

The toolbar_gradient_base is the top of the tool bar and it fades to the toolbar_gradient_final color but in this case both are set to full black. Replacing "#000000" with "@base_color" might fix it or if you want a gradient you can enter something like "shade (@base_color, 1.9)" to make one value darker and "shade (@base_color, 0.2)" for a lighter color than your base. I prefer using the basic defined colors at the beginning of either gtk.css for 3.0 (in some themes it's gtk-main.css) or gtkrc in 2.0. After those are defined there should be almost no use of hexdecimal or rgb values in my opinion (I say almost because the rarely used misc. colors do need to be defined also).

I'm still not sure what you mean by "app-grouping widget". I temporarily put a cinnamon panel back and didn't see it. Is that the actual name of an applet or desklet? If so where can I find it to look more closely? If that ins't the actual name are you able to post a larger pic and a precise description of where the color is so (I do think I can see it but not completely sure) I can get a better look or provide the actual name? Basically, I need to know how to recreate the same thing since I didn't see how it is done.

I know you didn't ask but I thought I'd off the info that the title bar is controled in the metacity xml.
ok, thanks for the advice, I tried in another copy of the theme and it worked :)

I let go of the cinnamon stuff, I just copied another Cinnamon folder from another theme and customized it with the colors I wanted

Couple of things left (if you don't mind)

Do you know how to change the right-button menu background color? And how to make windows semi-transparent?

Penn
Level 5
Level 5
Posts: 753
Joined: Tue Jun 10, 2014 1:12 pm

Re: Help changing a GTK3 theme color

Post by Penn » Fri Aug 21, 2015 2:08 pm

The only way I would be able to change the context menu (right click) menu in that Android theme would be too re-write large portions of the gtk-widgets.css which is more work than I am willing to do, sorry. This is why use a theme base that is written for Mint, as in the Mint-X theme, then I look at features I like in other themes and figure out how that was done and then adapt that to my theme. In this case you would have to figure out why the section for ".menu (" changes the context menu in Mint-X but doesn't change the color for context menu in Android (in fact it appears broken in Android because it doesn't even change the dropdown menus in Nemo's file, edit, etc.).

As far as transparency, Cinnamon makes that easy for one window at a time but it isn't the solution I'm guessing you are looking for. Settings - Windows and change the setting for "Action on the title bar with mouse scroll" to "Adjust opacity". It is possible there is a way to do it the way you want to but I'd have to have enough time to play around with different settings.

Maybe someone else can give better answers. I learned what know by experimenting,not some sort of actual training in GTK.

elbullazul
Level 2
Level 2
Posts: 50
Joined: Wed Aug 12, 2015 1:41 pm

Re: Help changing a GTK3 theme color

Post by elbullazul » Fri Aug 21, 2015 4:50 pm

Penn wrote:The only way I would be able to change the context menu (right click) menu in that Android theme would be too re-write large portions of the gtk-widgets.css which is more work than I am willing to do, sorry. This is why use a theme base that is written for Mint, as in the Mint-X theme, then I look at features I like in other themes and figure out how that was done and then adapt that to my theme. In this case you would have to figure out why the section for ".menu (" changes the context menu in Mint-X but doesn't change the color for context menu in Android (in fact it appears broken in Android because it doesn't even change the dropdown menus in Nemo's file, edit, etc.).

As far as transparency, Cinnamon makes that easy for one window at a time but it isn't the solution I'm guessing you are looking for. Settings - Windows and change the setting for "Action on the title bar with mouse scroll" to "Adjust opacity". It is possible there is a way to do it the way you want to but I'd have to have enough time to play around with different settings.

Maybe someone else can give better answers. I learned what know by experimenting,not some sort of actual training in GTK.
I appreciate your help. Just one last question (please don't get mad xD)
Can a theme change the terminal background?

Penn
Level 5
Level 5
Posts: 753
Joined: Tue Jun 10, 2014 1:12 pm

Re: Help changing a GTK3 theme color

Post by Penn » Fri Aug 21, 2015 6:11 pm

elbullazul wrote:
I appreciate your help. Just one last question (please don't get mad xD)
Can a theme change the terminal background?
LOL. I won't get mad. I didn't mean to come across as giving you the brush off. I just meant to say I can't always give you answers because my own experience is limited. I'm glad to help.

The file in gtk-3.0/apps called gnome-applications.css (in most themes I've seen including that Android theme) is a section for terminal. If for some reason those changes don't take you will need to go into terminal - edit - profile preferences and under the "color" tab make sure there is a check for the first line line about using system theme.

elbullazul
Level 2
Level 2
Posts: 50
Joined: Wed Aug 12, 2015 1:41 pm

Re: Help changing a GTK3 theme color

Post by elbullazul » Fri Aug 21, 2015 6:41 pm

Penn wrote:
elbullazul wrote:
I appreciate your help. Just one last question (please don't get mad xD)
Can a theme change the terminal background?
LOL. I won't get mad. I didn't mean to come across as giving you the brush off. I just meant to say I can't always give you answers because my own experience is limited. I'm glad to help.

The file in gtk-3.0/apps called gnome-applications.css (in most themes I've seen including that Android theme) is a section for terminal. If for some reason those changes don't take you will need to go into terminal - edit - profile preferences and under the "color" tab make sure there is a check for the first line line about using system theme.
Thanks for the answer :D I'll check that as soon as I can.

Penn
Level 5
Level 5
Posts: 753
Joined: Tue Jun 10, 2014 1:12 pm

Re: Help changing a GTK3 theme color

Post by Penn » Thu Aug 27, 2015 9:58 pm

I see you got the context menu working. Was it a simple fix?

elbullazul
Level 2
Level 2
Posts: 50
Joined: Wed Aug 12, 2015 1:41 pm

Re: Help changing a GTK3 theme color

Post by elbullazul » Thu Oct 15, 2015 9:20 pm

Penn wrote:I see you got the context menu working. Was it a simple fix?
Hi,

Sorry for the delay but I was really focused on the Windows 10 I'd built.
I had to change the base theme and that caused a different look but I guess it's ok since all I wanted was a blue theme.

Thanks for your huge help! :)

Post Reply

Return to “Themes, Icons, & Wallpaper”