Theme development

From StatusNet

I recommend reading UI before creating a theme. --SarvenCapadisli 19:40, 12 March 2010 (UTC)

[edit] Guideline

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

'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.

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

If there is no significant change to the layout, I'd say that it would be easier to stick to what 'base' does. Having said that, I'd recommend creating a theme that's slightly different in layout than what we see with base + default. I think it would give a clear distinction. The main reason I think is because depending on the instance/community that's using it, one layout may be more usable than another. Also, a theme should be significantly different than something that could be done with a user design.

[edit] How to create your own theme

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

• If you just want to change the text, link, background, content, sidebar colours, background image:
  • Do this from the Admin->Design settings.
• 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.
• 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
  2. Enable your theme by selecting it from the Admin->Design interface. You can set site's logo from here as well.

[edit] 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

Got a cool theme? Link or add it to Theme.