How to create your own GTK3 theme

Write tutorials here
There are more tutorials here http://community.linuxmint.com/tutorial/welcome
Forum rules
Please don't add support questions to tutorials,start your own thread in the appropriate sub-forum instead. Before you post please read this
User avatar
Zorba
Level 8
Level 8
Posts: 2312
Joined: Tue May 29, 2012 10:12 pm
Location: Tunisia

How to create your own GTK3 theme

Postby Zorba » Wed Jan 01, 2014 3:16 pm

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:


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

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
Image

Return to “Tutorials”

Who is online

Users browsing this forum: No registered users and 8 guests