Gnome-shell theme tutorial (part1)

Previously I wrote a small article on getting started with cinnamon theme. Cinnamon is a desktop environment used in Linux mint OS. Cinnamon desktop is a fork of gnome 3. Linux mint people have tweaked gnome 3 shell and made cinnamon desktop environment. Since cinnamon is based on gnome 3, if you know how to create a gnome shell theme you can easily create a cinnamon theme and vice-versa.

As gnome 3 is widely used desktop environment and very popular, I decided to write an article on Gnome 3 shell theme so that it can be useful to both cinnamon and gnome 3 shell theme designers.

To find the version of Gnome-shell on your Linux box type the following command in a terminal:
gnome-shell --version
This will print the version as follows depending on the version
GNOME Shell 3.4.1

The gnome 3 comes with a default shell theme activated. This theme can be found at the location /usr/share/gnome-shell/theme 

As you can see in the pic above the theme comprises some svg, png images and the gnome-shell.css file. We can create a good looking themes by just editing these svg, png images and gnome-shell.css file. As the theme is mainly made up of images and the css file. These tools may be help you to speed up the design.

GIMP---image manipulation program
cssd---advanced CSS editor
inkspace-- advanced scaled vector graphics editor to create and edit svg images
geany-- A light weight Integrated development environment (IDE)

These packages are available for all  major Linux distributions

If we want to add and load our own themes, we must first install the gnome-tweak tool. check your distribution's package manager for gnome-tweak tool and install gnome-tweak tool.

After this we need to install the gnome user theme extension that allows to install the themes from the user directory. For this just visit the website https://extensions.gnome.org/extension/19/user-themes/ on firefox browser  and slide the button to on position  This will show you a dialog to install. click on install.

Now open the advanced settings applet from the settings menu and enable the user themes extension.

Now we are ready to make our own theme. First we'll copy the default theme and tweak it to create our own theme.


The user themes are installed in /home/USERNAME/.themes directory. The .themes directory is hidden by default in the home directory. Press Ctrl+H to view the .themes directory.
Now open the .themes directory and:
1) create a new directory with the name mytheme. This my is the unique identifier for your theme.
2) open the mytheme directory and create another directory and name it as gnome-shell
3) copy the contents of the default theme from /usr/share/gnome-shell/theme to the gnome-shell directory created in step 2


Now the default theme is copied which will serve as a template. Now the mytheme directory structure look like this:
/home/USERNAME/.themes/mytheme/gnome-shell where USERNAME is the user directory on the system.

The gnome-shell directory will contain all the png,svg and css which form the gnome-shell theme. Now open the advanced settings applet select the the shell theme as mytheme

In case if the advanced settings applet didn't open and freezes as happned on my Ubuntu 12.04, refer this post http://www.fandigital.com/2012/09/fix-user-themes-gnome-shell-extension.html

Now navigate to /home/USERNAME/.themes/mytheme/gnome-shell and open the gnome-shell.css file with your favorite text editor. The file is neatly coded and well documented.

First we'll edit the top panel background color. To do this search for this block of code

/* Panel */

#panel {
background-color: black;
font-weight: bold;
height: 1.86em;
}

 To change the panel's background color, replace the background-color: black with background-color: #a52a2a and save the file.

Press Alt+F2 and in the dialog that opens type 'r' without quotes and hit enter to restart the shell. The shell will restart with the new panel background.


Hope you enjoyed this hack. :) :)