January 27, 2010

How to personalize your Status.Net developing your own theme!

From the Status.Net wiki pages:

How to create your own theme

There are several ways to theme StatusNet. You may choose one of the methods below:

  1. If you just want to change the text, link, background, content, sidebar colours, background image:
    • Do this from the Admin->Design settings (recommended!). You could also create a directory and a file structure like the default theme, search and replace with your own values. This is more work, but, you can do this if you plan to make additional minimal changes.
  2. If you want to change the background images and colours:
    1. Create a directory and a file structure like the default theme. Key files are listed at the end of this page.
    2. Have your stylesheet import base/css/display.css and add your own styles below. It is okay to add minimal changes here.
  3. If you want to create a different layout, typography, background images and colours:
    1. Create your own theme directory (like base or default) with stylesheets and images like.
    2. Enable your theme by selecting it from the Admin->Design interface. You can set site’s logo from here as well.

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