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
- Go to your home folder
- Create a directory “MyTheme”
- Create a directory “cinnamon” inside of “MyTheme”
- Copy all the content from /usr/share/cinnamon/theme into Mytheme/cinnamon/
mkdir -p MyTheme/cinnamon
cp -R /usr/share/cinnamon/theme/* 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:
mkdir -p .themes
mv MyTheme .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.
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