Skins

Using Skins

Select "View->Skins->Select Skins.." to activate the dialog for selecting skins. In the dialog, you can click <apply> button to apply the selected skin on SlimBrowser. You can also double-click an item to apply the skin. Click <ok> button to apply the selected skin and dismiss the dialog.

Select "View->Skins->Disable Skins" to restore SlimBrowser to its original appearance without skin.

Design your own skins

To start designing your own skin, go to SlimBrowser installation directory, change into "skins" directory and then create a sub-directory with the name of the new skin, for example, "my skin". Create a file named "skin.ini" under the newly created directory. You have to write configuration information in "skin.ini" and put necessary images under the same directory. All pictures must be windows bmp files currently.

skin.ini should start with this line: [general]. Specify one option in each line below. An option line should be in the form of "OptionName=OptionValue". If you want to use default value for that option, simply remove that line. A line like "OptionName=" will result in syntax error.

Window Frame

You have two choices for the window frame, i.e., simple-fill frame and custom frame.

• Simple-fill frame
  In this way, you will design a skin based on a round-rectangle frame with a simple filling pattern. You need to supply the following parameters,
  • FrameRect=left,top,right,bottom
    Define the thickness on the four sides of the frame. You can write "FrameRect=default" and it will be set to "6,29,6,6". The top side is thicker because it includes the caption. You must specify this option so that this skin is treated as a simple-fill frame. 
  • FrameCorner=radius
    Define the radius of the frame corner, or how round the corner is. Set 0 if you want to have square corner.
  • FrameFill=picturefile
    Specify the picture file which will be used as the filling pattern for the window frame. The default value is "framefill.bmp". 
• Custom Frame
  If you haven't specified the option "FrameRect" in the configuration file, the skin will be treated as a custom frame. You have to include 12 images to define the frame. They are,
  
  topleft.bmp,  top.bmp, topright.bmp,
  lefttop, left.bmp, leftbottom.bmp,
  righttop.bmp, right.bmp, rightbottom.bmp,
  bottomleft.bmp, bottom.bmp, bottomright.bmp.
  
  Please notice that the top-left corner is included in topleft.bmp(instead of lefttop.bmp); the top-right corner is included in topright.bmp; the bottom-left corner is included in bottomleft.bmp, the bottom-right corner is included in bottom-right.bmp. Also notice that left.bmp,  bottom.bmp, left.bmp and right.bmp should be rectangular in shape because they will be tiled to adapt to actual window size.

Custom Buttons

There are four buttons to be located on the window frame. You can supply an image file for each of the buttons. Each image file must contain four images for the button in normal, hot(when mouse is over), down and disabled states, respectively. The four images should be aligned from left to right in the order mentioned above. The four buttons are minimize button, maximize button, close button and system button.

• minimize button: min.bmp
• maxmize button: max.bmp
• close button: close.bmp
• system button: sys.bmp

Windows 3.x and unix has a system button while win95 or later replace the system button with an icon. The users click the system button to get a drop down system menu. You can use SlimBrowser icon image as the system button by specifying this option: SystemIcon=true. This option has a default value of true. If you want to use sys.bmp as the image for the system button, you should specify: SystemIcon=false.

ToolBar Background

All the toolbars will be filled with the image in file barback.bmp if it exists. 

Toolbar Button Images

The toolbar button bitmaps are stored under the installation directory of SlimBrowser. They are named,

toolbar.bmp, large
toolbar_h.bmp, large hot
toolbar_g.bmp, large greyed
toolbar_s.bmp, small
toolbar_s_h.bmp, small hot
toolbar_s_g.bmp, small greyed

The large icons are 24x24 pixels, The small icons are 16x16 pixels. If you want the toolbar buttons take on a special look under your skin, copy all the six bitmaps from the installation directory of SlimBrowser into your skins folder. Then replace all the images inside the bitmap with your own. You can derive the hot version by simply increasing the brightness of the normal version. You can derive the greyed version by using a grey gradient map in Photoshop.

Important

• The purple background in each bitmap stands for the transparent color. Please make sure the icons you add have exactly the same background, i.e., it must have color value strictly equal to RGB(255,0,255).
• Please make sure all bitmaps are 24-bit true-color bitmap.

Caption Bar

• CapTextColor=Red, Green, Blue
  Specify the caption text color by RGB value.
• CapRect=left, top, right, bottom
  Specify the bounding rectangle of caption text. The <right> value should be specified as the negative of the distance from the right end of the caption.

Site Tab Text Color

• TabSelTextColor=Red,Green,Blue
  text color of the selected tab on tab bar
• TabTextColor=Red,Green,Blue
  text color of unselected tabs on tab bar.