Skin Reference - Maxthon 2.x

From Maxthon Help

Contents 1 General 2 Image formats 3 this documents uses the following conventions 4 MSKIN.INI file structure 5 [ General ] 6 [ Global ] partial 7 [ Icons ] (partial) 7.1 Common Icons 7.2 Tab Bar Buttons 7.3 Window Controls 8 [ Icons16 ] (partial) 8.1 Common Icons 8.2 General Icons 8.3 Function Icons

[edit] General

Maxthon 2 Browser skins use .m2s as extension for the zip files in which the many images and the description file are now packed.

Note:
Zipfiles created by WinZip using it's new, extended compression format, are no longer supported.
Please use either WinRar or 7Zip to create your skin files.

Starting with version 2.0, the Maxthon browser supports the use of PNG images for transparancy effects in the skin. Your skin definition file has to use the ini extension and must be named "mskin.ini". Please take care to save the file in Unicode (UTF-8) Format.

When creating the final .m2s file, please pay attention to the following main requirement.

• Make sure your skin file has one folder named same as the skin.

Here are some tips to further optimize the skin for both loading time and performance.

• check for and delete thumbs.db files before packing the skin
  go to 'Tools > Folder Options > View' and uncheck "Hide protected operatingsystem files" to make them show.

• reduce the palette size of your graphics.
  Instead of saving 16x16 icons as 24-bit PNGs, use a reduced palette. In most all cases, you can reduce the palette to 8 bit or in some cases even 4-bit and still be able to save all colors you used in your icon. In general, most people will not even see the difference after converting a 24x24 icon with ~300 actual colors used, to an 8bit or even a 4bit image.

• Use the maximum compression, not the default one.
• If your skin is meant to be used with an Interface Style, reduce background images to the smallest possible size or completely remove them and only use a fill color

• Reduce the size of your included Preview image. it is too small in dimension to show the full detail anyways so it should not be larger than 20KB...

• If you started your skin from a copy, and you only use one size icon, consider deleteting the icons for the other toolbar button sizes (for example, if you modified the original skin, and only use 24x24 icons, then delete all the 32x32 icons from the pack

The above will reduce the size of your skin with at least 100+KB and in some cases even with 200+KB.

[edit] Image formats

We suggest for skin authors to only use the PNG format in their skins. Although the new edition still supports the BMP format, it does not support BMP transparency, therefore we recommend you do not use this format.

[edit] this documents uses the following conventions

Keywords 

Keywords include skin description and skin attributes, Case insensitive.

For example: Version or version

Constants 

Constants are pre-defined aliases representing a value. Case insensitive.

For example: System

String 

Most common data type

For example: This is a String

Numbers 

In the skin definition file all values should be specified as integers

For example: 32 and 16

Logical Values 

Boolean value which can either be 1 or 0.

For example: 1 and 0

Color Values 

A color value may be specified in one of three different ways. You can use the hexadecimal system as is common in webpages, or as comma separated RGB values or as the system color name.

For example: #FEFEFE or 255,210,76 or #COLOR_HIGHLIGHTTEXT (see also appendix: Supported System Color names).

[edit] MSKIN.INI file structure

the skin file controls how the browser appears. This document will give you a detailed, step by step description of the separate sections which make up a skin description or you can use an existing skin's definition file as template.

Attention: If you want to use non-ASCII characters in your comments, please use Unicode (UTF-8) format when saving the file to preserve the proper encoding.

[edit] [ General ]

this section is used to describe your skin

Name=
Version=
Style=
Author=
Email=
Website=
License=
Preview=

Name 

The name you have chosen to use for your skin

Version 

the skin's version, for use in "Check for Updates", the format should be #. #. #
where # stands for one or more digits between 0-9

Style 

the preferred main icon size, used in multi-style skins (optional)
suggested values: 32x32 Large Icon, 24x24 normal icon, 16x16 small icon

Author 

your name/nick (optional)

Email 

your email address (optional)

Website 

the address of your website (optional)

License 

Some text to indicate the allowed usage for this skin (optional)
For example: This skin pack or part of it should not be ported or redistributed without the literal permission from the author.

Preview 

It is preferred that you include a preview image in your skin file with a size of 220×220 pixels,
supported formats are: JPEG, PNG, BMP, GIF<static only>

Additionally, when selecting a skin in the Setup Center, Maxthon will first look in the $Maxthon2$\Temp folder for an image <skinname>_preview, if found, it will nolonger try to extract the preview from the skin file.

[edit] [ Global ] partial

this part describes the basic skin properties

BaseTheme=skin style
DefaultIconSize=24 24
CustomFrame=1
CustomFrame.Width=4
CustomFrame.Style=GFill/Image
CustomFrame.Image=control\mainframe.png
CustomFrame.CornerSize=4
CustomFrame.Stretch=1* (see below)
CustomFrame.CornerRadius=5
AnimateLoading=control\loading.png

BaseTheme=skin style 

Sets the default style for your skin. If you choose any of the styles other than Custom, you will only be able to change the following basic skin properties and the icon images.

Possible values are

• Custom - Completely defined by the skin.
• System - The currently active Windows Style.
• Office2000 - Office 2000 tabs, toolbars and menu style.
• OfficeXP - Office XP tabs, toolbars and menu style.
• Office2003 - Office 2003 tabs, toolbars and menu style.

DefaultIconSize 

Sets the default size for the Main Toolbar icons, use only when images need to be rescaled from a different size (This option is under consideration and may dissapear)

CustomFrame 

Determines if the Custom Frame should be used to create the Window borders. This setting can only be modified when the BaseTheme is set to Custom.

Note: This value is masked in any situation where it is not applicable.

CustomFrame .Width 

Sets the width of the custom border

Note: The custom frame only exists for appearances sake, do not place any controls on it (the frame) otherwise it will not be everywhere possible to drag the window by its border.

CustomFrame .Style 

Possible values are GFill and Image, 3Image is not supported for this property. GFill can be used to generate a global fill pattern. Image allows you to use a custom image and requires one additonal property to be set CustomFrame.Image. Two optional properties can also be specified, CustomFrame.CornerSize and CustomFrame.Stretch

CustomFrame.Image 

the image to be used when constructing the frame

CustomFrame.CornerSize 

Width and height of the corner area of your image in pixels. default value is 0.

Note: Similar to the offset attributes for the 3Image style -- the CornerSize×CornerSize portions of your custom frame image will not be stretched -- If 2×CornerSize equals your image width, you will have side frame images without a "black side" Similarly, if 2×CornerSize equals the height of your image you will have a top- and bottomborder without black edges. The following property is then also applicable, but optional, it will default to 1 (=stretch) if not specified.

CustomFrame.Stretch 

If stretch is specified, then it will only be applied along the direction of the border. Along the vertical left and right edges, your image will only be stretched vertically, and along the horizontal top bottom edges it will only be stretched horizontally.

In other words, if CustomFrame.Width is bigger than the total width of your image, some parts of the side frame may appear in black. Likewise if the total height of your image is less than CustomFrame.Width, parts of the top and bottom frameborder may appear as black.

Another thing to be aware of when you intend to apply stretch, is the ratio of the image dimensions. If using a square image, the amount of stretching will be higher in horizontal direction than in vertical direction due to window ratio. When using a pattern or gradient and a sufficiently 'thick' border, this may then lead to the pattern looking distorted or a gradient not appearing as intended. On the other hand, you can ofcourse deliberately supply an image which highly unequal width:height ratio to make use of this effect.

(An example image is needed here to show how the various areas of an image are used to make up the frame)

CustomFrame.CornerRadius 

This setting controls the amount of rounding (by clipping) that is applied to corners of the browser window, regardless of an image being used for the frame or not. Default value is 0.

The radius determines the distance between the center of an imaginary circle and the window corner. Any part of the window that falls outside the arc of this circle is clipped, which means the clipping is not limited to the frame and does not exclude controls. If this value is set too large, it may lead to controls not being visible - for example, a corner radius of 100 (as typo instead of 10) will cause the zoombutton to be cut off.

AnimateLoading 

Specifies a dynamic state image to represent the loading progress of a tab. It must consist of a horizontally oriented strip of imageframes, each single frame 16x16 pixels in size. Default is none

[edit] [ Icons ] (partial)

This section lists all the icons using a size other than 16×16.
Each image may have different width and height, the browser will be able to automatically detect the image size .
For each icon the following additional properties may be specified.

If you can't be bothered to add the additional details for these images, you can also specify the 16×16 icons as replacement. For example for those buttons that are also available through Customize.

<Icon>.Hover=toolbar/hover/
<Icon>.Disable=toolbar/disable/
<Icon>.Pressed=toolbar/pressed/
<Icon>.Offset=X Y
<Icon>.Padding=top right bottom left
<Icon>.drawbackground=0

<Icon>.hover 

The image to show when the mouse hovers over the button.

Note: This will ofcourse only be visible if an image is actually supplied.

<Icon>.Disable 

Shows the image in disabled state, only applies to buttons that actually are capable of showing this state, such as Back and Forward.

<Icon>.Pressed 

Shows the image in pressed state, only applies to buttons that have a toggle state property such as the Proxy button.

<Icon>.Offset 

Specifies a displacement distance relative to the top left of the button. Negative values are allowed.

(ed: why?, does this not place an image (partly) outside of the button?)

<Icon>.Padding 

Specifies the amount of space to add around the image, together with the image size this makes up the final size of the hot area of a button. Order follows the same conventions as in CSS. Negative values are allowed.

<Icon>.drawbackground 

Specifies if the image background should be painted if the image also contains transparancy information. Default is 0.

[edit] Common Icons

New=toolbar\24_new.png
Back=toolbar\24_back.png
Forward=toolbar\24_forward.png
HistoryMenu=toolbar\18_history_menu.png
Refresh=toolbar\24_refresh.png
Stop=toolbar\24_stop.png
Home=toolbar\24_home.png
Undo=toolbar\24_undo.png
History=toolbar\24_history.png
Layout=toolbar\24_layout.png
Favorites=toolbar\24_favorites.png
Feed=toolbar\24_feed.png
FontSize=toolbar\24_fontsize.png
Zoom=toolbar\24_page_zoom.png
Save=toolbar\24_save.png
Print=toolbar\24_print.png
Security=toolbar\24_security.png
Proxy=toolbar\24_proxy.png
Tools=toolbar\24_tools.png
PageContent=toolbar\24_page_content.png
Plugins=toolbar\24_plugins.png
FormFiller=toolbar\24_form_filler.png
Screenshot=toolbar\24_sshot.png
Edit=toolbar\24_edit.png
Options=toolbar\24_options.png
Encoding=toolbar\24_encoding.png

New 

Navigation > New Tab ²

Back 

Navigation > Back to previous page ²

Forward 

Navigation > Return to previous

2000 page ²

HistoryMenu 

Navigation > History button. ^1,2

Home 

Navigation > Load Homepage ²

Undo 

Navigation > Reopen Closed Tabs ²

Layout 

Full Screen ²

Save 

File > Save as

Print 

File > Print ²

Favorites 

View > Sidebars > Favorites Sidebar ²

Feed 

View > Sidebars > Subscriptions Sidebar

Refresh 

View > Refresh Current Page ²

Stop 

View > Abort Loading Current Page ²

FontSize 

View > Font Size ²

Zoom 

View > Zoom Page ²

History 

View > Global Tab History ²

Security 

Tools > Safety

Proxy 

Tools > Proxy Server Configuration ²

Tools 

Tools > External Utilties

PageContent 

Tools > Content Control

Plugins 

Tools > Plugins

FormFiller 

Tools > Magic Fill ²

Screenshot 

Tools > Capture Screen ²

Edit 

Tools > Edit Page

Options 

Tools > Options ²

Encoding 

Web Tools Bar > Page Language Encoding ²

---

¹ Do not mistake this icon with the regular History icon, this one shows a dropdown menu with the current session history of the active tab, the current page is indicated by a checkmark. The size of this icon is generally smaller than the other buttons. (18×18 vs. 24×24)

² Can be added through the Customize dialog

[edit] Tab Bar Buttons

TabSidebar=control\tab_sidebar.png
TabManager=control\tab_manager.png
TabNew=control\tab_new.png
TabToolbar=control\tab_toolbar.png
TabOptions=control\tab_options.png

TabSidebar 

Tab Bar Buttons > Show/Hide Sidebar

TabManager 

Tab Bar Buttons > Show/Hide Tab Manager

TabNew 

Tab Bar Buttons > New Tab

TabToolbar 

Tab Bar Buttons > Show/Hide Web Tools Bar

TabOptions 

Tab Bar Buttons > Tab Option

[edit] Window Controls

These are only used when "Show Window Frame" is deselected (Skin Selector Dropdown menu)

SkinSelect=control\16_skin_selector.png
MenuMinimize=control\16_minimize.png
MenuRestore=control\16_restore.png
MenuMaximum=control\16_maximum.png
MenuClose=control\16_close.png

SkinSelect 

Skin Selector

MenuMinimize 

Minimize Window to Taskbar or Notification Area

MenuRestore 

Restore Previous Size and Position

MenuMaximum 

Maximize Window

MenuClose 

Close Program

[edit] [ Icons16 ] (partial)

This section describes the small icons which are used throughout the interface. All icons must be 16×16 pixels in size, otherwise the images will be distorted. In order to guarantee a uniform performance, properties as available for the Icons, such as Offset and Padding, are not available here.

[edit] Common Icons

This part is basically a duplicate of the Common Icons part in the [Icons] section. Only difference is the size of the images.

New=toolbar\16_new.png
Back=toolbar\16_back.png
Forward=toolbar\16_forward.png
HistoryMenu=toolbar\18_history_menu.png
Home=toolbar\16_home.png
Undo=toolbar\16_undo.png
Layout=toolbar\16_layout.png
Save=toolbar\16_save.png
Print=toolbar\16_print.png
Favorites=toolbar\16_favorites.png
Feed=toolbar\16_feed.png
Refresh=toolbar\16_refresh.png
Stop=toolbar\16_stop.png
FontSize=toolbar\16_fontsize.png
Zoom=toolbar\16_page_zoom.png
History=toolbar\16_history.png
Security=toolbar\16_security.png
Proxy=toolbar\16_proxy.png
Tools=toolbar\16_tools.png
PageContent=toolbar\16_page_content.png
Plugins=toolbar\16_plugins.png
FormFiller=toolbar\16_form_filler.png
Screenshot=toolbar\16_sshot.png
Edit=toolbar\16_edit.png
Options=toolbar\16_options.png
Encoding=toolbar\16_encoding.png

New 

Navigation > New Tab ²

Back 

Navigation > Back to previous page ²

Forward 

Navigation > Return to previous page ²

HistoryMenu 

Navigation > History button. ^1,2

Home 

Navigation > Load Homepage ²

Undo 

Navigation > Reopen Closed Tabs ²

Layout 

Full Screen ²

Save 

File > Save as

Print 

File > Print ²

Favorites 

View > Sidebars > Favorites Sidebar ²

Feed 

View > Sidebars > Subscriptions Sidebar

Refresh 

View > Refresh Current Page ²

Stop 

View > Abort Loading Current Page ²

FontSize 

View > Font Size ²

Zoom 

View > Zoom Page ²

History 

View > Global Tab History ²

Security 

Tools > Safety

Proxy 

Tools > Proxy Server Configuration ²

Tools 

Tools > External Utilties

PageContent 

Tools > Content Control

Plugins 

Tools > Plugins

FormFiller 

Tools > Magic Fill ²

Screenshot 

Tools > Capture Screen ²

Edit 

Tools > Edit Page

Options 

Tools > Options ²

Encoding 

Web Tools Bar > Page Language Encoding ²

---

¹ Do not mistake this icon with the regular History icon, this one shows a dropdown menu with the current session history of the active tab, the current page is indicated by a checkmark. The size of this icon is generally smaller than the other buttons. (18×18 vs. 24×24)

² Can be added through the Customize dialog

[edit] General Icons

Page=misc\16_page.png
AddressBar=misc\16_page.png
DefaultTabIcon=misc\16_page.png
Search=toolbar\16_search.png
SearchBar=toolbar\16_search.png
FolderOpen=misc\16_folder_open.png
FolderClose=misc\16_folder_closed.png
Group=misc\16_group.png
FeedChannel=misc\16_feed_channel.png
FeedItem=misc\16_feed_item.png
FeedItemEnclosure=misc\16_feed_item_enclosure.png
FeedDiscover=misc\16_feed_discover.png
Secure=misc\16_secure.png
TabLock=misc\16_secure.png
Skin=misc\16_skin.png
Plugin=misc\16_plugin.png
TrashCan=misc\16_trashcan.png

Page 

Default icon for Favorites, used in Favorites Menu, Sidebar, Manager, etc.

AddressBar 

The icon used in the addressbar, uses Page icon by default

DefaultTabIcon 

 ?, uses Page icon by default

Search 

Search engine icon (Search Bar and the drop-down menu)

SearchBar 

Search engine search box icon. (Optional) Uses Search icon by default

FolderOpen 

Opened Folder icon, used wherever Folders are used

FolderClose 

Closed Folder Icon, used wherever Folders are used

Group 

Group Icon, used where Groups are used

FeedChannel 

Feed Channel icon, used in My Subscriptions Sidebar

FeedItem 

Feed Article, used in My Subscriptions Sidebar

FeedItemEnclosure 

Feed Article Enclosure icon,

FeedDiscover 

Discovered Feed, used in the addressbar

Secure 

Secure Connection icon, used in Addressbar

Tablock 

Supposedly to indicate a locked tab, currently not used.

Skin 

Skin File Icon, currently not used

Plugin 

Plugin Pack Icon, currently not used

TrashCan 

Clean Browser Histories Icon, used on Web Tools Bar and Safety Submenu.

[edit] Function Icons

Go=misc\16_go.png
UpLevel=misc\16_up_level.png
HotFav=misc\16_hot_fav.png
Highlight=misc\16_highlight.png
Validate=misc\16_validate.png
ScriptError=misc\16_script_error.png
Profile=misc\16_profile.png
Collector=misc\16_collector.png
AdHunter=misc\16_ad_hunter.png
OpenInNew=misc\16_open_in_new.png
ForceTabInBK=misc\16_open_in_bg.png
Accelerator=misc\16_accelerator.png
FloatButton=misc\16_float_button.png