How to Create Your Own Theme

Utopia themes are a self-contained package of CSS files and image assets. You can create your own and post it on Github. Any themes you post can be used by you or other players in the game.

Theme Structure
The main CSS file is called theme.css and is in the top level directory. It is important that any other CSS files or images referenced by theme.css or any other part of the theme package is specified with a relative URL pointing to another file at the same level or deeper in the theme package. This means you cannot use absolute URLs or relative URLs pointing at parent directories.
Utopia will automatically reject any theme that contains URLs or file paths pointing at parent directories or any other part of the web.
One final rule is that the keywords "moz-binding", "javascript" and "behavior" are forbidden in theme packages. Any theme containing those terms won't be usable.

Getting Started
You will need a Github account to get started. Git is a source control system that is popular with programmers. If you're not familiar with it, you can find many great tutorials on google.

To get started you need to "fork" the default theme repository, which we have made available. This will allow you to build on the default theme. Alternatively, you can fork someone else's theme to build on that instead.

http://i.imgur.com/iht8NmM.png

Assuming you want to build on the default theme, you need to fork it. Visit the github page for the repository you're forking (e.g. https://github.com/utopia-theme-defa...ault.github.io) and hit the fork button (you'll need to be logged into github).

Forking will take a moment. Next you need to rename your forked repository so that it will be published on your Github page. Visit the repository settings page and change it's name so that it matches your github username followed by ".github.io". In the following example, the github username was "utopiaworkfriendly":

http://i.imgur.com/y2MT3iV.png

Now wait 10 minutes for Github to notice what you've done. When 10 minutes have passed, you should be able to visit http://username.github.io/ and browse your theme files. If you push edits to github, you should see the updates appear instantly on the web.

To start editing, we suggest that you immediately go into your game account and setup your custom theme as explained in "How to Use a Custom Theme". You can now follow the standard git workflow to clone your custom theme repository to your local machine, edit it and push changes back to Github. As you push your changes you should be able to see them take effect nearly immediately in your game account.

Sharing your theme
When you are satisfied with the changes you’ve made, you’ll want to make them available to other players. Below the custom theme option on your account settings page, you’ll see a link you can use to publish your theme. When you publish your theme, we’ll make a copy of it on the Utopia servers that other people can use. Bear in mind that if you make further changes to you theme, only you will be able to see them. To allow other people to get your changes, you’ll need to publish it again.

After publishing your theme, post the theme link (i.e., http://username.github.io) to this forum, along with a description of what you designed the theme for. Other people will be able enjoy it, and even fork your theme to build on your work.