Difference between revisions of "How to Create a new Theme"
Line 64: | Line 64: | ||
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 | + | = Making a Theme Faster = |
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. | 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. | ||
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. |
Revision as of 19:48, 24 June 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
Contents
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.
Making a Theme Faster
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.
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.