HOWTO Make a Theme
|
This guide will help you to make and understand how themes function in status.net.
Download Software
Download latest status.net release from here.
Alternative Advanced Method
Install Software
NOTE: More advanced installation instructions exist.
- Put expanded files in desired directory on a web server
- Insure CURL & tidy is installed on your web server. If you are using Ubuntu this can be done by using the command (in the terminal):
- sudo apt-get install php5-curl
- Point your browser to /install.php
- Follow instructions to apply appropriate permissions to various directories.
- Reload /install.php after permissions are applied.
- Follow onscreen directions to set up your administrator account.
Create Theme
There are several ways to theme StatusNet. You may choose one of the methods below:
Basic
- If you just want to change the text, link, background, content, sidebar colours, background image:
- Do this from the Admin->Design settings.
Advanced
If you want to change the background images and colours:
- Create a directory and a file structure like the default theme. Key files are listed at the end of this page.
- Have your stylesheet import base/css/display.css and add your own styles below. It is okay to add minimal changes here.
More Advanced
If you want to create a different layout, typography, background images and colours:
- Create your own theme directory (like base or default) with stylesheets and images
- Enable your theme by selecting it from the Admin->Design interface. You can set site's logo from here as well.
To import the base styles or those from another theme, add a theme.ini file with an "include" key:
; This will load theme/base/css/display.css before our theme's CSS include=base
You can choose other existing themes to base off of, as well!
; This will load theme/pigeonthoughts/css/display.css before our theme's CSS... ; The pigeonthoughts theme will take care of pulling the base CSS as well! include=pigeonthoughts
(Supported from StatusNet 0.9.5.)
How Status.net Themes work
Where status.net themes live
Status.net themes live in the /theme directory of your status.net installation. In this folder you will find other folders that contain pre-installed themes.
Site-specific themes should be placed under /local/theme to avoid conflicting with core themes when updating. If theme uploading is enabled, uploaded themes also go in there. Note that the base directory used for these can be moved (for instance if many sites are being run from the same codebase), so don't rely on relative paths!
From inside the admin panel, and making sure you have admin access, select the theme for your installation and click save.
A theme uploaded through the admin panel will always be renamed to "custom", replacing the previously uploaded theme if any.
Licensing
Note, StatusNet has taken the stance that themes are not under the AGPL license. StatusNet has licensed its own themes under the Creative Commons Attribution 3.0 Unported license ("CC BY 3.0 Unported"). It is the choice of the theme designer what license to use for his or her own theme. Research has shown that more liberal licensing increases usage.
Evan from StatusNet made this statement on the StatusNet Dev Mailing List:
"This change should make it easier for organizations to deploy StatusNet sites with their own themes. Many organizations will want to use images and CSS to match other parts of their Web sites; re-licensing those files (like the organization's logo) might be onerous or difficult. It's important to me that users have freedom when using StatusNet sites, but this change seems like a reasonable compromise between developers' and users' freedoms."
Here are some examples of how StatusNet has relicensed its documentation and themes under CC BY 3.0 Unported license.
- http://gitorious.org/statusnet/mainline/blobs/master/theme/base/css/display.css
- http://gitorious.org/statusnet/mainline/blobs/master/doc-src/about
Notes
Basic Structure of the 'default' theme
CSS
- default/css/display.css #Main style-sheet containing the themes basic rules (typography and layout)
- default/css/ie.css #Standard css file for ie compatibility.
Images
- 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 minimalists
- default/default-avatar-stream.png #48x48 default avatar for notice timelines
- default/default-avatar-profile.png #96x96 default avatar for the profile page
