Spice Up Your Cinnamon Themes

Ever wanted to customize your Linux desktop, but just couldn't find that one perfect theme?

If Cinnamon is your current desktop environment, creating your own theme is easy to learn. You don't need any special tools, either — a regular text editor with syntax highlighting will do just fine.

Cinnamon has come a long way since it first appeared in 2011 as a fork of Gnome Shell. It used to depend on Gnome to work properly, but today it's a complete, standalone desktop environment with its own set of basic applications. This quick guide is based on Cinnamon 2.4 that ships with the latest Linux Mint release (version 17.1 "Rebecca"), but our theme will be compatible with any Linux distribution running Cinnamon.

Understanding Cinnamon Themes

Cinnamon themes are both simple and complex. Sounds paradoxical, right? They are simple because the entire theme is written in CSS, but complex because the theme file is huge and not very well documented. For the most part you can deduce which rules modify which desktop elements, but for some you'll have to go through trial and error. It's expected you're familiar with CSS before you try this, but if you're not, have no worries — you can quickly learn CSS online with helpful tutorials.

It's important to note that Cinnamon themes do not change window borders, buttons, or any other application elements. These objects are controlled by GTK themes, which you have to download separately. The Cinnamon theme itself affects only the Mint Menu, panel, tooltips, notifications, applets and some dialogs.

Getting Started

Generally speaking, there are two ways to create a Cinnamon theme: code it from scratch or use an existing one as a template. We're going with the latter approach as it's much easier. Don't forget to check for license restrictions if you decide to redistribute the modified theme. It's usually enough to contact the author and ask for permission.

Before diving into CSS, it's good to have a plan of what exactly you want to change. In this example, we'll resize the digital clock, change the menu font and background color, and make the panel transparent. To ensure that your new theme is easy on the eyes, you can use free online tools to build color schemes.

Don't forget that some changes have "dependencies". If you change the panel background from dark to white, you'll have to change the colors of panel buttons and applets, too. Otherwise they might be invisible in your new theme, because they were white on the previously dark panel. If you want to create a dark theme, be wise and start with a template that is already dark-colored.

Choosing a Template

A good choice is the default Cinnamon theme, available on the project's GitHub pages. The deviantART community makes wonderful Cinnamon themes, and more can be downloaded from the official Linux Mint Spices page and the old faithful Gnome-Look.org.

If you want to use default themes, they are either in

/home/$USERNAME/.themes

/usr/share/themes

. Themes located in the latter directory affect applications run by all users (including root), while those in the

/home/$USERNAME

directory apply only to one user. I recommend you keep your work-in-progress theme in your

/home

directory. Once it's done, you can just symlink it using this command:

sudo ln -s /home/username/.themes/ThemeName /usr/share/themes/ThemeName

You'll notice that some themes contain subfolders named "gtk-2.0" and "gtk-3.0". This means they include GTK themes along with the Cinnamon theme. However, you only need the "cinnamon" folder.

Spice Up Your Cinnamon Themes – Its Easy!

There might be subfolders in it — they contain assets, small images which can be used to style desktop elements. For example, your Mint Menu can have a background image, and you would keep it in one of these subfolders. We need the file called "cinnamon.css", and now is the time to open it.

Theme Structure

I'm using "Linux Mint", one of the default themes. It's quite a lengthy CSS file. Luckily, the comments in the code provide a sense of direction. They divide the code into sections, each corresponding to one desktop element. Some of the sections are:

PopupMenu (popupMenu.js): modifies all popup menus, right-click panel menu and the main menu;
Panel (panel.js): self-explanatory;
Desklets (desklet.js) for desktop widgets and Applets (applet.js) for widgets on the panel;
Looking Glass: modifies the graphical debugging interface (cinnamon-looking-glass);
Menu (menu.js): affects only the main menu (MintMenu);
Window list (windowList.js): applies to the list of opened windows in the panel.

Modifying a Cinnamon Theme

We'll make a few small changes just to show how it's done. Once you're more comfortable with editing CSS, you can modify many elements at once and create new assets to completely transform any Cinnamon theme. Here's our "before" version:

Change the Panel Background Color and Transparency

In the "cinnamon.css" file, find the line starting with

#panel

We'll replace the gradient with a solid color and some transparency. Remove the entries:

background-gradient-start
background-gradient-end
background-gradient-direction

and add

background-color: rgba(152,13,13,0.6);

to get this:

By declaring the color in RGBa format, we make it easy to change color and transparency in one go. The last number in the brackets is the transparency value; 0 is completely transparent, and 1 is fully opaque.

The Cinnamon panel is divided into three areas (left, center, right). There's a special setting for changing the highlight color of each area when dragging a new applet into it. You can adjust this by modifying the values under

#panelLeft:dnd

#panelRight:dnd

and

#panelCenter:dnd

The main menu is controlled by two sections: "PopupMenu" and "Menu". Changes in the first one affect all popup menus. The "Menu" section contains options for Favorites, Categories, Places and the search box. That's why we have to change color and transparency under

.popup-menu-boxpointer

I copied the RGBa value of our new panel and added it after

-arrow-background-color:

, increased the border width to 2px and changed border color to gray. To change the font, I modified the

font-family

value at the beginning of the "cinnamon.css" file. This affects the entire theme, but can be adjusted individually for some elements. We went from this:

to this:

Make the Digital Clock on the Panel Bigger

Clock is a panel applet, but unlike Window List and Calendar, it doesn't have its own appearance settings defined in the theme file. You'll have to modify the general "Applets" settings, and that will affect the size of the menu button text, along with any other panel applet that's not individually adjustable.

To make the clock bigger, find

.applet-label

and increase the

font-size

value. Here you can override the font setting that we previously added for the main menu by changing the

font-family

value. In this example, I changed the clock into a sans-serif font, while the popup menus retained a serif font.

To modify the look of the Calendar applet (which you access by clicking the clock), look in the "Date applet" section. For example,

.datemenu-date-label

lets you change the size, color and font of the text at the top of the calendar applet (in this picture, it's "Sunday March 8...").

The "after" version is obviously not the prettiest theme in existence, but it shows the changes we've made.

The "Menu" button and clock are bigger, colors are changed and the font is different. The next step would be to tweak the less prominent elements of the interface, like the run dialog, end session dialog, or notifications.

Testing and Learning More

You can live-preview your changes if you place the theme files in

/home/$USERNAME/.themes/ThemeName

and set that theme as active in the

All Settings - Themes - Desktop

dialog.

If changes are not visible immediately, restart Cinnamon by pressing Alt+F2 to bring up the Run dialog, typing r and pressing Enter. Of course, you can edit everything first, then apply the new theme and check if anything needs fixing.

Beyond these basic instructions, you can find advice on Cinnamon theming on Linux Mint forums. There you can get feedback from users and other theme creators. As with many other creative activities, practice makes perfect, so the more themes you make (or edit), the easier it will become, and you'll be "all about that CSS, no trouble". Here's hoping that the Cinnamon development team will soon provide official, detailed theming documentation.

Spice Up Your Cinnamon Themes – Its Easy!