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

From Amahi Wiki
Jump to: navigation, search
Line 1: Line 1:
 
Creating a theme is easy by forking an existing "base" theme:
 
Creating a theme is easy by forking an existing "base" theme:
  
* Pick a base theme to start with, say, ''BaseTheme''
+
* Pick a base theme to start with, say, ''agedashi-1.2''
 
* Pick a name for the new theme, let's say '''NameOfYourTheme'''
 
* Pick a name for the new theme, let's say '''NameOfYourTheme'''
 
* Copy the theme directory:
 
* Copy the theme directory:
  
 
       cd /var/hda/platform/html/public/themes
 
       cd /var/hda/platform/html/public/themes
       cp -a BaseTheme NameOfYourTheme
+
       cp -a agedashi-1.2 NameOfYourTheme
  
 
* 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

Revision as of 19:10, 6 May 2010

Creating a theme is easy by forking an existing "base" theme:

  • Pick a base theme to start with, say, agedashi-1.2
  • Pick a name for the new theme, let's say NameOfYourTheme
  • Copy the theme directory:
      cd /var/hda/platform/html/public/themes
      cp -a agedashi-1.2 NameOfYourTheme
  • To change the display name of your theme to match that of the directory, edit
      NameOfYourTheme/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 should be 640x480 and is located in
     theme-sshot.png
  • The theme thumbnail file should be 64x64 and is located in
     theme-thumb.png
  • You can change the name of the theme and the color scheme of the piecharts in
     init.rb

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.

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.