Difference between revisions of "How to Create a new Theme"

From Amahi Wiki
Jump to: navigation, search
 
(26 intermediate revisions by 5 users not shown)
Line 1: Line 1:
Creating a theme is easy by forking an existing "base" theme:
+
{{NeedsUpdate}}
 +
 
 +
 
 +
= Step by Step of Making a Theme =
 +
 
 +
Creating a theme is easy. It's mostly one css file a couple of background images. That will get you going quickly. You can later add a lot more refinements to it.
 +
 
 +
The simplest way to start is by forking an existing "base" theme:
  
 
* Pick a base theme to start with, say, ''agedashi-1.2''
 
* Pick a base theme to start with, say, ''agedashi-1.2''
* Pick a name for the new theme, let's say '''NameOfYourTheme'''
+
* Pick a codename for the new theme, let's say '''morning-sunshine-1.0'''
* Copy the theme directory:
+
* Copy the theme directory (if you have an HDA - if not, get the source from git):
  
      cd /var/hda/platform/html/public/themes
+
cd /var/hda/platform/html/public/themes
      cp -a agedashi-1.2 NameOfYourTheme
+
cp -a agedashi-1.2 morning-sunshine-1.0
  
* To change the display name of your theme to match that of the directory, edit
+
* To change the display name of your theme to match that of the directory, edit the settings in
       NameOfYourTheme/init.rb
+
       morning-sunshine-1.0/init.rb
* At this point the theme should be visible and selectable in http://hda/setup?tab=themes
+
* At this point the theme should be visible and selectable in <nowiki>http://hda/setup?tab=themes</nowiki>
 
* The most important file in the theme is the CSS file, which contains the styling for the theme. The file is located in
 
* The most important file in the theme is the CSS file, which contains the styling for the theme. The file is located in
 
       style.css
 
       style.css
 
* The rest of the theme look is determined by the images, which are referenced by the platform code
 
* The rest of the theme look is determined by the images, which are referenced by the platform code
* The theme screenshot file should be 640x480 and is located in  
+
* The theme screenshot file included in the theme should be 640x480 and is located in  
 
       theme-sshot.png
 
       theme-sshot.png
* The theme thumbnail file should be 64x64 and is located in
+
* The theme thumbnail file included in the theme should be 64x64 and is located in
 
       theme-thumb.png
 
       theme-thumb.png
 +
* While you are doing updates, you can shrink the screenshot to 320x240 to put it as a screenshot for the app. If you want a logo for the theme you can use this (which will be resized in the browser to 160x120) or make a logo for the theme "app".
 
* You can change the name of the theme and the color scheme of the piecharts in
 
* You can change the name of the theme and the color scheme of the piecharts in
 
       init.rb
 
       init.rb
 +
 +
= Variables in the Init File =
 +
 +
The init.rb file contains some variables that are expected by the Amahi platform. Only one is required:
 +
* <code>ret[:name] = "Morning Sunshine"</code> &mdash; A string with the name of the theme (the user sees this)
 +
 +
Optional:
 +
* <code>ret[:headers] = ["foo.js", "bar.js"]</code>: An array of strings,with names of javascript files to be included for this theme
 +
* <code>ret[:gruff_theme] = { ... }</code>: Theme for the piecharts - see the examples in the other themes
 +
* <code>ret[:disable_inheritance] = true</code>: do not inherit from the 'main' theme
  
 
= Themes Sources in Git =
 
= Themes Sources in Git =
Line 29: Line 47:
 
i.e
 
i.e
  
            git clone git://git.amahi.org/amahi.git
+
git clone <nowiki>git://git.amahi.org/amahi.git</nowiki>
            cd amahi/themes
+
cd amahi/themes
  
 
you can add yours there, then contribute it via a git patch. See [[Contribute]] for sending patches via git.
 
you can add yours there, then contribute it via a git patch. See [[Contribute]] for sending patches via git.
Line 38: Line 56:
 
In your git tree,
 
In your git tree,
  
            git clone git://git.amahi.org/amahi.git
+
git clone <nowiki>git://git.amahi.org/amahi.git</nowiki>
            cd amahi/platform/platform/html
+
cd amahi/platform/platform/html
            ./script/server production
+
./script/server production
  
Then access your test environment as http://localhost:3000
+
Then access your test environment as <nowiki>http://localhost:3000</nowiki>
  
 
Within the testing tree (in amahi/platform/platform/html), you can add new themes in  
 
Within the testing tree (in amahi/platform/platform/html), you can add new themes in  
Line 50: Line 68:
 
each in a directory of it's own. Then you should see the new theme next time you run ./script/server (if you know how to duplicate a database, it may be bestter to run in development mode, no server restarts - see your changes live!) in this location:
 
each in a directory of it's own. Then you should see the new theme next time you run ./script/server (if you know how to duplicate a database, it may be bestter to run in development mode, no server restarts - see your changes live!) in this location:
  
            <nowiki>http://localhost:3000/setup?sub=themes&tab=setting</nowiki>
+
<nowiki>http://localhost:3000/setup?sub=themes&tab=setting</nowiki>
  
 
To run in development mode, you can duplicate hda_production db into hda_development and simply run:
 
To run in development mode, you can duplicate hda_production db into hda_development and simply run:
  
          ./script/server
+
./script/server
 
 
  
 
= Theme "inheritance" from the Default =
 
= Theme "inheritance" from the Default =
Line 64: Line 81:
 
This is to make it easier to make themes. One can start with a fairly "thin" theme and enhance it over time by adding new images and improvements.
 
This is to make it easier to make themes. One can start with a fairly "thin" theme and enhance it over time by adding new images and improvements.
  
= Making Theme Without CSS coding =
+
To not use inheritance from the 'main' theme, you can set disable_inheritance in yout theme with
 +
          <code>ret[:disable_inheritance] = true</code>
 +
 
 +
= Making a Theme into an App =
 +
 
 +
Once you have a theme built, you want to have other people install it and test it for release.
 +
 
 +
You have to become a contributor to be able to add apps. The core team can do it (email support at support@..).
 +
 
 +
* First make sure your theme compressed tarball untars to a single directory with the theme codename and version, like sunshine-1.0/
 +
* With that, go to the My Apps area in your control panel at amahi.org
 +
* Create an app. Call it SomethingSomething  Theme, like "Morning Sunshine Theme"
 +
* In the field called kind put "theme" which makes it into an installable theme
 +
* In the Source URL put the URL to the compressed theme tarball (.tar.gz or .tar.bz2). You can host it on your own or here in the wiki (create a page for it called say "File:morning-sunshine-1.0.tar.gz")
 +
* In the sha1sum field put the [[Developers/sha1sum|sha1sum]] of your tarball
 +
* Make sure you have nice descriptions!
 +
* For the screenshots, use something that gives the flavor of your theme. Avoid full screenshots. Resolution is 320x240, so zoom in a bit and just give the flavor. For the logo you can use the same URL as the screenshot if you are in a hurry.
 +
* Give attribution to your theme if you used any resources out there that like or require attribution
 +
 
 +
= Updating the Theme=
 +
 
 +
* Generally you should make a new version of the theme and re-upload it
 +
* If the URL to the source changes, update it
 +
* IMPORTANT: update the [[Developer/sha1sum|signature]] of the theme
 +
* If you want you can update the version string. It's not used at the moment, but it will be in the future to check if there are updates
 +
 
 +
= Resources =
  
http://www.Userstyles.org/ is the home of the "Stylish" Firefox extension. It is similar to greasemonkey in that it can change the look of a page on the fly.  
+
* Customizable Amahi dashboard tab, in [http://git.amahi.org/?p=amahi.git;a=blob_plain;f=themes/assets/amahi-base-tab.xcf;hb=c4deb554ea9a67d1dcc5ca62f346a3f91a67aef6 gimp xcf] [http://git.amahi.org/?p=amahi.git;a=blob_plain;f=themes/assets/amahi-base-tab.psd;hb=c4deb554ea9a67d1dcc5ca62f346a3f91a67aef6 photoshop psd] [http://git.amahi.org/?p=amahi.git;a=blob_plain;f=themes/assets/amahi-base-tab.txt;hb=c4deb554ea9a67d1dcc5ca62f346a3f91a67aef6 description]
 +
* [http://www.woothemes.com/2010/08/woocons1/ Awesome GPL Icons]
 +
* [http://kuler.adobe.com/ Kuler], or [http://www.colourlovers.com/ Colourlovers], to select theme swatches
 +
 
 +
= Theme Ideas =
 +
 
 +
Many templates are GPL or allow modifications, among them:
 +
 
 +
* [http://spectacu.la/category/themes/ Spectacu.la GPL Themes!]
 +
* [http://mikelococo.com/projects/wucoco/ WuCoCo GPL Theme]
 +
* [http://diekretzschmars.de/wordpress/themes/dkret-theme/ DKRet GPL Theme]
 +
* [http://www.wpdesigner.com/2007/06/07/pride-wordpress-theme/ Pride GPL Theme]
 +
* [http://www.styleshout.com/ StyleShout free themes]
 +
 
 +
 
 +
= Making a Theme in Less Time  =
 +
 
 +
To tweak a theme fast, [http://www.Userstyles.org/ Userstyles] is the home of the "Stylish" Firefox extension. It is similar to greasemonkey in that it can change the look of a page on the fly.  
  
 
Although the advantage for theme coders is that it modifies CSS so you can write your theme in the browser and and then copy paste it to a .css file in your theme instead of writing it in a text editor and saving it then refreshing the page to see your changes. Making theme development UBER fast.
 
Although the advantage for theme coders is that it modifies CSS so you can write your theme in the browser and and then copy paste it to a .css file in your theme instead of writing it in a text editor and saving it then refreshing the page to see your changes. Making theme development UBER fast.
 +
 +
= Tips =
 +
* Set the background-color of the application icons on the dashboard to white. This will make the icons all consistent:
 +
          .welcome-logo {background-color: #fff;}
 +
          .welcome-logo-small {background-color: #fff;}

Latest revision as of 18:47, 9 August 2014

Msgbox.update.png Update Needed
The contents of this page have become outdated or irrelevant. Please consider updating it.


Step by Step of Making a Theme

Creating a theme is easy. It's mostly one css file a couple of background images. That will get you going quickly. You can later add a lot more refinements to it.

The simplest way to start is by forking an existing "base" theme:

  • Pick a base theme to start with, say, agedashi-1.2
  • Pick a codename for the new theme, let's say morning-sunshine-1.0
  • Copy the theme directory (if you have an HDA - if not, get the source from git):
cd /var/hda/platform/html/public/themes
cp -a agedashi-1.2 morning-sunshine-1.0
  • To change the display name of your theme to match that of the directory, edit the settings in
      morning-sunshine-1.0/init.rb
  • At this point the theme should be visible and selectable in http://hda/setup?tab=themes
  • The most important file in the theme is the CSS file, which contains the styling for the theme. The file is located in
     style.css
  • The rest of the theme look is determined by the images, which are referenced by the platform code
  • The theme screenshot file included in the theme should be 640x480 and is located in
     theme-sshot.png
  • The theme thumbnail file included in the theme should be 64x64 and is located in
     theme-thumb.png
  • While you are doing updates, you can shrink the screenshot to 320x240 to put it as a screenshot for the app. If you want a logo for the theme you can use this (which will be resized in the browser to 160x120) or make a logo for the theme "app".
  • You can change the name of the theme and the color scheme of the piecharts in
     init.rb

Variables in the Init File

The init.rb file contains some variables that are expected by the Amahi platform. Only one is required:

  • ret[:name] = "Morning Sunshine" — A string with the name of the theme (the user sees this)

Optional:

  • ret[:headers] = ["foo.js", "bar.js"]: An array of strings,with names of javascript files to be included for this theme
  • ret[:gruff_theme] = { ... }: Theme for the piecharts - see the examples in the other themes
  • ret[:disable_inheritance] = true: do not inherit from the 'main' theme

Themes Sources in Git

The existing themes are available in the git tree at:

           amahi/themes

i.e

git clone git://git.amahi.org/amahi.git
cd amahi/themes

you can add yours there, then contribute it via a git patch. See Contribute for sending patches via git.

Testing a Theme

In your git tree,

git clone git://git.amahi.org/amahi.git
cd amahi/platform/platform/html
./script/server production

Then access your test environment as http://localhost:3000

Within the testing tree (in amahi/platform/platform/html), you can add new themes in

           public/themes/

each in a directory of it's own. Then you should see the new theme next time you run ./script/server (if you know how to duplicate a database, it may be bestter to run in development mode, no server restarts - see your changes live!) in this location:

http://localhost:3000/setup?sub=themes&tab=setting

To run in development mode, you can duplicate hda_production db into hda_development and simply run:

./script/server

Theme "inheritance" from the Default

One interesting thing is that themes default to the "main" theme. If an image reference in the application does not exist in a theme, the image is served from the default theme.

This is to make it easier to make themes. One can start with a fairly "thin" theme and enhance it over time by adding new images and improvements.

To not use inheritance from the 'main' theme, you can set disable_inheritance in yout theme with

          ret[:disable_inheritance] = true

Making a Theme into an App

Once you have a theme built, you want to have other people install it and test it for release.

You have to become a contributor to be able to add apps. The core team can do it (email support at support@..).

  • First make sure your theme compressed tarball untars to a single directory with the theme codename and version, like sunshine-1.0/
  • With that, go to the My Apps area in your control panel at amahi.org
  • Create an app. Call it SomethingSomething Theme, like "Morning Sunshine Theme"
  • In the field called kind put "theme" which makes it into an installable theme
  • In the Source URL put the URL to the compressed theme tarball (.tar.gz or .tar.bz2). You can host it on your own or here in the wiki (create a page for it called say "File:morning-sunshine-1.0.tar.gz")
  • In the sha1sum field put the sha1sum of your tarball
  • Make sure you have nice descriptions!
  • For the screenshots, use something that gives the flavor of your theme. Avoid full screenshots. Resolution is 320x240, so zoom in a bit and just give the flavor. For the logo you can use the same URL as the screenshot if you are in a hurry.
  • Give attribution to your theme if you used any resources out there that like or require attribution

Updating the Theme

  • Generally you should make a new version of the theme and re-upload it
  • If the URL to the source changes, update it
  • IMPORTANT: update the signature of the theme
  • If you want you can update the version string. It's not used at the moment, but it will be in the future to check if there are updates

Resources

Theme Ideas

Many templates are GPL or allow modifications, among them:


Making a Theme in Less Time

To tweak a theme fast, Userstyles is the home of the "Stylish" Firefox extension. It is similar to greasemonkey in that it can change the look of a page on the fly.

Although the advantage for theme coders is that it modifies CSS so you can write your theme in the browser and and then copy paste it to a .css file in your theme instead of writing it in a text editor and saving it then refreshing the page to see your changes. Making theme development UBER fast.

Tips

  • Set the background-color of the application icons on the dashboard to white. This will make the icons all consistent:
          .welcome-logo {background-color: #fff;}
          .welcome-logo-small {background-color: #fff;}