= Rooms Theme Development =

Designing an own chat theme for Rooms is pretty easy. This page will show you how.[[BR]]
All you really have to have is some basic understanding for HTML, CSS and optionally some Javascript.[[BR]]
Actually its in an early state, so feel free to send my some feedback in any case.


To make the whole thing a lot easier for you, here's an example directory structure based on the '''Icy Breeze''' theme:
   http://themes.roomsapp.mobi/sampleRoomsTheme.zip

Just download it, unpack it and place it in some online directory.

[[BR]]

== The theme's online directory ==

Theme directory example somewhere on the internet:
    '''''!http://www.example.com/sampleRoomsTheme/'''''

[[BR]]

This directory must contain an '''info.plist''' with the following items as dictionary:
   * required items:
      || label || An identifier for the theme, must be unique! ||
      || title || The title for the theme overview/detail ||
      || version || Used to detect for updates and notify the user ||
      || checkedUpToRoomsVersion || The theme will be compatible up to this Rooms version (you may raise this version every Rooms update after you've ensured that its still working) ||
      || download || The filename of the zip file which contains the theme contents (see below for more details) ||

   * optional items:
      || description || A description for the themes design details ||
      || creator || That's you ;-) ||
      || website || You may place your website here ||
      || UIBaseColor || If you want to provide a specific color for the UI titlebars (must be in hex form, e.g. ''4D6977'') ||
      || screenshots || An array of screenshot filenames/URLs for the theme (the first one will be used for the theme overview) ||


[[BR]]

== Theme zip content ==

The zip file for the theme contents must at least contain a '''template.html''' which is used to provide the chat room base content.
This file HAS to be directly within the root of the zip file. (it must not reside in a subdirectory within the zip!)

Optionally the zips' root can contain the following file:
   * background.png > 80x80 png file which will be stretched in its 12x12 edges and used as surrounding background for the chat view
[[BR]]

The rest of the structure is really up to you then, in case you are unwilling to follow my example package ;-)


As you can see in my example '''template.html''', its loading a '''template.css''' and a '''template.js'''.
Using CSS you can now also set a background for the 'body element' which should match the color of the optional background.png from above.
The rest of the style is up to you again...

Furthermore your used .js should contain the function deleteAllOldUserInfos() like in my example.
Optionally you can use a function contentFilter(message) to filter every chat line for special replacements within the message.

[[BR]]

== Use & Share the theme ==

To use the theme just use the '''+''' button from within Rooms' theme settings.

You can also share your theme by sending a special link to your friends using this format:
   '''''!roomstheme://www.example.com/sampleRoomsTheme/''''' [[BR]]
   (Clicking this link from within the iPhones' Mobile Safari or Mobile Mail will start the Rooms app with the theme detail.)

----

Feel free to send me links to your creations. I'll consider to link more themes to the default list within the Rooms settings from time to time.