Cinnamon 1.8 Theme Notes
by mtwebster 14

There are a number of CSS changes that you may be interested in knowing about if you’ve got Cinnamon themes out there.

I’ve uploaded two files here – one is the current Cinnamon default theme as it is currently, and the other is what the file looked like in the last major release (1.6.7). ┬áThere’s an excellent tool out there called meld┬áthat allows you to visually compare two files – you can compare these two files, or compare the 1.8 file with your theme’s cinnamon.css file.

Here are the files:

Cinnamon 1.8.6

Cinnamon 1.6.7

An overview of changes are as follows (check out the file for the complete picture):

  • .icon-grid removed
  • All ViewSelector elements removed
  • .workspace-overview-background-shade added
  • .expo-workspace-thumbnail-frame added
  • .run-dialog-completion-box added
  • .sound-seek-box and .sound-seek-slider added
  • .applet-separator and .applet-separator-line added
  • Desklets styles added
  • .flashspot added
  • transition-duration removed from .menu-category-button and .menu-category-button-selected

Additionally, a number of theme files are removed:

  • dash-placeholder.svg
  • filter-selected-ltr.svg
  • filter-selected-rtl.svg
  • panel-border.svg
  • panel-button-border.svg
  • panel-button-highlight-narrow.svg
  • panel-button-highlight-wide.svg
  • running-indicator.svg
  • source-button-border.svg
  • ws-switch-arrow-down.svg
  • ws-switch-arrow-up.svg

Now get to it!

14 thoughts on “Cinnamon 1.8 Theme Notes

  1. samriggs May 24,2013 01:16

    Thanks mtwebster
    downloading it to use for all future cinnamon themes and use this as the template.
    Much appreciated.

  2. VolMi May 24,2013 08:59

    Meld-addicted that I am, this might be a good place to advertise my nemo action “Compare with meld”. If you select multiple files or folders in nemo, this action will offer a menu entry to compare them.

    @mtwebster: Is it possible to restrict the Selection tag to 2 or 3? Since meld allows to compare up to 3 files/folders that would make sense. Currently I use M but it does not make much sense to have the meld entry if >3 files are selected.

    Btw, I am happy you removed some transition-duration from the CSS. I think this is sort of a “dangerous” setting in that you are invited to introduce completely useless UI lags. I guess even more of them could be removed/reduced at the right places.

    • mtwebster May 24,2013 10:30

      You can, instead of M, put a number:


      And it will only display when the selection count is 2

      Currently there’s no way to set a min/max – there are a lot of improvements to be done in the next release, and this will be one of them.

      As a workaround, you can just make 2 actions, one with a selection of 2, and one with a selection of 3.

  3. sjmcc May 25,2013 18:39

    I am working on a new cinnamon theme for 1.8 based off the one supplied. When creating the theme for desklets it doesn’t seem to affect the picture frame desklet. Am I doing something wrong? Maybe missing something obvious?

    • Cobinja May 25,2013 21:30

      The photoframe desklet shipped with cinnamon uses the metadata option “prevent-decorations”. That’s most probably the reason why it’s not affected.

      • sjmcc May 26,2013 18:14

        Thanks for the explanation. Photoframe has it’s own small style.css file. You can modify that to get what you want but some of the cinnamon updates overwrite the file and undo changes you’ve made which is unfortunate. It just makes creating a nice unified theme for everything a bit more of a pita.

        • bimsebasse Jun 2,2013 14:52

          You can simply add (copy) the stylesheet code to your theme’s cinnamon.css, so just tag photoframe (and xkcd desklet) stylesheet code to the end of your theme, and it will “overrule” the native stylesheet when your theme is selected.

          Theming extensions in gnome-shell used to work the same way.

  4. PNH May 31,2013 06:46

    Hmmm… What is “flashspot”, and how can I test it? :)

    • mtwebster May 31,2013 13:51

      You can test flashspot by opening an applet configuration and clicking the ‘highlight’ button –

      Add “Settings Example Applet” to the panel, then click Configure, and in the upper right corner click “Highlight” – the applet should briefly have a ‘flash’ over it to show where it is on your panel.

      It’s also used in some of the screenshot applets.

  5. Leo Jul 19,2013 02:54

    Hi all, I can only make changes in the panel, some radio bottons, and inside de main menu, but why I can get changes from the rest of the theme?
    Awaita is full gray but I wish see all in dark colors, did someone how can I get what I wish?
    I try to get a dark Nemo, a dark system monitor, etc with it.
    A lot of themes don’t work and is hard for me make my own theme.
    If someone can help me with informations that will be helpfull to make my theme.
    Thanks and take care all.


    • Mani Jul 20,2013 08:55

      This is because the rest doesn’t belong to cinnamon themes. The Color of the windows and in some degree their shape is decided by a gtk+3 theme. You can find them in your system under /usr/share/themes.
      Just google for gtk+3 Themes and you will find many of them. The Textfiles also only contain plain text -> You can vary them as much as you want (but you should use a backup ofcourse ;)

Comments are closed.