This guide will guide you through some CSS basics and GTK theming methods*
Freedom of choice is one strong argument in favor of Linux. In modern times, this freedom is also applied on the Operating System's appearance, so why not make your desktop your very own ?
Usually, a new artist (that's how we'll call people who build themes) will not start theming from scratch. He'll usually start off with some theme he likes and then modify it to his/her taste. Here are some suggestions:
One of the easiest ways of changing a theme is by changing its colors. Navigate to ~/.themes/[THEME NAME]/gtk-3.0. You should see a couple of files, the most important one being the gtk.css file. This is the file that GTK will load when loading the theme. Usually, only the color definitions are placed here, though some modern themes include all css code in this file.
To change colors, you need to change the hex colors in the file. Use the GIMP or some web-based tool to do so. Play around and explore which colors you want to change.
In the case you chose a theme like the Arc theme or the Numix theme, you will have to manually change ALL hex values in the code file.
Some times you want to change only a specific color. For example, you want a slightly darker contextual menu. Open the gtk-widets.css file (usually imported in the suggested themes; otherwise, search the code) and search for the desired element. Here are a couple of them :
To change the element background color, search for the background-color: CSS property and change the referred color name (for example, from @theme_bg_color to @my_custom_color, or simply paste the hex color value instead. Don't forget the semicolon at the end of the line!
Basic CSS properties
It's a fact, if you don't know a bit of CSS you'll get lost among so many properties. Here are a couple of them and what they do.
border: solid 2px #f1f1f1;
where solid states the type of border, 2px the width of the border and #f1f1f1 the border color. You can also set different sizes for top, bottom, left and right borders. For example:
border: solid, 2px [top] 0px [right] 3px [bottom] 1px [left] @theme_fg_color;
box-shadow: inset, 0px 2px [0px 0px] #4c4c4c;
where inset describes the status of the shadow (drawn from outside inwards), 0px (x gap, from left to right), 2px (y gap, from top to bottom) and the shadow color again. Options in brackets are usually left out, but set the shadow thickness and the fading radius.
CSS has this good that it allows you to set different styles depending on user interaction with the element. For example, the following block is red, turns yellow when hovering the cursor over it and becomes blue when clicked.
This div is somewhat flashy...
It's the same for GTK theming. Here are the basic CSS states that usually appear in themes:
And that's it! You're ready to give GTK theming a try, thought only practice and experience will allow you to improve over time.
**Please note that, until GNOME 3.20, you still have to edit the gtk-2.0 style for legacy apps. However, tutorials in this matter are abundant in Xfce and LXDE forums, so we leave it to you to explore GTK 2 theming.
*KDE themes are not covered