How to create a theme

From GeeXboX wiki

Jump to: navigation, search

Voir cet article en français - Puede ver el artículo en español - 正體中文觀看本文


Author : LoR@KoRn (Laurent Peltier) Bits changed / Added by TOTMS.




This tutorial is for GNU-Linux users. (With an alternative method for Windows users.) It describes step by step how creating a complete theme for GeeXboX.

Contents

Software requirements

Splash-isolinux

Using The Gimp, create your picture at 640x320 resolution and save it as splash-isolinux.png

- Click menu: image > mode > indexed > maximum number of colors > set to 16 > ok

- Click menu: file > save as > file type > PNG image > save (splash-isolinux.png)

In a console:

 #convert splash-isolinux-png splash-isolinux.ppm
 #ppmtolss16 <splash-isolinux-ppm >splash-isolinux.rle 

Grub-splash

Using The Gimp, create your picture at 640x480 resolution and save it as grub-splash.xpm.

- Click menu: image > mode > indexed > maximum number of colors > set to 14 > ok

- Click menu file > save as > file type > Pixmap X image > save (grub-splash.xpm)

In a console:

 #gzip grub-splash.xpm 

Bootsplash

Using The Gimp, create your picture at 800x600 resolution and save it as bootsplash-800x600.jpeg.

- Click menu: file > save as > file type > JPEG image > save (bootsplash-800x600.jpeg)


Create a file named bootsplash-800x600.cfg with the following lines :

 # This is the configuration file for the 800x600 bootsplash picture.
 # This file is necessary to specify the coordinates of the text box on
 # the splash screen.
 
 # config file version
 version=3
 
 # should the picture be displayed?
 state=1
 
 # fgcolor is the text forground color.
 # bgcolor is the text background (i.e. transparent) color.
 fgcolor=7
 bgcolor=5
 
 # (tx, ty) are the (x, y) coordinates of the text window in pixels.
 # tw/th is the width/height of the text window in pixels.
 tx=20
 ty=20
 tw=760
 th=560
 
 # name of the picture file (full path recommended)
 jpeg=bootsplash-800x600.jpeg
 
 progress_enable=1
 percent=6000
 
 # progress bar
 box silent inter 224 393 224 404 #fd8100
 box silent       224 393 601 404 #fd8100
 box        inter 224 393 224 404 #fd8100
 box              224 393 601 404 #fd8100
 box noover        15  17 785 583 #333333E0
 
 overpaintok=1
 

Where 393 corresponds to the top of the progress bar, 404 to the bottom, 224 to the left, 601 to the right and #fd8100 to the color. Modify these values according to your realization.

In a console :

 #cd /where_the_files_are/
 #splash -s -f bootsplash-800x600.cfg > bootsplash-800x600.dat 

Patch for bootsplash-3.1 (useful for the progressbar on GeeXboX) :

--- bootsplash-3.1.orig/Utilities/splash.c   2004-09-20 20:54:42.832461640 +0200
+++ bootsplash-3.1/Utilities/splash.c   2004-09-20 23:49:27.094611528 +0200
@@ -517,13 +517,13 @@
             exit(1);
          }
          fclose(sfp);
-         if (sboxcount)
-            memmove(pic + 47 + l + boxcount * 12,
-               sboxes, sboxcount * 12);
-         silentl += sboxcount * 12;
-         l += silentl;
       }
       fclose(fp);
+      if (sboxcount)
+         memmove(pic + 47 + l + boxcount * 12,
+            sboxes, sboxcount * 12);
+      silentl += sboxcount * 12;
+      l += silentl;
    } else {
       l = 0;
       pic = calloc(47, 1);

Bootsplash images aren't limited to 800x600 but can have other standard VESA resolutions like 640x480 1024x768..... Moreover, a theme can also contain multiple bootsplash images at different resolutions. Specify all resolutions present in the file called config, by adding a line like

 RESOLUTIONS="640x480 800x600"

If RESOLUTIONS isn't specified, default 800x600 is assumed


Background

Using The Gimp, create your picture at 640x480 resolution and save it as 150.jpg.

- Click menu: file > save as > file type > JPEG image > save (150.jpg)

In a console :

#cd /where_the_file_is/
#for ((i=0;i<149;i++)); do ln -s 150.jpg $i.jpg; done
#mencoder -ffourcc divx mf://*.jpg -mf w=640:h=480:fps=25:type=jpg -ovc lavc
-lavcopts vcodec=mpeg4:vbitrate=4 -oac copy -o background.avi

Font of the menu

Choose a Truetype font (.ttf) and create a file named config with the following line :

 FONT_SIZE=3 

You can also use the one from the OMC theme...

Finalization

Create a folder named theme-your theme and put there the 6 files you have created

 splash-isolinux.rle
 grub-splash.xpm.gz
 bootsplash-800x600.dat
 background.avi
 font.ttf
 config

Finally, copy this folder in the themes folder of the FLTK Generator.

Alternative Method using Windows

A quick easy way of making themes

I have read the wiki page with regards making themes and quite frankly, it puts me straight off... Then I got thinking, essentially the main elements of a theme are, a) the background and b) the font.

Both of these can be made easily without *really* going out of your way. For example, my main box runs windows (I have a couple of non GB boxes running linux but thats not the point...) So as such I thought I would throw together a quick guide to making a theme.

1) Copy the default theme.

2) Find (or take) a good background image. This can be anything as long as its equal to or greater than 640x480. If the image is larger than you can use a program like photoshop (or many many others including GIMP) to resize it.

3) I then imported the image into Windows Movie Maker (ducks)

4) This produced a 10 second wmv. So the next stage was to convert it to a compressed avi which was 1 second long. (If the movie is any longer then its just needlessly taking up space unless you have some cool effect running...) I did this by using a simple video conversion program (many will do the same thing, most are free) This file, which has to be named background.avi replaces the existing one in the new theme directory

4) Replace the existing font file with a font of your choice.

5) Test - the fastest way I found was to make an ISO and use QEMU to make sure everything installed and worked ok...

And thats it Smile Hope this helps someone!


Another Alternative Method using Windows

NOTE: This is for users without Windows Movie Maker.

1) Copy the default theme to another directory and rename the directory.

2) Choose your background image (640x480 or larger).

3) Then use SSMM - Slide Show Movie Maker to produce your AVI file. You can get this from the author's web site. http://www.joern-thiemann.de/tools/SSMM/

4) Rename the AVI file, to background.avi to replace the original one in your new renamed directory.

5) (Optional) Replace the existing font file with your own font, if want a different font.

6) You can now test it in an emulator (VirtualPC, VirtualBox, QEMU etc...) or go ahead and create you ISO, and burn to a blank CD. (I use CDRW's so I can play around with features and options without wasting my blank CDR's.)


Another Alternative Method independent of the operating system

Software requirements

The steps

1) Using Gimp (or other image editing program) create a 640x480 image and save it.

2) Open VLC player, go to File->Convert / Save and select the previously created image. Click 'Convert / Save'.

3) Set the destination file to be background.avi overwriting the file in the default theme.

4) In the same window select the profile settings as:

  • container: avi
  • video codec: Theora or Mpeg4
  • no audio

5) Click 'Start'

6) That's it! Enjoy!

Personal tools