How to Create a new Theme - Revision history

Bigfoot65 at 18:47, 9 August 2014

2014-08-09T18:47:02Z

Bigfoot65 at 18:46, 9 August 2014

2014-08-09T18:46:54Z

Bigfoot65: /* Testing a Theme */

2011-03-27T16:21:27Z

Testing a Theme

Bigfoot65: /* Themes Sources in Git */

2011-03-27T16:20:36Z

Themes Sources in Git

Bigfoot65: /* Step by Step of Making a Theme */

2011-03-27T16:20:06Z

Step by Step of Making a Theme

Cpg: Reverted edits by Acecydoxose (Talk) to last revision by Cpg

2010-11-18T02:03:08Z

Reverted edits by Acecydoxose (Talk) to last revision by Cpg

Acecydoxose at 21:58, 17 November 2010

2010-11-17T21:58:50Z

Cpg at 21:16, 5 September 2010

2010-09-05T21:16:50Z

Cpg at 19:54, 2 September 2010

2010-09-02T19:54:33Z

Cpg at 05:04, 25 August 2010

2010-08-25T05:04:31Z

← Older revision		Revision as of 18:47, 9 August 2014
Line 1:		Line 1:
	{{NeedsUpdate}}		{{NeedsUpdate}}
		+

	= Step by Step of Making a Theme =		= Step by Step of Making a Theme =

@@ Line 1: / Line 1: @@
 = Step by Step of Making a Theme =
@@ Line 9: / Line 11: @@
 * Copy the theme directory (if you have an HDA - if not, get the source from git):
-{{Code|cd /var/hda/platform/html/public/themes
+ cd /var/hda/platform/html/public/themes
-cp -a agedashi-1.2 morning-sunshine-1.0}}
+ 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
+* 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
@@ Line 44: / Line 46: @@
 i.e
-{{Code|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.
@@ Line 53: / Line 55: @@
 In your git tree,
-{{Code|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
@@ Line 65: / Line 67: @@
 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:
-{{Link|<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:
-{{Code|./script/server}}
+ ./script/server
 = Theme "inheritance" from the Default =

@@ Line 53: / Line 53: @@
 In your git tree,
-            git clone git://git.amahi.org/amahi.git
+{{Code|git clone git://git.amahi.org/amahi.git
-            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
@@ Line 65: / Line 65: @@
 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>
+{{Link|<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
+{{Code|./script/server}}
 = Theme "inheritance" from the Default =

@@ Line 44: / Line 44: @@
 i.e
-            git clone git://git.amahi.org/amahi.git
+{{Code|git clone git://git.amahi.org/amahi.git
-            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.

@@ Line 9: / Line 9: @@
 * Copy the theme directory (if you have an HDA - if not, get the source from git):
-       cd /var/hda/platform/html/public/themes
+{{Code|cd /var/hda/platform/html/public/themes
-       cp -a agedashi-1.2 morning-sunshine-1.0
+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

@@ Line 1: / Line 1: @@
->= Step by Step of Making a Theme =
+= 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 &quot;base&quot; theme:
+The simplest way to start is by forking an existing "base" theme:
 * Pick a base theme to start with, say, ''agedashi-1.2''
@@ Line 22: / Line 22: @@
 * 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 &quot;app&quot;.
+* 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 =

@@ Line 107: / Line 107: @@
 * 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], to select theme swatches
+* [http://kuler.adobe.com/ Kuler], or [http://www.colourlovers.com/ Colourlovers], to select theme swatches
 = Theme Ideas =

@@ Line 32: / Line 32: @@
 * <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>theme[:disable_inheritance] = true</code>: do not inherit from the 'main' theme
+* <code>ret[:disable_inheritance] = true</code>: do not inherit from the 'main' theme
 = Themes Sources in Git =
@@ Line 78: / Line 78: @@
 To not use inheritance from the 'main' theme, you can set disable_inheritance in yout theme with
-            <code>theme[:disable_inheritance] = true</code>
+            <code>ret[:disable_inheritance] = true</code>
 = Making a Theme into an App =