Changes

From Amahi Wiki
Jump to: navigation, search
no edit summary
{{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''
* 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 <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
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
Optional:
* <code>ret[:headers] = ["foo.js", "bar.js"]</code> &mdash; : An array of strings,with names of javascript files to be included for this theme * <code>ret[:gruff_theme] = { ... }</code> &mdash; : 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 =
i.e
git clone <nowiki>git://git.amahi.org/amahi.git</nowiki> cd amahi/themes
you can add yours there, then contribute it via a git patch. See [[Contribute]] for sending patches via git.
In your git tree,
git clone <nowiki>git://git.amahi.org/amahi.git</nowiki> cd amahi/platform/platform/html ./script/server production
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
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>
To run in development mode, you can duplicate hda_production db into hda_development and simply run:
./script/server 
= Theme "inheritance" from the Default =
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
<code>ret[:disable_inheritance] = true</code>
= Making a Theme into an App =
* 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 =
* 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 =
= 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;}
12,424

edits