They offer different flash templates with latest features.
Login

Forgot password
Register
Back
Written by:
Brahim
Score: 4
votes: 8
Format: Article

 How to create a basic GTK3 theme on Linux Mint


To create your own GTK 3 theme, 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 list of files/images to edit are for a copy of Mint-X gtk theme in Linux Mint 16 Cinnamon.
Note: The files/images may be slightly different for previous/future versions of the 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*/
}


To change Nemo searchbar (pale green color):
gtk-3.0 > gtk.css - @define-color info_bg_color rgb(172, 205, 138); /* change the three rgb numbers */


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 of these files 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


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


To Edit the window titles font color:
gtk-3.0 >gtk.css
@define-color selected_fg_color #2e2e2e; and
@define-color fg_color #dbf3d3;



Optional:
To edit nemo window background colour from white:
in folder gtk-3.0 >gtk.css
edit @define-color base_color #ffffff;
NOTE: Changing this setting will also affect the background color of other apps, which may be unwanted.
eg. gedit, libre office etc.

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:




  /* 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:




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



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

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

For futher reading, and a step-by-step example of this process, see these tutorials:

Part 1 - changing the selected background color (the green "highlights")
http://www.mediafire.com/view/egq7qwlhb ... PART-1.pdf

Part 2 - changing the background color (from light-grey background)
http://www.mediafire.com/view/9tvs6ys9n ... PART-2.pdf

Part 3 - changing nemo's sidebar color
http://www.mediafire.com/view/3uo9mueq8 ... PART-3.pdf

These tutorials only deal with changing the colors of the Mint-X gtk theme (Controls) - not the cinnamon theme (panel, menu etc.).
The instructions are specific to Linux Mint 16 Cinnamon


Contributors: Brahim, caribriz, austin.texas and hexdef101[/quote]



Image Image Image


Tags: How to create a basic GTK3 theme on Linux Mint
Created: 3 years ago.
Last edited: 3 years ago.
Reviewed: 3 years ago.
Read 0 times.

Comments
2 years ago

MichaelTunnell
do you have or know of a tutorial for "the cinnamon theme (panel, menu etc.)."?  
3 years ago

Brahim
We will keep improving and updating this tutorial but will keep it as easy to follow as possible!  
3 years ago

Hammer459
Good tutorial
To make it even better describe how to define various colours and also elaborate slightly more on how to get the desired effect on each section in the theme.
 
3 years ago

jahid_0903014
good tutorial  

Other tutorials from Brahim