Welcome to KBFX.NET Thursday, March 28 2024 @ 02:05 PM EET

Create themes for kbfx 0.4.9



 Create themes for your kbfx 0.4.9

So you want to create your own themes for kbfx 0.4.9? Well this is the right place then.
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

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 default mask size is: width=300px height=369. 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

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.
The size of this image is by default: height=271px  width=300px.

 topbg.png


Name: topbg.png
Height = 58 px
Width = 300 px
Description:
Let's start to create the first image for our new kbfx theme.
The name is topbg.png and it should be 300px large and 58 px high.
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.
So you are done? Then let's continue...

 dudebox.png

Name: dudebox.png
Height = 51 px
Width = 51 px
Description:
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

Name: menu_top_image_person.png
Height = 48 px
Width = 48 px
Description:
This image is used for theme's default personal image.

 rhstile.png

Name: rhstile.png
Height = 22 px
Width = 106 px
Description:
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

Name: rhshovertile.png
Height = 22 px
Width = 106 px
Description:
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

Name: tilenormal.png
Height = 51 px
Width = 193 px
Description:
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

Name: tilehover.png
Height = 51 px
Width = 193 px
Description:
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

Name: separator.png
Height = 27 px
Width = 193 px
Description:
separator.png is the background image of the submenu categories.

 botbg.png

Name: botbg.png
Height = 36 px
Width = 183 px
Description:
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

Name: logout.png
Height = 36 px
Width = 57 px
Description:
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

Name: logouthover.png
Height = 36 px
Width = 57 px
Description:
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

Name: lock.png
Height = 36 px
Width = 61 px
Description:
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

Name: lockhover.png
Height = 36 px
Width = 61 px
Description:
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

Name: find.png
Height = 21 px
Width = 22 px
Description:
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

Name: preview.png
Height = 205 px
Width = 170 px

Description:
The image 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.

Last Updated: Saturday, February 03 2007 @ 03:52 AM EET|Hits: 24,013 View Printable Version



Who's Online

Guest Users: 3

What's New

Stories last 7 days

No new stories

Comments last 7 days

No new comments

Trackbacks last 7 days

No new trackback comments

Poll

Should the KBFX Project go on with the development?

Should the KBFX Project go on with the development?

  •  Yes, you should go on.
  •  No, you better stop developing and we want the Raptor in KDE4

Results
Other polls | 354 voters | 5 comments
Is the Documentation of KBFX enough?

Is the Documentation of KBFX enough?

  •  Yes
  •  No
  •  Needs more docs inside the running application
  •  Needs more docs on the homepage
  •  Needs more docs about installation
  •  Needs more docs about theming

Results
Other polls | 166 voters | 0 comments
What distro is your KBFX installed on?

What distro is your KBFX installed on?

  •  Debian
  •  SuSe
  •  Mandriva
  •  Fedora
  •  Ubuntu/Kubuntu
  •  Gentoo
  •  Slackware
  •  *BSD
  •  Other...

Results
Other polls | 1,938 voters | 0 comments