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.

Skins Folder

On Windows XP or previous operating systems, skins are installed under the "skins" directory inside the installation folder of SlimBrowser program (e.g., c:\program files\slimbrowser\skinname).  On Windows Vista, if UAC (User Account Control) is enabled, skins are installed under the "skins" directory inside SlimBrowser application data folder within your personal file (e.g., c:\users\username\AppData\Roaming\SlimBrowser\skins). If UAC is disabled, skins are installed in the same location as in previous operating systems.

Design your own skins

To start designing your own skin, go into your skins folder 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.

Main Menu

• MenuBackColor=Red,Green,Blue
  Specify the menu background color by RGB value.
• MenuSelBackColor=Red,Green,Blue
  Specify the background color of a menu item currently being selected by RGB value. Under Windows XP with visual style (i.e., themes) enabled, this color will be used to draw the bounding rectangle of the selected menu item and the bounding rectangle of the check marks. A relatively brightened color will be used to fill the rectangles.
• MenuIconBackColor=Red,Green,Blue
  Specify the background color of the left band of the menu where the icons are shown by RGB value. This color is only used when visual style (i.e., themes) is enabled under Windows XP.
• MenuTextColor=Red,Green,Blue
  Specify the menu text color by RGB value.
• MenuSelTextColor=Red,Green,Blue
  Specify the text color of the selected menu item. This option has no effect if you have enabled Visual Style under Windows XP.

Explorer Bar

If the bitmap file named "expbarback.bmp" exists under the current skin folder, SlimBrowser will use it to paint the background of the explorer bar (the panes shown when you select "View:Explorer Bars:xxxx" from the menu). If this bitmap file doesn't exist, the default system color will be used.

Status Bar

• StatusBarBackColor=Red,Green,Blue
  Specify the back ground color of the status bar by RGB value. This setting has no effect if you have enabled Visual Style in Windows XP

Submitting Your Own Skin

Please test your skin to make sure it works properly within SlimBrowser. After that, compress all the files under your skin folder into a zip file named SkinName.zip. Submit the zip file to us by email. We will let you know when your skin has been processed and published in the online skin list.

Thanks for making contributions to the SlimBrowser user community!