Themes

StatusNet supports a simple way of creating themes for StatusNet Server installations. The original StatusNet designs, written by SarvenCapadisli, are worth a good read. However, use your imagination to create whatever Theme you would like!

How to Create Your Own Theme
So you want to make a Theme?

Guidelines
Key things to watch out for in a new theme:


 * Take user designs into consideration i.e., if a user design is present, make sure that it still works out
 * Keep a consistent grid
 * Make sure all of the existing page components and content are still accessible e.g., visible, legible, clickable
 * Site logo should always be present (not just the one that comes with the theme, but consider how it works out if the site owner uses their own logo with this theme)
 * Generally accessible e.g., colour combinations should have enough contrast.
 * For a new icon pack, use a single image file for actions e.g., favor, delete, attach

The base contains general layout information. It is actually just a vanilla stylesheet that is reused by the others e.g., default theme.

The new themes that we'll create will be added to the list. They won't directly update 'base' or 'default' themes. So, there are two clear options: either copy 'base' (because a lot of the work is already taken care of) and update as you like, or import 'base' and add your own stuff. The difference is really that the former requires the theme to be updated when new functionalities are need to be styled; the latter is subject to reuse whatever it has.

The difference between the two is a personal choice; maintenance would be at the core.

If there is no significant change to the layout, its easier to stick to what base does.

theme.ini file
If you're importing the system-provided base or default themes, don't try to directly do an '@include' in the CSS; your theme might be installed in a different directory tree from the core themes, so those links will break.

Create a theme.ini file and place it in your theme's subdirectory. Currently the only supported key is "include" to specify the name of another theme whose CSS needs to be loaded before yours. (If that theme itself specifies an include dependency, the system will take care of pulling that one too, etc.)

A typical theme will probably want to pull the base styles, then override a bunch of stuff:

include=base

This automatic loading is supported in StatusNet 0.9.5 and later.

Location of key paths and files
base/css/ base/css/display.css               #layout, typography rules base/images/                       #common icons, illustrations base/images/icons/icons-01.png     #main icons file (combined into a single file)

default/css/ default/css/display.css            #imports the base stylesheet for layout and adds background images and colour rules default/logo.png                   #default site logo for this theme default/mobilelogo.png             #default logo for the mobile output default/default-avatar-mini.png    #24x24 default avatar for minilists default/default-avatar-stream.png  #48x48 default avatar for notice timelines default/default-avatar-profile.png #96x96 default avatar for the profile page

TODO

 * Add a screenshot.png to every theme so that there is a quick way to see what a theme looks like Jon Phillips 08:14, 16 July 2010 (UTC)


 * Theme uploading notes
 * Theme configuration notes