How to apply the Menu button
============================

The menu button is starting point for the menu.
It first has to be added to the panel.
To add the KBFX Menu to the panel, proceed as following:
  Right-click on the panel, on which you want to place the KBFX button
  Select "Add Applet to panel" in the context menu
  Select "KBFX Spinx"
 A tooltip appears "KBFX Spinx Added"
If you move your mouse over the button, a tooltip appears.
If you want to, you can now remove the K-Menu button and move the KBFX
to the desired place on the panel.
To open the menu, just click on the button.



 How to use the Spinx Menu
 =========================

The Spinx menu looks is depending on the used skin.
It consists of following elements:
  - The picture in the upper left corner is your "dude" icon.
    Under the username, you can click on "change the settings" to configure
    your KBFX.
  - In the left column of the menu, the categories are displayed. Click on a
    category, to display it's content in the second column.
  - In the right column of the menu, the menu items of the selected categories
    are displayed.
  - The arrows above the right column are used to scroll up and down in the
    right column.
  - In the lower left corner, you find a search field, which can help you
    finding a menu item
  - In the lower right corner, you find two buttons, one to log out and one to
    lock the desktop.



 How to configure KBFX
 =====================

- Skin the button
	You can skin the button in the KBFX Configurator.
	There are three fields, where you can enter the path, where the button
	is saved. The first field is the field for the path to the picture for
	the default button state. The second field is for the picture of the
	button in hovered state. And the third field is for the picture of the
	button in pressed state. The three buttons beside each of the fields
	are to call a dialog, where you can browse for the pictures. The
	selected design can be seen in the preview area. Press the "apply"
	button to apply the selected look. You may have to reload.
- Tooltip
	You can select in the same dialog in the register tooltip, whether the
	tooltip animation is on or not. In the field for the personal text, you
	can change the tooltip text. To add an animated image, you can use the
	3rd field.
- Menu themes
	To change the theme of KBFX, you can select the "themes" tab and change
	the settings. The first area is to change the animation behavior for
	the dude image. In the second area, you can install a new theme by
	entering the path, where you have saved a theme file. Press apply to
	accept the setting. Then you can select the theme in the list of the
	3rd area.
- Menu Style
	Select the Menu Style tab, to select, whether you want to work with the
	KBFX SPINX or the KDE MENU. You just have to select the according
	option box and press apply.
- The Dude Image
	The dude image is directly taken from the KDE settings. Start kcontrol
	and select "Security & Privacy" / "Password & User Account". Now you
	can click onto the picture on the button on top of the dialog area,
	directly next to the User name. Select a picture in the appearing file
	dialog.



 How to create themes
 ====================

So you want to create your own themes for KBFX 0.4.9?
The guide is done in a simple manner and we hope that you will easily and
simply create themes for KBFX 0.4.9. If you don't like something in this 
guide, please feel free to contact us at IRC on irc.freenode.org on channel #kbfx

 mask.png
 --------
   
Height=369 px
Width=300 px
mask.png is the image which decides the size and the shape of the menu.
In this theme guide we will follow the default menu-size, which also comes to 
you preinstalled with KBFX.
The mask.png image should have alpha buffer. The transparent parts in mask.png 
(so rounded corners, for example) are parts that are transparent in the menu. 
This image should not be changed if you are going to follow this guide. 

   
 bg.png
 ------
   
Height=271 px
Width=300 px
bg.png defines the viewable area of the menu and is not visible to the user, 
but it's really important that it's there. If you are going to follow this 
guide and use this menu size, then you should not change or do anything with 
this image. Just leave it there as it is.

   
 topbg.png
 ---------
   
Height = 58 px
Width = 300 px
Well - if we want the menu to look a little better and more organized then 
it's recommended that you draw a line at the bottom of that image with size 1 px, just like you see on this image.

   
 dudebox.png
 -----------
 
Height = 51 px
Width = 51 px
The dudebox image is the background pic, where your personal image is 
presented on.
To get a better looking effect it's often good if you draw a 1px border
around that image. 

   
 menu_top_image_person.png
 -------------------------
 
Height = 48 px
Width = 48 px
This image is used for theme's default personal image.
 
 
 rhstile.png
 -----------
   
Height = 22 px
Width = 106 px
This image is displayed as the background of the categories, on the left in 
the menu, as you know. This is important, so you need to pay attention. As you 
can see on the image. There is a line at the bottom and on the right hand. 
Those two lines separate the categories. Those two lines give a much better 
look to the menu. But since you are the designer of your menu, you can decide 
if you want them there or not. Try and see.

   
 rhshovertile.png
 ----------------
   
Height = 22 px
Width = 106 px
rhshovertile.png is the hover image for the rhstile. If you are making an 
rhstile.png image with the line at the bottom and to the right, remember to 
also draw the line on the right. The image size of this image is the same as 
rhstile.png

   
 tilenormal.png
 --------------
   
Height = 51 px
Width = 193 px
tilenormal.png is displayed, where your applications are. As you can also see 
on the image is, that there is also a 1 px line at the bottom. This is because 
this will separate those different applications in a very nice way. But feel 
free to make your own experiments.

   
 tilehover.png
 -------------
   
Height = 51 px
Width = 193 px
tilehover.png is the hover image of the tilenormal.png. It should have the 
same size as tilenormal.png (don't forget to draw the line at the bottom to 
separate applications).

   
 separator.png
 -------------
   
 Height = 27 px
 Width = 193 px
 separator.png is the background image of the submenu categories. 
   
   
 botbg.png
 ---------
   
Height = 36 px
Width = 183 px
botbg.png is displayed in the listbox at the bottom to the left. So what do 
you need to think of here? Well, as you can see, there is also a line at the 
top and at the bottom which are 1px. The one on the bottom is white, but you 
can chose any color you want. You need to draw that line at the top, because 
it separates the bottom part of the menu from the rest. There should not be a 
line to the left and to the right.

   
 logout.png
 ----------
   
Height = 36 px
Width = 57 px
Time to pay attention again! This is the logout button image, and if you have 
made a line at the top of the image in logbg.png, then you should also create 
one here. So this image should have a 1px line to the left, top and right. And 
this is very important since those lines separate the logout button and the 
lock button. But it's your theme and if you are making a special theme, maybe 
there should not be any line at all. Just remember, if you have drawn a white 
line at the bottom in botbg.png, then there should be also one on this image.

   
 logouthover.png
 ---------------
   
Height = 36 px
Width = 57 px
This is the hover image of the logout button. If you have drawn lines to the 
left, top and right in logout.png, there should be lines here as well. 
And if you have the white line at the bottom, there should be a white line 
here as well.

   
 lock.png
 --------
   
Height = 36 px
Width = 61 px
This is the lock image for our menu and as you can see, there is also one line 
here at the top and a white line at the bottom. If you download the images 
lock.png, logout.png and botbg.png and put them in one line, you will see the 
entire effect of those lines. There should be no line to the left and the 
right hand.

   
 lockhover.png
 -------------
   
Height = 36 px
Width = 61 px
lockhover.png is the hover image of the lock.png image. If you have drawn the 
lock image with 1px line at the top and the bottom, you should also draw the 
same lines here.

   
 find.png
 --------
   
Height = 21 px
Width = 22 px
We use find.png to display the find box and it's very important that it has a 
transparent background. The image should contain alpha buffer. 


 preview.png
 -----------
   
Height = 205 px
Width = 170 px
preview.png should be a snapshot of the working KBFX theme. It is used in the
configuration application in order the user to see what the theme will look like.


More information can be found on:
 http://www.kbfx.org/staticpages/index.php?page=themes049


 
 How to set the KBFX font configuration (KBFX 0.4.9.2rc1)
 ===================================================================
   
Create a text file named "kbfxfontrc" in the folder of the skin you want
to change the fonts (for example /usr/share/apps/kbfx/skins/default). 
You can now set the following parameters (the following numbers are just
an example). It's best the colors to be represented in RGB format: 
 
   [Fonts] 
   ApplicationText=0,0,0
   CommentText=128,125,0
   LineColor=255,220,125
   GroupText=0,0,0
   UserName=255,255,255
   SeparatorColor=0,0,0
   FontSize=8 
 
The first six entries define the color of the respective elements. 
The last entry defines the font size.

NOTE: In KBFX 0.4.9.2rc2 and later the Font Settings can be done
      in the KBFX Configurator Application.
 
 
 How to disable the tooltip of KBFX (KBFX 0.4.9.2-20060528cvs)
 =======================================================================
   
You can disable the tooltip of KBFX by adding manually
the option "EnableToolTip=false" in the "[ToolTip]" section of
"$KDEHOME/share/config/kbfxrc" file.
Then just use the "Reload" button in "kbfxconfigapp" in order the changes
to take place.

Example:
"/home/USER_HOME_DIR/.kde/share/config/kbfxrc" file:

[ToolTip]
AnimatedTooltip=true
EnableToolTip=false
ToolTipAvatar=/usr/share/icons/crystalsvg/48x48/actions/butterfly.png
ToolTipText=SpinX Menu
 
NOTE: This feature is implemented as a configuration option in "kbfxconfigapp"
      in KBFX - 0.4.9.2rc2 and later. 
 
 
 How to create a ".kbfxtheme" file
 =================================
 
The ".kbfxtheme" file is a simple archive file (.tar.gz or .tar.bz2) that should
contain at least these elements:
- one or more theme folders with all the necessary images/files inside. Have in mind
  that the name of the theme is the name of the folder.
- in the theme(s) folder there should be an image called preview.png that serves
  as a live preview of the look of the theme.
- the extension of the archive should be ".kbfxtheme"
 
You can create ".kbfxtheme" file following these instructions (there is
an option in Konqueror's rightclick "Actions" menu for preparing KBFX Theme Package
in the >=0.4.9.2rc3 releases - in older releases you should create the ".kbfxtheme"
file manually):
- Create a folder with a name that is identical to the name you want for your theme.
- Put the necessary images/files inside it (see the above instructions for the images part).
- Create an archive of the folder (with ark/tar etc).
- Rename the archive file to ".kbfxtheme" and you are ready.
  
 
 How to help us out
 ==================

You can help us for the KBFX releases with the translation of the interface.
For this purpose please download the kbfxconfigapp.pot file from SourceForge:
http://sourceforge.net/project/showfiles.php?group_id=141258&package_id=210120 .
Then use KBabel (http://kbabel.kde.org/) or poEdit (http://www.poedit.org/) to make the translation.
Next send the .po file to my mail - phobosk@mail.kbfx.org
Thanks in advance for this help.



