From StatusNet
(Redirected from Theme development)
Jump to: navigation, search

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?


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:


This automatic loading is supported in StatusNet 0.9.5 and later.

Location of key paths and files

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/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


  • 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)

List Your Own Theme

We are currently moving addons to a new people-powered section on our website for Addons. You can email and (Derek) about this if you have a new AddOn, or own one below and can't find it here.

Personal tools