Maxthon 2 - Skin Reference

From Maxthon Wiki

Jump to: navigation, search

Contents

[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 2
Back 
Navigation > Back to previous page 2
Forward 
Navigation > Return to previous

2000 page 2

HistoryMenu 
Navigation > History button. 1,2
Home 
Navigation > Load Homepage 2
Undo 
Navigation > Reopen Closed Tabs 2
Layout 
Full Screen 2
Save 
File > Save as
Print 
File > Print 2
Favorites 
View > Sidebars > Favorites Sidebar 2
Feed 
View > Sidebars > Subscriptions Sidebar
Refresh 
View > Refresh Current Page 2
Stop 
View > Abort Loading Current Page 2
FontSize 
View > Font Size 2
Zoom 
View > Zoom Page 2
History 
View > Global Tab History 2
Security 
Tools > Safety
Proxy 
Tools > Proxy Server Configuration 2
Tools 
Tools > External Utilties
PageContent 
Tools > Content Control
Plugins 
Tools > Plugins
FormFiller 
Tools > Magic Fill 2
Screenshot 
Tools > Capture Screen 2
Edit 
Tools > Edit Page
Options 
Tools > Options 2
Encoding 
Web Tools Bar > Page Language Encoding 2

1 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)

2 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 2
Back 
Navigation > Back to previous page 2
Forward 
Navigation > Return to previous page 2
HistoryMenu 
Navigation > History button. 1,2
Home 
Navigation > Load Homepage 2
Undo 
Navigation > Reopen Closed Tabs 2
Layout 
Full Screen 2
Save 
File > Save as
Print 
File > Print 2
Favorites 
View > Sidebars > Favorites Sidebar 2
Feed 
View > Sidebars > Subscriptions Sidebar
Refresh 
View > Refresh Current Page 2
Stop 
View > Abort Loading Current Page 2
FontSize 
View > Font Size 2
Zoom 
View > Zoom Page 2
History 
View > Global Tab History 2
Security 
Tools > Safety
Proxy 
Tools > Proxy Server Configuration 2
Tools 
Tools > External Utilties
PageContent 
Tools > Content Control
Plugins 
Tools > Plugins
FormFiller 
Tools > Magic Fill 2
Screenshot 
Tools > Capture Screen 2
Edit 
Tools > Edit Page
Options 
Tools > Options 2
Encoding 
Web Tools Bar > Page Language Encoding 2

1 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)

2 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
Personal tools