How to make a Cinnamon theme

Making a Cinnamon theme is both easy and fun, so let’s see how it’s done :)

In this tutorial we’ll create a theme called “MyTheme” by modifying the default Cinnamon theme.

1. Create the new theme

  1. Go to your home folder
  2. Create a directory “MyTheme”
  3. Create a directory “cinnamon” inside of “MyTheme”
  4. Copy all the content from /usr/share/cinnamon/theme into Mytheme/cinnamon/

2. Get rid of files you don’t need

The file thumbnail-generic.png is not needed, and so you can delete it.

 3. Install the theme

Place your theme in ~/.themes:

Note: .themes is a “hidden” folder in your home directory, so you might have to click on “view->show hidden files” in your file browser. If the .themes directory doesn’t exist, create it.

4. Select the theme

To select your theme, launch Cinnamon Settings, click on “Themes” and select “MyTheme”.

5. Modify your theme

Open your file browser on .themes/Mytheme/cinnamon and have a look around. You’ll see the the following:

  • png images which you can modify with Gimp
  • svg vectors which you can modify Inkscape (or a text editor if you’re more into brute force search/replace features)
  • css files which you can edit with a text editor (I personally recommend Geany for this)

Test your changes as much as you can. To see what your theme looks like after you made changes to it you can either select another theme and reselect your theme in Cinnamon Settings, or restart Cinnamon by pressing “Alt F2″ and typing “r”.

6. Tips and Tricks

Here are a few things you should know:

  • toggle-on-us.svg and toggle-off-us.svg are used when the locale is English. For other languages, toggle buttons use toggle-on-intl.svg and toggle-off-intl.svg. If you modify these, make sure to modify both the US and international versions.
  • thumbnail.png is the picture used by Cinnamon Settings to show a preview of your theme. Once you’re finished with your theme, make a screenshot with a similar size, overwrite thumbnail.png and make sure it looks nice in Cinnamon Settings.
  • overview.png and overview-hover.png should not be deleted. Users can decide whether or not they want the overview icon to appear, don’t take this choice away from theme by removing this from your theme.
  • cinnamon.css is what defines the look and feel of more or less everything in Cinnamon. It starts with sections and themes definitions which are also found in Gnome Shell (to make it easy for artists to port their existing Shell themes to Cinnamon) and it then goes on with styles definitions specific to Cinnamon.

CSS is widely used on the Web, so there’s plenty of resources for it. Don’t hesitate to Google things up to find out how to do a particular thing with CSS.

CSS supports color definitions in both Hex (typical HTML color codes) and RGB (which allows you to define transparency values). Don’t hesitate to use Gimp to capture the Hex code for a particular color you see on the screen, or to use http://www.javascripter.net/faq/rgbtohex.htm and http://www.javascripter.net/faq/hextorgb.htm to easily translate color codes between the two.

7. Submit your theme

Once you’re happy with your theme, add it to the Cinnamon Spices website at http://cinnamon-spices.linuxmint.com/themes

People will download it, rate it and comment on it. Don’t hesitate to use their feedback to further improve your theme. Give your theme version numbers and put a changelog in its description to let people know what’s been improved and why they should download it again.

8. Find help

If you need any help, don’t hesitate to chat with the Cinnamon developers on IRC at #linuxmint-dev on irc.spotchat.org

About The Author

Clement Lefebvre (aka "Clem") is the lead developer and founder of Cinnamon and Linux Mint. He's also involved in the MATE project as release manager.

41 Comments

  1. Great job, Clem & Team, I use linux for more then 10 years, and this the best way to interact with a a computer, it’s a beautiful the way to do things.
    Thank’s

  2. bill says: - reply

    Okay okay, I put overview back in. :-)

    Anyone have an idea why I can no longer post as Bill? I tried 7 times and posts just go poof! And disappear. Now I have to use bill without an avatar.

  3. bobby m9 says: - reply

    I am also not able to post anything. Trying with different name.

  4. ashwani says: - reply

    I am not able to post anything. Trying with different name and ID.

  5. akm74 says: - reply

    how i can change menu icon?
    thanks

    Akm74: At the moment you can’t. This is something we’ll add in future versions. We need to decide whether this is something that is defined in the theme, or in Cinnamon Settings by the user.

    • Why not an overriding option?
      I mean: theme designer can set theme menu icon but user can choose another one via settings. Is there some technical reason that prevents this?

      Anycase, great work guys!!! Cinnamon rocks!

  6. pablo says: - reply

    I’ve put new themes in ./themes directory, also in usr-share-themes and cinnamon-settings still recognize only default one theme Cinnamon. What I do wrong?

  7. Dave says: - reply

    Hi Clem, this is a great DE. Far better than what is out there now. How can I learn about editing the css file? I know a little bit about html css files but have no idea about themes. What do i edit for the start menu over view? Most themes seem to squash the links to close together.

    Also, is there a place i can go to and find out what everything means? For example,
    /* ===================================================================
    * Panel (panel.js)
    * ===================================================================*/

    #panel {
    color: rgba(221,187,102,1.0);
    background-gradient-direction: vertical;
    background-gradient-start: #663300;
    background-gradient-end: #000000;
    border: .07em solid transparent rgba(221,187,102,0.7);
    border-left: 0px;
    border-right: 0px;
    font-size: 9pt;
    font-weight: normal;
    height: 25px;
    font-family: Magik, MintSpirit, ubuntu, cantarell;
    }

    #panelLeft, #panelCenter {
    spacing: 4px;
    }

    #panelLeft:ltr {
    padding-right: 4px;
    }

    #panelLeft:rtl {
    padding-left: 4px;
    }

    #panelRight:ltr {
    padding-left: 0px;
    spacing: 0px;
    }

    #panelRight:rtl {
    padding-right: 0px;
    spacing: 0px;
    }

    .panel-status-button {
    border: 0px solid #8b8b8b;
    -natural-hpadding: 5px;
    -minimum-hpadding: 5px;
    font-weight: bold;
    color: rgba(221,187,102,1.0);
    height: 16px;
    }

    .panel-status-button:hover {
    color: rgba(221,187,102,1.0);
    }

    .system-status-icon {
    padding-left: 0px;
    padding-right: 0px;
    spacing: 0px;
    margin: 0px;
    }

    .panel-corner {
    -panel-corner-radius: 0px;
    -panel-corner-background-color: black;
    -panel-corner-inner-border-width: 2px;
    -panel-corner-inner-border-color: transparent;
    -panel-corner-outer-border-width: 1px;
    -panel-corner-outer-border-color: #536272;
    }

    what does all this control? Any help would be greatly appreciated. Maybe Bill can help me?
    dave

    • clem says: - reply

      Hi Dave, it’s the same syntax as for the CSS used in web pages.

      So for instance, #panel designs the panel elements, and these panels are composed of three sections (panelLeft, panelCenter, panelRight)… in this CSS file you define how they look.

      The best thing to get started is to tweak values and to see what it does. Or to look at other themes and their CSS.

  8. Paul Smith says: - reply

    Hi Clem,

    I love what you have done, and the whole css thingy is to me a good thing as I am a web developer. I have been playing with the theme somewhat, seems simple enough, how do we alter the menu background, border as well as the calendar background and border etc etc…..

    They look to be background and border (with radius), but then you have the little speech box thingy pointing to the menu icon and the time date etc so it sort of suggests its a pic of some kind…..

    Can you tell me if this can be styled?, I can alter the menu backdrop, but not the speech bubble background in it (I want to make it darker).

    ta

    smiffy6969

    • Paul Smith says: - reply

      Ahhh found it……

      .popup-menu-content {
      padding: 1em 0em;
      background: rgba(0,0,0,0.7);
      border: 5px solid rgba(128,128,128,0.40);
      border-radius: 5px;
      }

      this styles the menu background, just need to find the little arrow bit that points to the icons, guess its one of those pics….

  9. Craig says: - reply

    Clem: the old posted themes were properly uploaded as .zip files
    Those are easy to extract and add to your .themes folder

    However, many of the more recent uploads have been posted in
    .gz format and i am having a lot of trouble with those…they don’t extract to folders like the zip ones do and i can’t get them to work…

    Perhaps you can post something to let them know that they need to upload in .zip format…would make it a lot easier for us on the other end here…

    Thanks

  10. Craig says: - reply

    Update: On the mint forums i learned that i can do the .gz file by extracting twice to actually get the folder (initially when extracting you get a “metal like” looking icon) when you extract that you get the folder…
    so, that works of course (with an extra step) still…it would be nice if all themes would upload to .zip (makes it easier)…

  11. Paul Valley says: - reply

    Hello Clem and Gang

    love Cinnamon but am wondering how to use gtk themes how how i could make the windows transparent possibly

  12. vanderson says: - reply

    This is really cool, I’ve already tweaked my interface. (not enough to consider it a new theme though) Thanks Clem, I didn’t know it could be this easy…

    Is the window themes this easy to access?

    Side Note: I am a professional web developer (13 years now) and I work with CSS on a daily basis. I use tools like Firebug to help test and debug CSS issues on my sites. But messing with the CSS on Cinnamon was a downright bear, I had to completely and utterly guess which classes & selectors affected which elements.

    Is there any resource or targeting tool that could help us “see” the classes and id’s used in the interface?

    I spent at least 30 min just trying to _find_ the correct class to edit the main menu. It’s “popup-menu-boxpointer” with something called “-arrow” which I had to learn by trial and error, ugh, not fun.

    But now all my “popups” are styled the same, and so now I will have to spend a great deal more time just experimenting to find what anything does… This is not a complaint, but a reality, I can’t justify the time making themes without proper tools or documentation. If I have to guess every single selector, and this stuff is easy/second nature to me. (This is me being an old codger I guess, but family and work take time away from linux play)

    I have searched google/etc.. for any information on Ubuntu/Gnome 3 themes and I came up with squat. (seems even Gnome 3 doesn’t document this stuff)

    Possible Solution:
    A theme, stylesheet or js (extension?) that would visually label all elements on the screen with both (or one) of the id and class attributes. I had a couple minutes to try this with [selector]:after {content:attr(id);} But it seems that gnome doesn’t recognize the :after/:before pseudo selector or the content: property. But I bet something could be done with JS, don’t have time to try it though…

    Again, thanks Chlem, getting more access to the system is appreciated!

    Edit by Clem: That’s a brilliant idea. It’s going to take time to produce, but if we have the resources, we’ll do such a thing. If you feel up for it, don’t hesitate to do it yourself. Even just pictures/screenshots with labels/arrows to name visual elements on the screen with their CSS style name.. that would help artists a lot. Thanks for contributing this idea. I don’t know whether we’ll end up doing it or somebody else will, but it’s definitely something that would be useful.

    • vanderson says: - reply

      @chlem: When I get ahead on work, I will certainly be back to giving this a shot. From the little research I’ve done, it seems there JS hooks directly into Gnome 3, and they mirror the underlying APIs. (you’d know better about this) But I can’t seem to find _any_ documenation to anything ( and I am veteran internet researcher) related to Gnome’s core, It’s driving me crazy!

      Can you post a link to any documentation on Gnome3? (I am assuming this will be useful for Mint/Cinnamon coding) As this relates to Applets an Extensions as much as Themes.

      Right now, my only options seem to be 1. find an open source app 2. download & dissect and then 3. crap loads of trial and error.

      I’d love to build the visual CSS indicators theme/extension/applet, but need a place to start from. Thanks!

  13. jesse5567 says: - reply

    I agree with many of the comments so far. These .css files really need complete documentation. (I’m not talking about CSS. I’m sure there are many CSS tutorials and docs on the I-net. And simply staying consistent with what is there should be sufficient for most straightforward changes.)

    However, using:
    awk ‘/{/{x++}END{print x}’ cinnamon.css gdm.css
    shows over 300 *sets* of options which can be modified. Trying to guess what each one does and changing these by trial and error, IMO, is neither fun nor easy.

    Here’s my doc contribution, FWIW:
    /* main Mint menu and applet menus
    color is foreground
    */
    .popup-menu {
    color: #00ffff;
    font-size: 9.5pt;
    min-width: 100px;
    }

  14. GR33NB34V3R says: - reply

    I wonder if it’s possible to make a theme that’s transparent, and objects behind the Mint Menu, panel, calendar, etc. are blurred as they are in Win7. (Don’t be mad about about the Windows thing). I like this because objects behind the menu will not make it difficult to read the menu on a transparent theme. Any ideas?

  15. android4 says: - reply

    I like to display seconds in the clock in the panel. I can do that by setting the format in Cinnamon Settings to “%a, %d-%b-%Y, %T”. The text and the icons to the clock display’s left then shake from side to side as the seconds count up.

    Is there a way to change the font of the clock display from proportional to mono-spaced, without changing the font elsewhere? If so, how?

  16. Pat says: - reply

    I wonder if it is possible to make objects behind the panel and mint menu blurry, like in Win7? This will look nice3 when using a transparent menu and panel because desktop icons and wallpaper can make the menu difficult to read. I have been searching for this, but I don’t have any experience with CSS.

  17. jane says: - reply

    without documentation of what the css classes are it is extremely time consuming..i am searching for an option to chnage the height and color of task bar…but without any success…Please can somebody help…

  18. Wow, this is really great! I love cinnamon and this is really useful to me. Well, if you want some inspiration for cinnamon too, you can check out everythingbread.com or gourmetrecipe.com then find cinnamon stuffs and the like.

  19. whitepixel says: - reply

    as for me cinnamon is the best desktop ever tried.

    One suggestion is to add an ease control on the desktop shift, right now it just slides to another desktop without easing.

    Overall Im really happy with cinnamon. Great Job! cinnamon Team!

  20. hron84 says: - reply

    Can you publish a list of usable CSS classes/IDs in the theme? If there is some description about them, it will be more useful.

    Guys, really, this WM is awesome, but not so easy to contribute on it without a bunch of documentation – and a lot of advertisement of these docs.

  21. Hey, I’m new to fedora, therefore new to cinnamon, so I’m really curious, how do you install downloaded themes?

  22. Tonka says: - reply

    I can’t upload theme. I have every file in the .zip. Why ?

    The filetype you are attempting to upload is not allowed.

    Thanks.

  23. VV says: - reply

    Has anyone developed a theme that gives the exact look and feel for the classic gnome 2 desktop? I am trying to change the panel properties and set the background color to #f2f2f2 and color to #000000. The panel color seems to be what I wanted but the date and time fonts now appear different; I’d like them to be solid black and bold (sans-serif). How do I do this? Also, the various icons (such as laptop battery, speaker, etc.) are also now showing up as light gray; even worse, when the mouse cursor is placed over them, they become white. Since I am an absolute novice at this, any help would be much appreciated. Thanks!

  24. Sibin says: - reply

    How to upload my themes to cinnamon website

    Edit by Clem: http://cinnamon-spices.linuxmint.com/themes, use the top bar to sign-in.

  25. I’m a new user of Linux.Please help me to install Linux cinnamon into my laptop and install themes,decorate it.I must be very thankful.

  26. bluedxca93 says: - reply

    Please write something in the cinnamon source code, so that it would be possible to define the postion of the menu calender windows … (above the bottom panel) in an configuration file inside the themes folder. If that options exists it would be possible to solve the >10 px space problem beetwen the menu windows and the left screen.

  27. Mintkatze says: - reply

    hi Clem,

    I have a problem with the preview-picture, I put into my Cinnamon-theme (mintyfresh). I took the screenshot with the normal screenshot-app from the Cinnamon-menue. Cinnamon-settings only shows a generic picture and not the screenshot I took and put into the folder of my theme.

    So what did I do wrong?? Can you perhaps help me??

    Greetings and thanks for help,
    Mintkatze

  28. Mintkatze says: - reply

    hi Clem,

    I found out myself what the error was. My error was that my picture had the wrong ending. I had a .jpg-file but Cinnamon-settings needs .png-file. So I changed this and then I did a new try according to these steps here and now my preview works fine. Thanks Clem for this tutorial.

    Greetings
    Mintkatze

  29. bluedxca93 says: - reply

    Is it possible to add a file in the theme to override the /usr/share/cinnamon/js/ui/boxpointer. js ?

  30. mintystark says: - reply

    Can’t the Looking Glass be used to inspect items and their id’s or class names. Would be really nice to see an article on how to properly use the Looking Glass to help with theme development.

    Main issue I have with it is I can’t seem to figure out how I can inspect items while allowing to pass the event through. Ex when I am inspecting and want to inspect an applet once I open the applet the inspector goes away.

    Thanks

    • mintystark says: - reply

      Found out you need to press the Pause key. The issue was I didn’t have one on my laptop. So I found an old usb keyboard with a Pause key. Now it works great.

  31. mintystark says: - reply

    Just curious what the policy is on modifying someone elses code and republishing it as my own. Are there any guidelines on copying someone elses Applet, Theme, Extension, Desklet, etc. Modifying it and republishing it.

    I think this would be very helpfull and would be awesome to have in the “Help” menu on this site when logged in.

    • clem says: - reply

      It depends on how it’s licensed. I wouldn’t worry too much about it though when it comes to scripts and especially scriplets or bits of code that everybody copy pastes from one another, especially in a language like Javascript where there aren’t thousands of different ways to write the same thing.

  32. cosmonaut says: - reply

    hi,

    I design a theme there is a way to have difrent icons for each corner on the overvie-corner?

    thanks!!!!!

  33. Andrej says: - reply

    Hi to all,

    Is it possible to set in cinnamon.css different colors for two panels (different for each, top – black, bottom – white, for example)?

Leave A Reply