Cinnamon theme tutorial (part 1)

What is cinnamon desktop?

Cinnamon is the fork of gnome 3 shell. Cinnamon brings the advanced features of gnome 3 and combines it with the traditional gnome 2x desktop to give user a pretty descent desktop experience. Cinnamon started with Linux Mint but it is also available for fedora, Ubuntu and other Linux distributions also. 

For more on cinnamon desktop visit http://cinnamon.linuxmint.com/

The cinnamon desktop can be customized with many applets and extensions.

The theme:

Cinnamon theme is made up of some images and CSS code. Since CSS is widely used for the web development anyone who has a knowledge of CSS can easily learn and design the cinnamon theme. All you need is to have some basic understanding of CSS.

I Assume that you are running Linux Mint on your machine.

The default theme of cinnamon is located at  /usr/share/cinnamon/theme.

Open the file manager and browse to the above mentioned location. You will see some .svg,  .png images and cinnamon.css file. 

The .svg and .png images are used as icons. The customization is done by editing the cinnamon.css file. The cinnamon.css file will serve as the template for our new themes that we're going to create.

Getting started:

1. Go to your home folder
2. Create a directory “cinnmonthemes”
3. Create a directory “firsttheme” inside of “cinnamonthemes" which you created in the 2nd step.
4. Create a directory "cinnamon" inside firsttheme.
5. Copy all the content from /usr/share/cinnamon/theme into cinnamonthemes/firsttheme/cinnamon/

Now that you have copied the default theme to the cinnmonthemes directory, we'll work on the themes in this directory for our tutorial

Installing the theme:

Theme should be installed in the .themes directory in the home folder. The .themes directory is hidden by default. To view it, go to your home directory, click view and select show hidden files option. Folders starting the dot are hidden folders. Look for .themes folder. If .themes folder is not found, create it.

Now copy the firsttheme directory and paste it in the .themes directory. This completes the installation part. Now to apply your theme you need restart the shell. Press Alt+F2 and type r and hit enter. This will restart the shell. Now your theme is ready for applying. Launch cinnamon-settings from the popup menu, click on the themes and select firsttheme. Your theme is now applied.

The firsttheme is similar to the default theme and you'll not find any differences because you have not made any changes to the theme. Till now all you have done is just copied the default theme and  renamed it as firsttheme. 

Editing the theme:

The wow starts now!

First let's start by editing the panel background color. The panel is where the menu, running apps, date time, network appplets etc,. reside. To change the background of the panel open the cinnamon.css file present in the .themes/firsttheme/cinnamon/ with gedit or any text editor that is convenient to you and search for #panel and look for this section:

#panel {

color: #ffffff;

background-color: #555555;

font-size: 8.5pt;

font-weight: normal;

height: 25px;

}

the command background-color: #555555 defines the panel's background color. To change the panel background to red change the value #555555 to  #FF0013.

Save the changes you have made to the file. Restart the shell by pressing Alt+F2, type 'r' and hit enter. This will restart the shell and the panel background changes to red.

Hope you enjoyed this tutorial. In the next tutorial we'll learn how to change the popup menu background color and border color.