Pinterest Stumbleupon Whatsapp
Ads by Google

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 Geany - A Great Lightweight Code Editor For Linux Geany - A Great Lightweight Code Editor For Linux Surprisingly, Linux doesn't offer that many good IDE's (Integrated Development Environments). I believe this is because back in the day most Linux programmers took out good old Notepad (or gedit in this case), and started... Read More will do just fine.

Cinnamon has come a long way since it first appeared in 2011 as a fork of Gnome Shell Gnome-Based Desktop Environments Explained: MATE vs. Gnome Shell vs. Unity vs. Cinnamon Gnome-Based Desktop Environments Explained: MATE vs. Gnome Shell vs. Unity vs. Cinnamon Ever since Gnome went ahead with their Gnome Shell idea, the Linux community has been at a frenzy to find a new desktop environment that is right for them. A majority of users used Gnome... Read More . It used to depend on Gnome to work properly, but today it’s a complete, standalone desktop environment Cinnamon 2.0 Ditches GNOME, Features Enhanced User and Window Management Cinnamon 2.0 Ditches GNOME, Features Enhanced User and Window Management Cinnamon, the desktop shell using in Linux Mint, has finally released v2.0, which features new window tiling and snapping, along with enhanced user management options. Read More 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 Top 5 Sites To Learn CSS Online Top 5 Sites To Learn CSS Online Read More 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 Want A Mac OS Look With Linux Power? Have It All With Zukimac, A GTK Theme Want A Mac OS Look With Linux Power? Have It All With Zukimac, A GTK Theme It's OK if you enjoy the power of Linux but the aesthetics of Mac OS X. You can get your Linux installation to look more like Mac OS X with the Zukimac theme. Read More , 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.

Ads by Google

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 Color Me Impressed: 3 Tools For Effortlessly Finding Beautiful Color Schemes For Any Project Color Me Impressed: 3 Tools For Effortlessly Finding Beautiful Color Schemes For Any Project Color is important. It's one of those primeval things -- colors make us feel. They can communicate danger, passion, calmness, and almost any other emotion. They work across language barriers, and they can clash in... Read More .

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 or /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.

cinnamon-themes-directory-structure

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:

cinnamon-themes-default

Change the Panel Background Color and Transparency

In the “cinnamon.css” file, find the line starting with #panel.

cinnamon-themes-edit-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:

cinnamon-themes-panel-transparency

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.

Change the Main Menu Color, Transparency and Font

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.

cinnamon-themes-edit-menus

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:

cinnamon-themes-no-transparency

to this:

cinnamon-themes-menu-transparency

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.

cinnamon-themes-date

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.

cinnamon-themes-modified

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.

cinnamon-themes-settings

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.

  1. Derick
    September 28, 2016 at 12:07 am

    For some reason, every time I try to edit cinnamon.css, the edits don't show up. I save it as root, and it doesn't show up. I want to make the panel more transparent as well as change it's color, and then do the same to the menu, and window applications color and border-radius is also something I want to change. I'm really frustrated with this.

  2. Aleksandar Sokolovski
    July 17, 2016 at 6:44 pm

    really great and helpful article

  3. Mayank Garg
    April 3, 2015 at 12:14 pm

    Very helpful and guiding article for changing the themes .it helps novice like me very much. Thanks a lot

    • Ivana Isadora
      April 3, 2015 at 12:26 pm

      Thank you for the nice comment! :)

      Of course, there's so much more to Cinnamon theming - we could write a book about it :), but you can use this article as an introduction, and then later experiment with different settings.

  4.        
    March 26, 2015 at 2:12 pm

    a little and to the point article!

  5. Ed
    March 22, 2015 at 9:20 pm

    Very interesting. Currently learning front-end development and this would be a fun and unique way to brush up on CSS.

    Thanks!

    • Ivana Isadora
      March 22, 2015 at 10:10 pm

      Thank you for the comment, Ed. I'm glad you liked the article. :)

      I am by no means a CSS expert, but this was really easy to understand and modify, so I'm sure you won't have any problems if you decide to tinker with Cinnamon themes.

Leave a Reply

Your email address will not be published. Required fields are marked *