67

I'd like to make a theme from scratch for Unity.

What knowledge and information/skills are needed? Are there any tools or templates out there for something like this already? I don't have any Python experience so tools biased towards beginners are preferable.

2
  • 1
    How detailed should this be? What parts of the theme do you need? Icons? Metacity? GTK+ 2 and GTK+ 3 including special changes to applications (including Unity top bar theming)? It's also possible (though rather limited), to change the appearance of the launcher bar and the dash, without doing major source surgery. ;-)
    – htorque
    Nov 6, 2011 at 11:19
  • @htorque I'd imagine this should just focus on the Unity interface itself (panel, launcher, dash, etc.,... the other stuff would likely be better covered in other questions). If you have a good guide for how to do this for 11.10, then go for it. :) Nov 7, 2011 at 20:33

2 Answers 2

45

10.04 to 11.04

To avoid problems with a theme I create I start with another theme and then copy it over to a new name and use theme Equinox Evolution Midnight to create a new theme that I name Rinzwind. This avoids errors, crashes and notices about things not being present for this theme.

  • create a new theme based of another theme

Themes are stored in /usr/share/themes/:

im1

Steps taken in this image:

  • Open terminal and cd /usr/share/themes/
  • sudo mkdir Rinzwind
  • cd Rinzwind
  • sudo cp -R /usr/share/themes/Equinox\ Evolution\ Midnight/* .

Inside the new directory is a file named index.theme that needs to be changed to the new theme name. So after entering sudo gedit index.theme change all the old theme names to the new one:

im2

String, search and replace Equinox Evolution Midnight -> Rinzwind
IconTheme and CursorTheme I will keep for now but editing these 2 is almost the same as for this theme.

And now we have a new name for an old theme:

im2

  • Creating a new theme

Inside our new directory are 2 sets of images:

im5

im6

With an image editor (Gimp) you can change the colors or do various things on the images. Make sure to keep the same size of the image and of course use sane colors (stick to one color and 1 or 2 shades of this color to make a theme and not something that gives people instant headaches).

Recreate these 2 directories in your Pictures folder by copying the theme to your Pictures. I copied the 2 directories inside the theme and removed all directories that are not images with this as a result:

im7

Open all the images inside gimp and start editing them and when you are satisfied copy them over with to your theme's directory and check if it works. Remark: since the theme is owned by root you need to use sudo to copy it over.

1
  • 7
    You can also copy themes to a directory under ~/.local/share/themes/ so that you don't need sudo rights (and avoid possible issues with packages later) while developing a new theme.
    – JanC
    Nov 2, 2011 at 22:24
32
+200

11.10 and above

Creating a theme for 11.10 and above (GTK+3) is fortunately very similar to 11.04 and previous versions of Ubuntu that used GTK+2. This answer is based on the already excellent answer from Rinzwind.

Its easier to amend an existing theme rather than to tackle a theme from scratch. In addition - its easier to edit a theme in your own local home folder - this avoids permissions issues etc.

Lets create a new theme that called foss based upon the Ambiance theme. Obviously - if you have any other GTK+3 themes installed, use those (see linked Q&A for where to get themes)

Install themes are stored in /usr/share/themes/ - local themes are stored in your home folder under the folder-name .themes

  • Open terminal
  • Create a local foss theme folder mkdir -p ~/.themes/foss
  • cp -R /usr/share/themes/Ambiance/* ~/.themes/foss

Inside the new folder is a file named index.theme that needs to be changed to the new theme name.

gedit ~/.themes/foss/index.theme change all the old theme names to the new one.

enter image description here

And now we have a new name called foss:

Editing the new theme

Inside our new directory are two key folders - Unity and gtk-3.0:

enter image description here

With an image editor such as Pinta or Gimp you can change the colours or do various things on the images within those folders.

enter image description here

Make sure to keep the same size of the image and of course use sane colors (stick to one color and 1 or 2 shades of this color to make a theme).

Open all the images inside Pinta/Gimp and start editing them and when you are satisfied copy them over with to your theme's directory.

However - the main part of theme editing is changing the various .css files in those folders (and the subfolder Apps).

enter image description here

Cascading-Style-Sheets is a well-defined stylesheet language that changes the look and feel of associated objects - in our case a theme - but equally applies to HTML web pages and documents.

It isn't for the uninitiated to edit these - fortunately there are some very good tools to allow you to edit & preview CSS changes - see the linked Q&A below.

Once you are happy with your theme - set your theme via Ubuntu-Tweak

enter image description here

Unfortunately you cannot change themes via the standard Appearance screen - the themes there are hard-coded in 11.10 & 12.04.


Linked Questions:

3
  • Why can't I change the theme directly? May 13, 2012 at 12:45
  • 1
    the themes are fixed (hard-coded) in the appearance screen. I'm sure the developers would like a patch to fix this. Until then - use myunity to change your themes.
    – fossfreedom
    May 13, 2012 at 15:07
  • 16.04, after following the instructions of folder name and inside the .theme file, to test I changed to this on .theme file ButtonLayout=minimize,maximize,close: but it wont change the buttons layout, any tip? I switch using unity tweak tool it works when switching to adwaita and back, but my custom theme never changes nothing :( Jan 5, 2019 at 19:48

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .