How to customize Mint-X GTK theme colours

[hexdef101]

Thanks Austin, I didn't have that page.

[caribriz]

Bookmarked all three pages

[Brahim Salem]

Many thanks guys for letting me know all this and I'll fix that theme soon BTW my facebook is in case you need me for an instant chat on the group https://www.facebook.com/freeman.gilgamesh

[austin.texas]

Try this at the http://www.color-hex.com/ website.
Enter your basic color for your theme in the search box. If you are doing a blue theme, enter "blue". Then if you want a very light blue for a background, choose one of the tints, and click on it for that page. Then you can click on one of those tints for another page - and so on...
I did that with #acefff and came up with a background I liked that I probably wouldn't have gotten any other way.
BTW - you don't enter #aceff in the search box, it has to be acefff

[Brahim Salem]

Many thanks austin trying that now

[Brahim Salem]

Ok guys now we know that To create your own GTK 3, take a GTK three theme (Mint-X is the easiest to edit), copy it from /usr/share/themes, paste it in ~/.themes, rename it and edit the files and images. The following edits are for a copy of Mint-X gtk theme:


xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

To change Background color (the light grey color in Mint-X gtk theme):
gtk-3.0 > gtk.css - @define-color bg_color #d6d6d6;
gtk-3.0 > settings.ini - nbg_color:#d6d6d6
gtk-2.0 > gtkrc - nbg_color:#D6D6D6
change image color in GIMP:
gtk-2.0 > Bars - menubarbg.png
gtk-2.0 > Bars - toolbarbg.png
gtk-2.0 > Apps > Caja - toolbarbg.png
gtk-2.0 > Apps > Nautilus - toolbarbg.png


For Nemo sidebar - make the following edits in gtk-3.0 > apps > nemo.css -

NemoWindow .sidebar .view {
background-color: #3F3F3F; /* to change dark grey background color of sidebar*/
color: #EEEEEE; /* to change normal text color in sidebar */
/* text-shadow: 1px 1px alpha (#000000, 0.7); */
}

NemoWindow .sidebar .view:selected {
color: #EEEEEE; /* to change selected text color in sidebar*/
}

NemoWindow .sidebar .view:hover {
background-color: shade(#3F3F3F , 1.4); /* to change the hover background color in sidebar*/
}

Nemo searchbar (pale green color):
gtk-3.0 > gtk.css - @define-color info_bg_color rgb(172, 205, 138);

To add support for Nautilus sidebar:

Create this file named nautilus.css, save it in gtk-3.0 > apps

/* sidebar */
NautilusWindow .sidebar,
NautilusWindow .sidebar .view {
background-color: #7fa24d; /* change this value to your own choice for sidebar background color */
color: #EEEEEE;
/* text-shadow: 1px 1px alpha (#000000, 0.7); */
}

NautilusWindow .sidebar .view:selected {
color: #EEEEEE;
}

NautilusWindow .sidebar .view:hover {
background-color: shade(#3F3F3F , 1.4);
}

then in :
gtk-3.0 > gtk.css - add this to bottom of file: @import url("apps/nautilus.css");


Selected background color (pale green color):
gtk-3.0 > gtk.css - @define-color selected_bg_color #accd8a;
gtk-3.0 > settings.ini - nselected_bg_color:#accd8a
gtk-2.0 > gtkrc - nselected_bg_color:#accd8a
gtk-2.0 > gtkrc - nfocus_color:#94b06f
change image color in GIMP:
gtk-2.0 > Treeview - row-selected.png
gtk-2.0 > Treeview - iconview-selected.png
gtk-2.0 > Treeview - Progressbar/bar.png
gtk-2.0 > Apps > Caja - row-selected.png
gtk-2.0 > Apps > Nautilus - row-selected.png


Change color of radio buttons and checkboxes in GIMP:
gtk-2.0 > Radiocheck - check-a-shadow-out.png
gtk-2.0 > Radiocheck - check-p-shadow-in.png
gtk-2.0 > Radiocheck - check-shadow-in.png
gtk-2.0 > Radiocheck - check-s-shadow-in.png
gtk-2.0 > Radiocheck - radio.svg***** (export as radio.png)
gtk-2.0 > Radiocheck - radio-p-shadow-in.png
gtk-2.0 > Radiocheck - radio-shadow-in.png
gtk-2.0 > Radiocheck - radio-s-shadow-in.png
gtk-3.0 > assets > checkbox-checked.png
gtk-3.0 > assets > checkbox-checked-hover.png
gtk-3.0 > assets > radio-selected.png
gtk-3.0 > assets > radio-selected-hover.png


Tooltips (pale yellow color):
gtk-3.0 > gtk.css - @define-color tooltip_bg_color: #F5F5B5; #ced8e1;
gtk-3.0 > settings.ini - ntooltip_bg_color:#F5F5B5
gtk-2.0 > gtkrc - ntooltip_bg_color:#FBEAA0


To edit Metacity font colour: in folder gtk-3.0 >gtk.css
@define-color selected_fg_color #2e2e2e; and
@define-color fg_color #dbf3d3;

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


Tips:

1- If you are working on another theme other than Mint-x you can add suuport for nemo by creating a simple css with the below details and we place it in gtk-3.0 >apps:

Code: Select all

  /* sidebar */

    NemoWindow .sidebar .view {
       background-color: #E56C19;
       color: #EEEEEE;
       /* text-shadow: 1px 1px alpha (#000000, 0.8); */
    }

    NemoWindow .sidebar .view:selected {
       color: #EEEEEE;
    }

    NemoWindow .sidebar .view:hover {
        background-color: shade(#3F3F3F , 1.4);
    }

    /* inactive pane */
    .nemo-inactive-pane .view {
        background-color: shade(@theme_base_color, 0.95);
    }

    .nemo-inactive-pane .view:selected {
        background-color: @theme_selected_bg_color;
    }

    /* Adjust size of small nemo status bar buttons */
    NemoWindow .toolbar .button {
        padding: 2px 4px;
    }

and add this line:

Code: Select all

 @import url("apps/nemo.css");

to the very bottom of gtk-3.0 >gtk.css

[Brahim Salem]

Becuase of lack of documentation on the creation GTK3 themes, I wrote this tutorial here http://forums.linuxmint.com/viewtopic.php?f=42&t=154780 and here http://community.linuxmint.com/tutorial/view/1518 Please help me improve it

[caribriz]

Brahim,

Have sent you a PM.

[Brahim Salem]

hi guys I made a new theme here:
Get the theme here http://gnome-look.org/content/show.php/ ... ent=162677

Get the wallpaper here http://gnome-look.org/content/show.php/ ... ent=162678

[Brahim Salem]

Made a new theme pack. I call it XP this time

Get it here http://cinnamon-spices.linuxmint.com/themes/view/276

[Brahim Salem]

check this out guys

[Minterator]

How about this?

http://forums.linuxmint.com/viewtopic.php?f=47&t=153673

[caribriz]

How about this?

viewtopic.php?f=47&t=153673

Hi,

There are a few tools like this around, also you can do similar with dconf-editor.
But I don't think they can change ALL the colors throughout the theme. You have to do it manually yourself .... or download someone else's edited theme.

The idea of this thread is to try it yourself, and learn about the colors of themes - specifically Mint-X gtk theme - a little more.
This is using Cinnamon as well - in mate you can customize the Mint-X gtk2 theme more easily anyway.

[caribriz]

Becuase of lack of documentation on the creation GTK3 themes, I wrote this tutorial here http://forums.linuxmint.com/viewtopic.php?f=42&t=154780 and here http://community.linuxmint.com/tutorial/view/1518 Please help me improve it

Brahim -

Have sent you another PM with suggestions for changes to your tutorial you posted above, and in the Tutorials sub-forum as well as at the community website.

[Brahim Salem]

I haven't got it!!

[caribriz]

Have you got it now???

[Brahim Salem]

yes i did and i have PMed you too

[Brahim Salem]

hey guys me and caribriz have edited the above tutorial for future reference

[hexdef101]

there is one thing you should include in your tutorial. As most of our themes (CinnamonThemes) rely heavily on Graphics. you need a part about setting Background Image on there. Without this your left only with the ability to change colors.

[caribriz]

there is one thing you should include in your tutorial. As most of our themes (CinnamonThemes) rely heavily on Graphics. you need a part about setting Background Image on there. Without this your left only with the ability to change colors.

It's not really a tutorial as such, in that it doesn't tell you how to do it. It's more of a reference list (which I think was Brahim's intention) on what bits to change - just to do a basic color change of the Mint-X gtk theme - as per the thread's title.

If you're talking about the background-image gradients in the gtk theme, I don't think I have changed them anywhere in my edits of Mint-X - can't remember anyway
The "list" is intended to be just about basic colors. Inserting images in the gtk theme is another matter, going further than this simple list.

I think at some stage, it would be good to do a separate (more detailed) how-to pdf tutorial with pictures on how to do what you've done with the Polished Oak Cinnamon theme with images. What goes where, and how each section of the cinnamon theme relates to the images and how they display.