高级皮肤指南 for Opera 8.x/9.x
关于本指南:
Known and also undocumented skin.ini-sections are commented here with: where you can find the thing in Opera, which base you see if the section includes no image or no color, as well as hints and tricks and more. In a lot of sections you find now screenshots of the mentioned skin part, together with more info...
Tested are all the things with Opera from v8.x to the latest v9.x and W-XP. With other operating systems and older Opera versions some things may be only partly valid.
Changes to Opera 9.2 integrated:
All known skin changes from Opera 9.1 to 9.2 are added now to this document. For further information see the summary on the SkinINIChanges page. Please note also the AdvancedToolbarINIGuide and the new AllActionsListPlus page.
- Create a sidebar with the complete table of contents for this guide. A link, clicked on the sidebar, opens the page in a normal main tab:
Create sidebar
Categories:
Skin sections in alphabetical order:
Basic info:
FIRST OF ALL [⊗]
- This document describes all the sections for a non-native skin, based on Operas Standard_skin.zip. Please make sure you are not editing a native skin, defined trough the entry Native skin = windows or Native skin = 1 in the section Options . More you find here: Native/Non-native skins
- In general: if a section does not exists in your skin.ini, Opera takes the appropriate section and it`s values from the skin.ini in the standard_skin.zip (see also `Fallback foreground/background` in Options )!
- 'Base: xy skin' means that this base is visible if the [...]-section exists, but no image, only a partial image or no background color is defined.
- 'No base' means black background color if no image, only a partial image or no background color is defined.
- 'Default is X' means: this value is valid if this entry does not exists.
GIF ANIMATIONS [⊗]
- Since v9.2 Opera supports the use of animated gif`s in the skin; as example the Animated gif`s in [Images] downwards the page, in use for the speeddial thumbnails (here a screenshot)
- Another example you find in the ttt-paper skin, there the `Selector button skin.hover.attention` is animated; for the same skin you find also some animated buttons as first attempt on the ttt-buttons page
- There are various other possibilities for animations, but it`s not so simple and the support seems not to be finished; please check the community-thread: Skinning with animated images
- Start of skin.ini comments -
GENERAL SETTINGS
[⊗]
General settings:
[Info] [⊗]
[Info]
Name = ADVANCED 0.0 for Opera 8.x
Author = Tobias Murano
Version = 2
Preview Image=
- Name= appears in the Appearance - Skin dialog as skins title.
- Author= the skin author; your name.
- Version=2 necessary for skins for Opera 7-8 (-9).
- Preview image= not necessary; appears where?
(top)
General settings:
[Options] [⊗]
[Options]
Native skin = 0
Large Images = 1
Pagebar max button width = 90
Pagebar min button width = 90
Button Text Padding = 2
Center tabs = 0
Fallback foreground = 1
Fallback background = 1
- Native skin=0 or no entry recommended for a completely skinned skin as described here (possible values: 0, 1, Windows), see also Native/Non-native skins .
- Large images=1 or no entry necessary if .large button images available, default is 1. `Large images=0` recommended if no .large button images available (so the checkbox 'Large images' in Appearance - Toolbars doesn't appears).
- Pagebar max button width= valid since 8.x, default is 160.
- Pagebar min button width= valid since 8.x, but not valid if 'No wrapping' is chosen for the pagebar in Appearance - Toolbars, default is 160. Usually there is no need to use different values for the minimum and maximum width.
- Button text padding= general padding, overrides individual text paddings, default is 2.
- Center tabs=1 centers the tabs outside the pagebar (e.g. Appearance...), default is 0.
- Fallback foreground=1/0 and Fallback background=1/0 means that if a section/image doesn't exists, Opera have to take or not to take the section/image from the Standard skin, default is 1 for both. If you use 0, you have to be absolutely sure that all necessary things are skinned! Please do not edit the standardskin.zip directly and do not move this file!
(top)
TOOLBARS BACKGROUND
[⊗]
Toolbars background:
[Addressbar skin] [⊗]
Used in older versions, but still works fine:
[Addressbar skin]
- Individual background for the Address bar (base: window skin).
- Also individual positions .top/.left/.bottom/.right possible.
- if 'Show progressbar as popup inside addressbar' is chosen in Appearance - Toolbars, the paddings have to correspond with the Progressbar skin (otherwise unsightly buttons shifting possible).
- screenshot
(top)
Toolbars background:
[Browser window skin] [⊗]
[Browser Window Skin]
[Browser Window Skin.disabled]
- General browser background, includes a lot of toolbars if not otherwise specified.
- If the following skin parts are set as section titles but without images or color, you see there the [Browser window skin]: [Mainbar skin], [Personalbar skin], [Statusbar skin], [Status skin] (as inner part of the Statusbar skin), [Pagebar skin], [Pagebar head skin], [Pagebar tail skin], [Hotlist splitter skin], [Panel toggle skin.left.hover] and [Panel toggle skin.right.hover]
- Note that the `Broswer menu bar` (File, Edit, View...) is also part of the [Browser window skin], but without own section title
- screenshot
(top)
Toolbars background:
[Content Block Toolbar Skin] [⊗]
Since Opera 9
[Content Block Toolbar Skin]
- Individual background for the Content block toolbar (appears if you choose `Block content` in the rightclick menu of a page), (base: window skin).
- Note: individual positions .top/.left/.bottom/.right are not supported here.
- screenshot
(top)
Toolbars background:
[Mainbar skin] [⊗]
[Mainbar Skin]
- Individual background for the Main bar (base: browser window skin).
- Also individual positions .top/.left/.bottom/.right possible.
- screenshot
(top)
Toolbars background:
[Navigationbar skin] [⊗]
[Navigationbar skin]
- Individual background for navigation bar, (base: window skin).
- Also individual positions .top/.left/.bottom/.right possible.
- screenshot
(top)
Toolbars background:
[Pagebar skin] [⊗]
[Pagebar Skin]
- Individual background for all Page bar positions, (base: Browser window skin).
- The pagebar head and tail are relatives; same look as the pagebar skin if not defined there.
- Also individual positions .top/.left/.bottom/.right possible.
- screenshot
(top)
Toolbars background:
[Pagebar head skin], [Pagebar tail skin] [⊗]
Not used in the standard skin.ini:
[Pagebar head Skin]
- Individual background for the Page bar head, (base: Pagebar skin/ Browser window skin).
- Also individual positions .top/.left/.bottom/.right possible (no more individual positions since Opera 9).
- There is no checkbox for the Page bar head in Appearance - Toolbars, but the head is available by clicking the area at the left of the page bar if the Appearance dialog is open. If you change the Page bar position, you have to choose the position for the head separately (changes the buttons position).
- Separate images here are difficult to handle, but `Paddings=` for the different button positions may be useful.
- screenshot
Not used in the standard skin.ini:
[Pagebar tail Skin]
- Individual background for the Page bar tail, (base: Pagebar skin/ Browser window skin).
- Also individual positions .top/.left/.bottom/.right possible (no more individual positions since Opera 9).
- There is no checkbox for the Page bar tail in Appearance - Toolbars, but the tail is available by clicking the area at the right of the page bar if the Appearance dialog is open. If you change the Page bar position, you have to choose the position for the tail separately (changes the buttons position).
- Separate images here are difficult to handle, but `Paddings=` for the different button positions may be useful.
- screenshot
(top)
Toolbars background:
[Personalbar skin] [⊗]
[Personalbar Skin]
- Individual background for the Personal bar (base: browser window skin).
- Also individual positions .top/.left/.bottom/.right possible.
- For .left and .right it's recommended to use 'Spacing=-10' (for example) to minimize the vertical distance.
- screenshot
(top)
Toolbars background:
[Progressbar skin] [⊗]
[Progressbar skin]
- Individual background if 'Show inside addressbar' for the Progress bar is chosen in Appearance - Toolbars, (base: window skin). It's important that paddings correspond with Addressbar skin (otherwise unsightly button shifting possible).
- screenshot
(top)
Toolbars background:
[Progressbar popup skin]
[Progressbar popup skin]
- Individual background if 'Pop-up at bottom of page' is chosen for the Progress bar in Appearance - Toolbars, (base: window skin).
- If you choose 'Simple' for the Progress bar in Appearance - Toolbars, only a foreground-part of [Progress ... skin] will be displayed in the addressfield.
- screenshot
(top)
Toolbars background:
[Panel toggle skin.top.hover], [Panel Toggle Skin.bottom.hover] [⊗]
[Panel Toggle Skin.top.hover]
Child0 = Panel Toggle Skin.top
- Individual background for addressbar toggle at the top of a "pop-up window without addressbar" with the arrow childs, visible only if "Allow Javascript to hide addressbar" is activated, (base; window skin).
- The child, which is here at the same time the unhovered image, you will find in [Boxes].
- Seems to be replaced with 'Secure/Insecure Popup Header Skin', so actually not in use?
[Panel Toggle Skin.bottom.hover]
Child0 = Panel Toggle Skin.bottom
- I think that's actually not in use?
- The child, which is here at the same time the unhovered image, you will find in [Boxes].
(top)
Toolbars background:
[Secure popup header skin], [Insecure popup header skin]
[Secure Popup Header Skin]
[Secure Popup Header Skin.hover]
[Insecure Popup Header Skin]
[Insecure Popup Header Skin.hover]
- Individual background for the small addressbar toggle at the top of a "pop-up window without addressbar" (displays the real secure or insecure address), such popups are visible only if "Allow Javascript to hide addressbar" is activated, (base; window skin). Seems to replace the [Panel toggle skin.top].
- screenshot
(top)
Toolbars background:
[Start Skin] [⊗]
;[Start skin]
- Old beta thing (formerly Start panel), I think no longer valid?.
(top)
Toolbars background:
[Start Popup Skin]
[Start Popup Skin]
- Background images for the Startbar-popup, "if you call a new page" (base: no base).
- No margin or Padding possible, but Padding in the [Startbar skin] changes the [Start popup skin] too!
- Note that this background may overlap a website; probably dark and bright border needed. Because no base; round corners not recommended.
- screenshot
(top)
Toolbars background:
[Startbar Skin] [⊗]
[Startbar Skin]
- Background images inside the Start popup skin, must be for the start popup skin (base: start popup skin).
- Also individual positions .top/.left/.bottom/.right possible.
- No Margin possible, but Padding works well (changes the [Start popup skin] too!)
- screenshot
(top)
Toolbars background:
[Statusbar skin] [⊗]
Used in older versions, but still works fine:
[Statusbar Skin]
- Individual background for the Status bar (base: browser window skin)
- Also individual positions .top/.left/.bottom/.right possible
- screenshot
(top)
Toolbars background:
[Status skin] [⊗]
Used in older versions, but still works fine:
[Status Skin]
- Individual background inside statusbar skin and for the Drag-And-Drop-status field from Appearance - Buttons - Status, (base: statusbar skin / depends).
- screenshot
(top)
Toolbars background:
[Toolbar skin] [⊗]
Corrected now: the Toolbar skin is a relative to the [Window skin] and not to the [Browser window skin] as supposed a long time - my fault. tomu
Used in older versions, but still works fine:
[Toolbar Skin]
- General background for several toolbars if not defined otherwise, concerned: hotlist panel skin, Search skin inner parts and all 'full panels' toolbars, also partly Dialog page skin inner part (Appearance - Buttons), (base: depends).
- Also individual positions .top/.left/.bottom/.right possible.
- screenshot
(top)
Toolbars background:
[Viewbar skin] [⊗]
[Viewbar Skin]
- Individual background for the View bar, "beside the addressbar", (base: window skin).
- Also individual positions .top/.left/.bottom/.right possible
- screenshot
(top)
Toolbars background:
[Window skin] [⊗]
[Window skin]
[Window Skin.disabled]
- Background for each kind of windows and it's parts.
- If the following skin parts are set as section titles but without images or color, you see there the `Window skin`: [Toolbar Skin], [Navigationbar skin], [Addressbar skin], [Progressbar skin], [Progressbar popup skin], [Viewbar Skin], [Secure Popup Header Skin], [Insecure Popup Header Skin], [Panel Toggle Skin.top.hover], [Panel Toggle Skin.bottom.hover], and [Content Block Toolbar Skin] as well as all toolbars and other parts for the `Full panels`.
- And: also the [Search skin] is partly a relative to the [Window skin], (the large search panels base is: [Window skin]).
- screenshot
(top)
DIALOGS BACKGROUND
[⊗]
Dialogs background:
[Dialog skin] [⊗]
[Dialog Skin]
- General background for dialogs, e.g. Error-messages/Appearance.../Preferences..., (base: no base).
- If the following skin parts are set as section titles but without images or color, you see there the [Dialog skin]: [Dialog Page Skin], [Dialog Tab Page Skin], [Tabs Skin], [Dialog Button Border Skin] and [Horizontal Separator]
- screenshot
(top)
Dialogs background:
[Dialog Page Skin] [⊗]
[Dialog Page Skin]
[Dialog Page Skin.disabled]
- Individual inner background inside dialog skin, this inner part overrides the dialog skin partly, (base: dialog skin), also for inner part of the startup dialog, (base there: startup dialog skin).
(top)
Dialogs background:
[Dialog Tab Page Skin] [⊗]
[Dialog Tab Page Skin]
- Individual inner background inside dialog skin, this inner part overrides the dialog skin partly and overrides also the dialog page skin (base: dialog skin) as well as the `Toolbar skin` if in use for the inner-inner part of the buttons-dialog. But the startup dialog skin as well as the common message-dialogs are not concerned
- screenshot
(top)
Dialogs background:
[Tabs Skin] [⊗]
[Tabs Skin]
- Individual background around tabs outside the pagebar, e.g. Appearance dialog or Contact properties, it overrides the dialog skin partly, (base: dialog skin).
- For vertical dimensions take also the 'Dialog skin' into consideration.
- screenshot
(top)
Dialogs background:
[Startup Dialog Skin] [⊗]
Used in older versions, but still works fine. This section is only partly a relative to the [Dialog skin]:
[Startup Dialog Skin]
- General background for the start-up dialog, "Continue from last...", (base: no base).
- But note: the inner part comes from [Dialog Page Skin] if defined there.
- And: if [Startup Dialog Skin] doesn't exists, the outer part comes from the [Dialog skin] and the inner part from the [Dialog Page Skin].
- screenshot
(top)
Dialogs background:
[Startup Dialog Header Skin]
Out of order! (used in older versions):
;[Startup Dialog Header Skin]
;Type = Box
;Tile center =
;Height =
- Images for the header in the start-up dialog, in older Standard skins that was the header.gif from the /startup_dialog folder, (base: Startup Dialog Skin).
- Attention: since 8.0b1 out of order! This header was often in use to display the skin name and version. If that's needed: it's still possible to place something into the top images for the 'Startup Dialog Skin'.
- The old v7-header.gif in the folder .../startup_dialog is only wasted filesize... .
(top)
Dialogs background:
[Dialog Button Border Skin] [⊗]
[Dialog Button Border Skin]
- Transparent shadow images around the push buttons in dialogs (base: dialog skin/ start-up dialog skin).
- Allows a little bit positioning of the push buttons with paddings.
- screenshot
(top)
Dialogs background:
[Horizontal Separator], [Vertical Separator] [⊗]
[Horizontal Separator]
Type = BoxTileHorizontal
Tile Center =
Height = 1
- Horizontal (only) separator for inside dialogs, appears in Preferences- and Appearance-dialogs, (base: dialog page skin/dialog skin).
- Please note the special Type- and Height-entrys.
-
[Vertical Separator]
Type = BoxTileVertical
Tile Center =
Width = 1
- Vertical (only) separator for ?, appears in ? (never found), (base: depends).
- Please note the special Type- and Width-entrys.
- screenshot
(top)
PANELS BACKGROUND
[⊗]
Panels background:
[Hotlist skin] [⊗]
[Hotlist Skin]
- General background for the hotlist panel selector, the hotlist panel header and the hotlist panel, (base: none)
- Also individual positions .top/.left/.bottom/.right possible.
- If the following skin parts are set as section titles but without images or color, you see there the [Hotlist skin]: [Hotlist Selector Skin], [Hotlist Panel Skin], [Hotlist Panel Header Skin] and [Search Skin]
- Note: also the [Toolbar skin] changes partly the hotlists view.
- Also [Treeview skin] and [Multilineedit skin] are partly relatives to the [Hotlist skin].
- The [Hotlist splitter skin] is related to the [Browser window skin] and not as the name suggests to the Hotlist skin.
- screenshot
(top)
Panels background:
[Hotlist panel skin] [⊗]
Used in older versions, but still works fine:
[Hotlist Panel Skin]
[Hotlist Panel Skin.disabled]
- Individual background for the panels toolbar "below the panel header", (base: hotlist skin).
- Also individual positions .top/.left/.bottom/.right possible.
- screenshot
(top)
Panels background:
[Hotlist Panel Header Skin]
Used in older versions, but still works fine:
[Hotlist Panel Header Skin]
- Individual background for the panel header "with panel-dropdown/maximize/minimize", (base: hotlist skin).
- Also individual positions .top/.left/.bottom/.right possible.
- screenshot
(top)
Panels background:
[Hotlist selector skin] [⊗]
[Hotlist Selector Skin]
- Individual background for the hotlist panel selector "Bookmarks/Notes/Transfers...", (base: hotlist skin).
- Also individual positions .top/.left/.bottom/.right possible.
- The selectors width is also depending on the entry `Maximum Button Width=xy` inside the section [Hotlist Panel Selector.style] of the toolbar.ini
- screenshot
(top)
Panels background:
[Hotlist splitter skin] [⊗]
[Hotlist Splitter Skin]
- Individual background for the small vertical resize-part between panel and window (base: browser window skin).
- Attention: I think it's 3 pixels wide, if you take more pixels it can be that the selector buttons displays a delayed hovering, possibly also transparent splitter skin images does that.
- The [Hotlist splitter skin] is related to the [Browser window skin] and not as the name suggests to the Hotlist skin.
- screenshot
(top)
Panels background:
[Search Skin] [⊗]
[Search Skin]
- Individual background for the search panel and window (small search panel and large search panel), (base: hotlist panel skin or hotlist skin behind, and window skin).
- Overrides the Hotlist panel skin or Hotlist skin and Window skin for search panel/window.
- Attention: if the section entry [Search skin] doesn't exists, the corresponding entry from the standard skin.zip would be valid (see also `Fallback background=` in [Options] ).
- screenshot
(top)
Panels background:
[Panel Toggle Skin.left.hover], [Panel Toggle Skin.right.hover] [⊗]
[Panel Toggle Skin.left.hover]
Child0 = Panel Toggle Skin.left
[Panel Toggle Skin.right.hover]
Child0 = Panel Toggle Skin.right
- Individual background images for the panel toggle "small vertical toggle besides panel selector" with the arrow childs, (base: browser window skin).
- The childs, which are here at the same time the unhovered images, you will find in [Boxes].
- It seems that from the folder .../selector_button only the selector_selected.png is in use; entrys for the other 18 images not found...
- screenshot
(top)
VARIOUS BACKGROUND
[⊗]
Various background:
[Browser Skin] [⊗]
[Browser Skin]
Color =
Padding Left = 1
Padding Top = 1
Padding Right = 1
Padding Bottom = 1
- Small border around the actual HTML page if Paddings are set to 1 px or more.
- It is recommended to set Padding right=0, so the mousecursor works also on the last pixel at the right (of the vertical scrollbar), but hold in mind, that some HTML pages background color may be the same as in your Window skin around the page: no distinction!
- The same happens with the horizontal scrollbars - Padding bottom=0 recommended.
- screenshot
(top)
Various background:
[Notifier Skin] [⊗]
[Notifier Skin]
- Images for the pop-up notifiers; `Finished transfers`, `Arrived messages` and `Blocked pop-ups`, (base: no base).
- Note that the image may overlap a website; probably dark and bright border needed and because no base; round corners not recommended.
- Some users like to have the notifiers without icon (mail/download/blocked popup, but not newsfeed); use `Padding left= -18` or so to hide the icon (the minus-padding depends on the skin). Unfortunately the newsfeed notifier doesn`t displays an icon, so in this case maybe some signs at the left of the message are hidden.
- screenshot
(top)
Various background:
[Cycler Window Skin], [Cycler Skin], [Cycler Button Skin] [⊗]
Since Opera 9
[Cycler Window Skin]
- Background for the window appearing if you press ALT+Pagedown or ALT+Pageup in order to cycle your tabs (base: no base). Besides it is also the whole background for the same but enlarged window, if in Opera:config - User prefs - `Use Thumbnails in Window Cycle` is activated.
- screenshot
-
[Cycler Skin]
- Background only for the middle part of the enlarged cycler window including the part behind the thumbnails at the right (base: Cycler window skin / no base).
- So you are able to set a main background (Cycler Window Skin) and a possibly transparent background for the middle part (Cycler Skin).
- screenshot
-
[Cycler Button Skin]
- I suppose this section is intended for the individual thumbnails background in the Cycler window skin, but there is absolutely no effect (in v9-8501 the background there seems to be taken from the [Selector button skin])!
(top)
Various background:
[Tooltip Skin] [⊗]
Since Opera 9, not used in the standard skin
[Tooltip Skin]
- Background for the thumbnails in the tabs (if Tooltips activated), (base: no base)
- No padding= or margin= possible, but color=, text color=, border=, border color= and `9tile-images` works well for the whole pop-up.
- It is also possible to draw a border around the thumnail image only: in case you defined a color for the pop-up, you can add an image with the additional entries Type=Boxtile and Corner topleft=xy.png. The image must have the size 138x104px, please let 2px above and 2px at the left and then draw a 1px border to the right lower corner, save only the border as alpha channel.
- The normal tooltips which appears with `Tools - Preferences - Advanced - Browsing - Show tooltips ON` you cannot change this way; the colors there are taken from the operating system (in Win it is the color for `Quickinfo`, in Unix you must be able to change the color via Opera:config).
- screenshot
(top)
Various background:
[Thumbnail Widget Skin] [⊗]
Since Opera 9.2 used for the `Tab thumbnails`, but the [Tooltip skin] is still in use for older versions and affects 9.2> too
[Thumbnail Widget Skin]
- Background around the `Tab thumbnails` (base: Tooltip skin / Edit skin / no base)
- Text color= here changes the page title and the address above and below the thumbnail
- If in the `Tooltip skin` section a Border= is defined, you see the border always also in the `Thumbnail widget skin` (outside and in addition if the `Thumbnail widget skin` includes a border too); the border you see if no `Tooltip skin` is defined comes from the `Edit skin`
- screenshot
(top)
Various background:
[Thumbnail Image Skin] [⊗]
Since Opera 9.2 used for the `Tab thumbnails`
[Thumbnail Image Skin]
- In use on the top of the `Tab thumbnails`; transparent on the thumbnail itselfs and as small border around the thumbnail (base: Thumbnail widget skin)
- Transparent on the thumbnail itselfs and as small border around the thumbnail; you cannot change the transparency, except with a transparent image
- There are also the [Thumbnail Image Skin.hover], [Thumbnail Image Skin.disabled] and [Thumbnail Title Button Skin], but I never found the sense of these sections...
- screenshot
(top)
SCROLLBARS
[⊗]
Scrollbars:
[Scrollbar Horizontal Skin] [⊗]
[Scrollbar Horizontal Skin]
- Background images for the horizontal scrollbars, (base: normally no base / but for panels and partly mail views the base is: Edit skin or relatives). So this background must be, otherwise you have empty scrollbars.
- Attention: please use always 9-part-boxtiles (so small as possible) for all scrollbar parts. In W-XP the scrollbars-width is dependent on the used Win-fontsize and it is also possible to change the scrollbars-width individually; in this cases the scrollbars may repeat the images very unsightly (if there are only top/center/bottom-images or if the top/center/bottom-images are to wide)! There are so much skins with this lack!
[Scrollbar Horizontal Knob Skin]
- Images for the horizontal scrollbar knob (base: scrollbar horizontal skin).
[Scrollbar Horizontal Left Skin]
Child0 = Left Arrow
[Scrollbar Horizontal Left Skin.pressed]
Child0 = Left Arrow color
- Images for the horizontal left button in scrollbars and arrow child on top (base: scrollbar horizontal skin). The childs you will find in [Boxes] .
- With Margins in [Scrollbar horizontal left Skin] you can center the arrow child.
[Scrollbar Horizontal Right Skin]
Child0 = Right Arrow
[Scrollbar Horizontal Right Skin.pressed]
Child0 = Right Arrow color
- Images for the horizontal right button in scrollbars and arrow child on top (base: scrollbar horizontal skin). The childs you will find in [Boxes].
- With Margins in [Scrollbar horizontal right Skin] you can center the arrow child.
- screenshot
(top)
Scrollbars:
[Scrollbar Vertical Skin] [⊗]
[Scrollbar Vertical Skin]
- Background images for the vertical scrollbars, (base: normally no base / but for panels and partly mail views base is: Edit skin or relatives). So this background must be, otherwise you have empty scrollbars.
- Attention: please use always 9-part-boxtiles (so small as possible) for all scrollbar parts. In W-XP the scrollbars-width is dependent on the used Win-fontsize and it is also possible to change the scrollbars-width individually; in this cases the scrollbars may repeat the images very unsightly (if there are only top/center/bottom-images or if the top/center/bottom-images are to wide)! There are so much skins with this lack!
[Scrollbar Vertical Knob Skin]
- Images for the vertical scrollbar knob (base: scrollbar vertical skin).
[Scrollbar Vertical Up Skin]
Child0 = Up Arrow
[Scrollbar Vertical Up Skin.pressed]
Child0 = Up Arrow color
- Images for the vertical up button in scrollbars and arrow child on top (base: scrollbar vertical skin). The childs you will find in [Boxes].
- With Margins in [Scrollbar Vertical Up Skin] you can center the arrow child.
[Scrollbar Vertical Down Skin]
Child0 = Down Arrow
[Scrollbar Vertical Down Skin.pressed]
Child0 = Down Arrow color
- Images for the vertical down button in scrollbars and arrow child on top (base: scrollbar vertical skin). The childs you will find in [Boxes].
- With Margins in [Scrollbar Vertical Down Skin] you can center the arrow child.
- screenshot
(top)
EDIT FIELDS [⊗]
Edit fields:
[Edit Skin] [⊗]
[Edit Skin]
Color = Window
[Edit Skin.disabled]
Clone = Edit Skin
Color = Window disabled
- Background images and color for all Searchfields (but not Dropdownfields), (base: depends on the toolbar).
- Because the inner part of most edit-fields comes from the Operating system and can't be changed trough the skin.ini, it's strongly recommended to set all edit-things here as clone of the Edit skin or to 'Color=Window' and 'Color=Window disabled'. So the whole fields are displayed in the same color, based on the OS-color for a window and for windowtext and the same but disabled!
- Please note that all the other edit-things here depends on the Edit skin.
- Note also: most sort of edit fields may be displayed in webpages.
- For disabled text color you can use also: `Text color=Window disabled`.
- screenshot
(top)
Edit fields:
[Edit Search Skin] [⊗]
- Not in use in the standard skin
- Background images (color) for all the search fields (but not the searchfields with dropdown at the right).
- Note: unfortunately no `Padding=` possible
- If this section not exists, here you see the [Edit skin].
(top)
Edit fields:
[Treeview Skin] [⊗]
[Treeview Skin]
Clone = Edit Skin
[Treeview Skin.disabled]
Clone = Edit Skin.disabled
- Background images (color) for Treeviews, e.g. All Treeviews in panels (but not Search- and Info-panel), also all Treeviews in Preferences and so on, (base: 'Hotlist skin' for panels but 'Dialog page skin' for Dialogs and Preferences and so on).
- screenshot
(top)
Edit fields:
[Listbox Skin] [⊗]
[Listbox Skin]
Clone = Edit Skin
[Listbox Skin.disabled]
Clone = Edit Skin.disabled
- Background images (color) for Listboxes, e.g. New account wizard or partly Contact properties, (base: 'window' from Operating System).
- screenshot
(top)
Edit fields:
[Multilineedit Skin] [⊗]
[MultilineEdit Skin]
Clone = Edit Skin
[Multilineedit Skin.disabled]
Clone = Edit Skin.disabled
- Background images (color) for Multilineeditfields, e.g. partly Notes panel or partly contact properties and so on, (base: 'Hotlist skin' for partly notes panel and 'Dialog page skin' for partly contact properties and so on).
- screenshot
(top)
DROPDOWN FIELDS
[⊗]
Dropdown fields:
[Dropdown Skin] [⊗]
[Dropdown Skin]
Clone = Edit Skin
[Dropdown Skin.disabled]
Clone = Edit Skin.disabled
- Outer background images (color) for Dropdownfields, also around the down button in a Dropdownfield, but not the inner part with the text, e.g. addressfield or find in page search, (base: depends on the toolbar).
- Appears also in Webpages
- Because it's the whole part around the text and buttons in such a field, it's recommended to use a clone of 'Edit skin'.
- In the Opera 9 previews and betas we had a seesaw about the Dropdown skin. The difficulties seems to be settled now, but it is possible that we have some differences between 8 and 9, perhaps that needs your attention... . For further information see SkinINIChanges
- For the placement of the background behind the fraud protection icons inside the addressfield, you have to use padding top/left/bottom/right here. For the placement of such icons on the background itselfs you have to deal with paddings for the Low security button skin
- screenshot
(top)
Dropdown fields:
[Dropdown Search Skin] [⊗]
Not used in the standard skin, but works fine
[Dropdown Search Skin]
- Outer background images (color) for searchfields which have a dropdown arrow at the right, e.g.: `Quick search` or `Google search`, (base: depends on the toolbar).
- If not defined you see here the `Dropdown skin`, see also the comments for the [Dropdown Skin] above.
- screenshot
(top)
Dropdown fields:
[Dropdown Button Skin] [⊗]
[Dropdown Button Skin]
Child0 = Down Arrow
[Dropdown Button Skin.pressed]
Child0 = Down Arrow
- Down button in a dropdown field and arrow child on top (base: dropdown skin or dropdown search skin)
- The childs you find in [Boxes] .
- With Margins in [Dropdown Button Skin] you can center the arrow child.
- Appears also in Webpages
- screenshot
(top)
ADDRESS FIELD
[⊗]
Address field:
[Low Security Button Skin], [Security Button Skin] [⊗]
Since Opera 9
[Low Security Button Skin]
[Low Security Button Skin.hover]
- In the addressfield at the right as background behind the security-button (padlock) and the page title, grey for sites using an encrypted connection, but have a low security rating (base: Dropdown skin).
- Please use `Colorize=0`, so this important security item is displayed always in the same color! It's quasi standard to draw this thing in grey!
- Since Opera 9.1 and it`s fraud protection extension, this background is drawed as 9-part boxtile image and you can see it also behind the fraud protection icons in the addressfield, appears with the i- and ?-icon. For the placement of the fraud protection icons inside this background, you have to deal with padding top/left/bottom/right here. For the placement of the background itselfs inside the addressfield, you have to use padding top/left/bottom/right for the Dropdown skin .
- screenshot
[Security Button Skin]
[Security Button Skin.hover]
- The same as above for the [Low Security Button Skin], but yellow, appears certficate related and indicates a secure site (base: Dropdown skin).
- Please use `Colorize=0`, so this important security item is displayed always in the same color! It's quasi standard to draw this thing in yellow!
- screenshot
(top)
Address field:
[Untrusted Site Security Button Skin] [⊗]
Since Opera 9.1
[Untrusted Site Security Button Skin]
[Untrusted Site Security Button Skin.hover]
- In the addressfield at the right as background behind the fraud protection icon, appears with the !-icon and means: attention! (base: Dropdown skin).
- Please use `Colorize=0`, so this important security item is displayed always in the same color! It's quasi standard to draw this thing in red, according to the [Security button skin] in yellow and the [Low security button skin] in grey!
- screenshot
(top)
SPECIAL PROGRESS ITEMS
[⊗]
Special Progress items:
[Progress Empty Skin] [⊗]
[Progress Empty Skin]
- General images for all progress parts - normal, (base: depends). To see on the Progress bar if `Show inside address bar`, if `Pop-up at bottom` or if `Simple`, but also on other places, e.g. Transfers panel and so on.
- screenshot
(top)
Special Progress items:
[Progress Full Skin] [⊗]
[Progress Full Skin]
- General images for some progress parts - completed or in progress, (base: depends). To see on top of the `Progress Empty Skin` at least for the parts `Progress Document Skin` and `Progress Total Skin`.
- screenshot
(top)
Special Progress items:
[Progress ... Skin] [⊗]
[Progress Document Skin]
[Progress Total Skin]
[Progress Images Skin]
[Progress Speed Skin]
[Progress Elapsed Skin]
[Progress Status Skin]
[Progress Clock Skin]
- Individual sections for the single progress parts, (base: depends).
- If the `Progress Empty Skin` and `Progress Full Skin` are defined and all parts should have the same look, you have to define the following sections as clones of the `Progress Empty Skin`: [Progress Images Skin], [Progress Speed Skin], [Progress Elapsed Skin], [Progress Status Skin] and [Progress Clock Skin]; for all these parts theoretically you can have different settings.
- But the [Progress Document Skin] and [Progress Total Skin] displays in each case the `Progress Empty Skin` as base and on top the `Progress Full Skin` if in progress or completed, even if the individual section titles are not set.
- If you like to have individual images/color/text color for [Progress Document Skin] and [Progress Total Skin], you must set first the section title [Progress Empty Skin] but without any settings there, and then you have to define individual settings for [Progress Document Skin] and [Progress Total Skin] (as well as for the other individual progress parts). But hold in mind: the `Progress Full Skin` used on top for the [Progress Document Skin] and [Progress Total Skin] is in each case the same; for `full` are no individual settings possible!
- Note that the clock is also a Progress-section.
- Note: there is no individual `[Progress simple skin]`, the images therefor are taken in each case from the `Progress Empty Skin` and `Progress Full Skin`.
- screenshot
(top)
SPECIAL CHAT STATUS
[⊗]
Special chat status:
[Status Title Skin] [⊗]
[Status Title Skin]
(top)
SPECIAL DROP INSERTS
[⊗]
Special Drop inserts:
[Vertical Drop Insert], [Horizontal Drop Insert] [⊗]
[Vertical Drop Insert]
[Horizontal Drop Insert]
- Image appears if you drag something; helps to aim, (base: depends).
- screenshot
(top)
SPECIAL SPEEDDIAL
[⊗]
Special Speeddial:
[Speed Dial Widget Skin] [⊗]
Since Opera 9.2
[Speed Dial Widget Skin]
- Background for the entire speeddial tab, (base: no base)
- Text color= here changes in general the titles below the thumbs and the titles for `What is...` and `Hide Speed...`, as well as the text and the link in the speeddial tooltip
- If no text color is defined, the colors coming from the `Window skin` in general and individual from the `Toolbar button skin` for `What is...` and `Speed...` (see also Help tooltip skin)
- screenshot
(top)
Special Speeddial:
[Speed Dial Search Widget Skin] [⊗]
Since Opera 9.2
[Speed Dial Search Widget Skin]
- Background area around the searchfield at the top of the speeddial tab, (base: Speed Dial Widget Skin)
- Padding top/bottom works well, but padding left/right have no effect; the background have always the same width as 3 thumbnails together
- For the search button, the [Push button skin] is in use
- Besides: you can change the search engine or disable the speeddial search in Tools - Preferences - Search - Edit - Details; if disabled, the speeddial search widget disappears completely
- screenshot
(top)
Special Speeddial:
[Speed Dial Thumbnail Widget Skin] [⊗]
Since Opera 9.2
[Speed Dial Thumbnail Widget Skin]
- Background around the UNUSED thumbs, (base: Speed dial widget skin)
- Text color= inside this section changes the page title below the thumbs
[Speed Dial Thumbnail Widget Skin.selected]
- Background around the USED thumbs and if selected for Edit/Customize, (base: Speed dial widget skin)
- Text color= here have no effect (is taken from `Speed dial thumbnail widget skin` / `Speed dial widget skin`)
- screenshot
(top)
Special Speeddial:
[Speed Dial Thumbnail Image Skin] [⊗]
Since Opera 9.2
[Speed Dial Thumbnail Image Skin]
- Background for the unused thumbs as well as (with transparency here) on the top of the used thumbs and as small border there, (base: Speed dial thumbnail widget skin / the thumbs)
- You cannot change the transparency, except with a transparent image
[Speed Dial Thumbnail Image Skin.hover]
- Background for the unused thumbs if hover, and as small border around the used thumbs if hover (on the top of a hovered thumb it seems to be full transparent), (base: Speed dial thumbnail image skin / the thumbs)
[Speed Dial Thumbnail Image Skin.pressed]
- Background for the unused thumbs if pressed, and as small border around the used thumbs if pressed, (base: Speed dial thumbnail image skin / the thumbs)
- Makes not a big sense for the short `pressed-moment`
- There are also the sections [Speed Dial Thumbnail Image Skin.disabled] and [Speed Dial Thumbnail Title Button Skin], but I never found the sense of them...
- screenshot
(top)
Special Speeddial:
[Speed Dial Thumbnail Close Button Skin] [⊗]
Since Opera 9.2
[Speed Dial Thumbnail Close Button Skin]
Child = Speeddial Close
- Defines the close button on the top right of each speeddial thumbnail and on the speeddial configure dialog, (base: Speed dial thumbnail widget skin)
- Note the child, defined in the section [Boxes]
[Speed Dial Thumbnail Close Button Skin.hover]
Child = Speeddial Close Hover
- Defines the close button if hover on the top right of each speeddial thumbnail and on the speeddial configure dialog, (base: Speed dial thumbnail close button skin)
- Note the child, defined in the section [Boxes] (button image name without dot!)
- screenshot
(top)
Special Speeddial:
[Speed Dial Configuration Dialog Skin] [⊗]
Since Opera 9.2
[Speed Dial Configuration Dialog Skin]
- Outer background for the speeddial configure dialog, including the shadow at the left and bottom, (base: nothing - full transparent)
- Appearing if rightclick a thumb or click on an empty `thumb`
[Speed Dial Configuration Dialog No Alpha Skin]
- The same as above, but "for systems that don't support alpha transparent windows" (no shadow at the left and bottom here), (base: nothing - full transparent, I think...)
- screenshot
(top)
Special Speeddial:
[Speed Dial Configuration Dialog Page Skin] [⊗]
Since Opera 9.2
[Speed Dial Configuration Dialog Page Skin]
- Inner background for the speeddial configure dialog, (base: Speed dial configuration dialog skin / nothing - full transparent)
- screenshot
(top)
Special Speeddial:
[Speed Dial Configuration Dialog Button Border Skin] [⊗]
Since Opera 9.2
[Speed Dial Configuration Dialog Button Border Skin]
- The area around the push buttons inside the speeddial configure dialog (Ok, Cancel), (base: Speed dial configuration dialog skin / nothing - full transparent)
- Paddings= works well, but color or images here have no effect
- You can use Padding top= to move down/up the buttons
(top)
Special Speeddial:
[Help Tooltip Skin] [⊗]
Since Opera 9.2
[Help Tooltip Skin]
- Background for the Help tooltip (click `What is Speed Dial`), (base: nothing - full transparent)
- Text color= here changes the text color, as well as the title color for the `More`-link
- If Text color= is not defined, the colors coming from the `Speed Dial Widget Skin` (text) and from the `Link button skin` (more-link), (see also Speed dial widget skin)
- screenshot
(top)
Special Speeddial:
[Help Tooltip Close Button Skin] [⊗]
Since Opera 9.2
[Help Tooltip Close Button Skin]
Child0 = Speeddial Close
- Defines the close button on the speeddial tooltip, (base: Help tooltip skin / nothing - full transparent)
- Note the child, defined in the section [Boxes]
[Help Tooltip Close Button Skin.hover]
Child0 = Speeddial Close Hover
- Defines the close button on the speeddial tooltip if hover, (base: Help Tooltip Close Button Skin)
- Note the child, defined in the section [Boxes] (button image name without dot!)
- screenshot
(top)
BUTTONS
[⊗]
Pagebar/Tab buttons:
[Pagebar Button Skin] [⊗]
[Pagebar Button Skin]
[Pagebar Button Skin.hover]
[Pagebar Button Skin.selected]
[Pagebar Button Skin.pressed]
[Pagebar Button Skin.attention]
[Pagebar Button Skin.hover.attention]
- General normal tabs in the pagebar and it`s different possible states; .hover, .selected, .pressed, .attention (for unread) and .hover.attention (for hovered unread), (base: Pagebar skin).
- Here you cannot combine .selected with another state (e.g. .selected.hover or .selected.pressed is not possible)
- In case you define Text bold = 1 for .selected, the tab title switches to normal text if you drag the selected tab to another position; little bit buggy (thanks to Gingerbread Guy)
- screenshot
[Pagebar Button Skin.top]
[Pagebar Button Skin.top.hover]
[Pagebar Button Skin.top.selected]
[Pagebar Button Skin.top.pressed]
[Pagebar Button Skin.top.attention]
[Pagebar Button Skin.top.hover.attention]
- Individual tabs for the pagebar if at top, otherwise the [Pagebar Button Skin] is in use, (base: Pagebar skin/Pagebar skin.top).
- screenshot
[Pagebar Button Skin.left]
[Pagebar Button Skin.left.hover]
[Pagebar Button Skin.left.selected]
[Pagebar Button Skin.left.pressed]
[Pagebar Button Skin.left.attention]
[Pagebar Button Skin.left.hover.attention]
- Individual tabs for the pagebar if at left, otherwise the [Pagebar Button Skin] is in use, (base: Pagebar skin/Pagebar skin.left).
- screenshot
[Pagebar Button Skin.bottom]
[Pagebar Button Skin.bottom.hover]
[Pagebar Button Skin.bottom.selected]
[Pagebar Button Skin.bottom.pressed]
[Pagebar Button Skin.bottom.attention]
[Pagebar Button Skin.bottom.hover.attention]
- Individual tabs for the pagebar if at bottom, otherwise the [Pagebar Button Skin] is in use, (base: Pagebar skin/Pagebar skin.bottom).
- Hanging tabs at the bottom needs additional images.
- screenshot
[Pagebar Button Skin.right]
[Pagebar Button Skin.right.hover]
[Pagebar Button Skin.right.selected]
[Pagebar Button Skin.right.pressed]
[Pagebar Button Skin.right.attention]
[Pagebar Button Skin.right.hover.attention]
- Individual tabs for the pagebar if at right, otherwise the [Pagebar Button Skin] is in use, (base: Pagebar skin/Pagebar skin.right).
- screenshot
(top)
Pagebar/Tab buttons:
[Pagebar Close Button Skin] [⊗]
[Pagebar Close Button Skin]
[Pagebar Close Button Skin.hover]
[Pagebar Close Button Skin.pressed]
[Pagebar Close Button Skin.selected]
[Pagebar Close Button Skin.selected.hover]
[Pagebar Close Button Skin.pressed.selected]
- Close buttons inside pagebar tabs, (base: Pagebar button skin). Only visible if 'Show close button on each tab' is On in Tools - Preferences - General.
- Note that you cannot have seperate/individual buttons for hanging tabs at the bottom or for other tab positions; e.g. [Pagebar Close Button Skin.bottom] works not!
- With the path to a nonexistant image and Margin bottom = -50 or more for the [Pagebar Close Button Skin] and .hover and .pressed, but apart from that the same margins like on [Pagebar close button skin.selected], you see the Close button only on the selected tab. For instance:
[Pagebar Close Button Skin]
Margin Top = 0
Margin Left = 0
Margin right = 0
Margin Bottom = -50
Tile center = NONE.png
[Pagebar Close Button Skin.hover]
Clone = Pagebar Close Button Skin
[Pagebar Close Button Skin.pressed]
Clone = Pagebar Close Button Skin
(top)
Pagebar/Tab buttons:
[Pagebar Locked Button Skin] [⊗]
Since Opera 9
[Pagebar Locked Button Skin]
- Appears at the right of a pagebar tab if the tab is locked (instead of the close button mentioned above).
- In the original it`s a locked padlock. Please use the same image size as for the [Pagebar close button skin] and if you are using also the same paddings, margins and so on, you have no problems.
- Unfortunately Opera dim`s the image, so you are forced to take image colors with a high contrast to the tab. If the tabs for normal/selected differs to much, you can use in addition [Pagebar locked button skin.selected] with a different image.
- screenshot
(top)
Pagebar/Tab buttons:
[Tab Button Skin] [⊗]
[Tab Button Skin]
[Tab Button Skin.hover]
[Tab Button Skin.selected]
- Tabs outside the pagebar, e.g. Appearance dialog or Contact properties, (base: Tabs skin).
- Mostly a clone of the Pagebar button skin.
- Note also the possibility for 'Center tabs=1' in [Options].
- screenshot
About the missing network tab, Since Opera 9
- In Opera 9 we have the Site preferences dialog (rightclick in a page and choose `Edit site preferences`). Some users complained about the disappearing network tab there with several skins. The solution:
- The network tab at the right disappears if the amount of margins and paddings left and right for the [Tab button skin] is to big. Possibly you have to count also the margins or paddings for the [Tabs skin] and remember also the entry Center tabs = 1 or 0 in [Options].
- Unfortunately it is not on each computer the same effect; perhaps you see the tab, but with another machine the tab disappears. As a rule of thumb you can take: if you see enough space at the right for one and a half tabs more, your skin is alright. But if there is only space for about one tab or less, it is better to reduce the paddings and margins mentioned above. With Opera 9-8501 the tabs for the `Edit site preferences` dialog are: General, Cookies, Content, Display, Scripting and Network.
- Please note also: the [Tab button skin] may change your pagebar tabs (see below) as well as: [Tab button skin] and [Tabs skin] changes the view of all dialog-tabs and the area around.
- If your [Tab button skin] is not cloned or a clone of the [Pagebar button skin] you have only to change the mentioned paddings and margins, but if it is in reverse order, [Pagebar button skin] is a clone of the [Tab button skin], you have to work a little bit more (or thinking about to change the clone order).
- screenshot
(top)
Toolbar buttons:
[Toolbar Button Skin] [⊗]
[Toolbar Button Skin]
[Toolbar Button Skin.disabled]
[Toolbar Button Skin.hover]
[Toolbar Button Skin.pressed]
[Toolbar Button Skin.selected]
[Toolbar Button Skin.selected.hover]
[Toolbar Button Skin.attention]
- Area around all small icons, (base: depends).
- .attention is used for example if a popup is blocked.
- screenshot
- In this section you can use 'Text Zoom=1' (Default is 0), which produces hidden button titles, but the title appears only if you touch the button with the mouse. This effect works only on condition that:
- 1) The Operating System is W-XP or W-2000.
- 2) 'Special effects' is enabled in Appearance - Skin.
- 3) 'Images and text below' is enabled in Appearance - Toolbars for the current toolbar.
- 4) The section [Toolbar button skin] must include the entry 'Text Zoom=1'.
- It works for small and large buttons in all toolbars, but the normal 'Images and text below' is no longer possible together with enabled 'Special effects'. Note also: it is not necessary to set 'Text Zoom=1' separately for the [Toolbar button skin.large].
Used in older versions, but still works fine:
[Toolbar Button Skin.large]
[Toolbar Button Skin.large.disabled]
[Toolbar Button Skin.large.hover]
[Toolbar Button Skin.large.pressed]
[Toolbar Button Skin.large.selected]
[Toolbar Button Skin.large.selected.hover]
[Toolbar Button Skin.large.attention]
- Area around all large icons, (base: depends).
- 'Large Images=1' should be in [Options].
- screenshot
(top)
Personal link buttons:
[Link Button Skin] [⊗]
[Link Button Skin]
[Link Button Skin.hover]
[Link Button Skin.pressed]
- Area around the Bookmarks visited/unvisited buttons in the personal bar, (base: personalbar skin).
- Note that Opera resizes .large icons/buttons here to 16x16 px (?).
- screenshot
(top)
Push buttons:
[Push Button Skin], [Push Default Button Skin] [⊗]
[Push Button Skin]
[Push Button Skin.disabled]
[Push Button Skin.pressed]
- Images for the Push buttons in dialogs, e.g. Ok/Cancel/Apply/Help or in the Appearance dialog, (base: dialog skin).
- May be displayed also inside webpages - I think it's necessary to have dark text on bright background.
- Size not variable, and a little bit strange: position partly changeable with the [Dialog button border skin] (the shadows around the push buttons).
- screenshot
[Push Default Button Skin]
[Push Default Button Skin.disabled]
[Push Default Button Skin.pressed]
- Images for the Push button which is recommended as default, (base: dialog skin).
- May be displayed also inside webpages - probably necessary to have dark text on bright background.
- Size not variable, and strange: position partly changeable with the [Dialog button border skin] (the shadows around the push buttons).
- screenshot
(top)
Panel selector buttons:
[Selector Button Skin] [⊗]
[Selector Button Skin]
[Selector Button Skin.hover]
[Selector Button Skin.selected]
[Selector Button Skin.attention]
[Selector Button Skin.hover.attention]
- Area around the icons/text in the Panel selector ";Bookmarks/Notes/Transfers...", (base: Hotlist selector skin / Hotlist skin).
- .attention is used to indicate arrived mails/news/transfers (if no such panel is open).
- If hovering produces a delay here: see comments for [Hotlist splitter skin] .
- screenshot
(top)
Browser menu buttons:
[Menu Button Skin]
[Menu Button Skin]
[Menu Button Skin.hover]
[Menu Button Skin.selected]
- Area around the menutitles for the main menu bar at top "File/Edit/View...", (base: browser window skin).
- Padding left/right doesn`t concerns the caption buttons at the right if `Show close buttons on each tab` is OFF in Preferences - General. But Paddings top/bottom changes also the caption buttons!
- Note also that if `Show close buttons on each tab`is ON, the `Window Document Icon` at the left and it`s menu doesn`t appears and at the right also the old caption buttons disappears.
- No individual "Menubar Skin" or so available; the only way to change something in the [Menu Button Skin] are the paddings, no margins, no spacing, (base is: browser window skin).
- screenshot
(top)
Caption buttons:
[Caption Button Skin] [⊗]
[Caption Button Skin]
[Caption Button Skin.pressed]
- Button-base images for the caption buttons in the main menu bar at the top right, if 'Show close buttons on each tab' is Off, (base: browser window skin).
[Caption Minimize Button Skin]
Clone = Caption Button Skin
Child0 = Caption Minimize
[Caption Minimize Button Skin.pressed]
Clone = Caption Button Skin.pressed
Child0 = Caption Minimize
[Caption Restore Button Skin]
Clone = Caption Button Skin
Child0 = Caption Restore
[Caption Restore Button Skin.pressed]
Clone = Caption Button Skin.pressed
Child0 = Caption Restore
[Caption Close Button Skin]
Clone = Caption Button Skin
Child0 = Caption Close
[Caption Close Button Skin.pressed]
Clone = Caption Button Skin.pressed
Child0 = Caption Close
- Images for the caption buttons with Child on top, (base: browser window skin).
- The childs you will find in [Boxes] .
- No .hover possible.
- screenshot
(top)
Radio buttons:
[Radio Button Skin] [⊗]
[Radio Button Skin]
Type = Box
Tile Center =
Width = 14
Height = 14
Colorize = 1
[Radio Button Skin.selected]
- Images for the radiobuttons, e.g in Preferences - On/Off, (base: depends).
- May be displayed in webpages.
- Note: type, width/height and colorize.
- Note also that in [Images] you find the entry 'Bullet=' with the same .png; that's for the radiobuttons in menus, probably you have to set the same colorize-state.
- Strange and buggy behaviour (at least since v7.5): Margin left= does not works (and default seems to be 0) if a radio button is defined by the button-type `Radiobutton` (toolbar.ini); very unsightly if a radio button is the first item on a toolbar, but also between other buttons!
- screenshot
(top)
Checkbox buttons:
[Checkbox Skin] [⊗]
[Checkbox Skin]
Type = Box
Tile Center =
Width = 14
Height = 14
Colorize = 1
[Checkbox Skin.selected]
- Images for the checkboxes, e.g in Preferences - checked/not checked, (base: depends).
- May be displayed in webpages.
- Note: type, width/height and colorize.
- Note also that in [Images] you find the entry 'Checkmark=' with the same .png; that's for the checkboxes in menus, probably you have to set the same colorize-state.
- Strange and buggy behaviour (at least since v7.5): Margin left= does not works (and default seems to be 0) if a checkbox is defined by the button-type `Checkbox` (toolbar.ini); very unsightly if a checkbox is the first item on a toolbar, but also between other buttons!
- screenshot
(top)
Identify as button:
[Identify as Skin] [⊗]
Used in older versions, but still works fine:
[Identify as Skin]
- Individual images for the Ìdentify as toggle - text button (base: depends).
- No .hover and so on possible.
- If the entry doesn't exists, there would be a only-text button.
- screenshot
(top)
Header buttons:
[Header Button Skin]
[Header Button Skin]
[Header Button Skin.pressed]
- Column header, e.g. visible in transfers/mail page or in preferences, (base: normally the Edit skin and relatives).
- screenshot
(top)
Box and Image buttons:
Parameters [⊗]
- Parameters for single image-entrys in [Boxes] and [Images]: .../xy.png,1,2,3,4,5
- 1: Colorize 0/1
- 2: Margin left in pixels
- 3: Margin top in pixels
- 4: Margin right in pixels
- 5: Margin bottom in pixels
- Margins here results in space around the single image only (title not included).
- Each entry inside a normal [...]-section is also a parameter (apart from the image-entrys).
- Please note, that you can't use the same image (same .png with the same path) several times with different parameters; in use are always the parameters from the image loaded first! That must not be the first or last section/entry found in the skin.ini! This is also valid for images called from own [...]-sections; especially with `Colorize=0/1` perhaps you wonder why it won't work in some cases; that's the reason.
- Default colorize in [Boxes] and [Images] is 0. In all other sections it's 1.
- All single images for buttons you can use also with .large; calling large images the skin contains. If you do so, don't forget to set 'Large images=1' in [Options]. Large button images are used in older versions, but they still works fine.
- Some icons appears also in other places than mentioned below (and some explains itselfs).
- screenshot
(top)
Box buttons:
[Boxes] [⊗]
[Boxes]
- The general section title for single image-entrys with the type `Box`.
Close = icons/panel_collapse_small.png
Caption Minimize = caption/minimize.png
Caption Restore = caption/restore.png
Caption Close = caption/close.png
- Different Childs for Caption buttons.
Dropdown = icons/dropdown.png
- Dropdown arrow at the right of some buttons.
- Margins here are very strange to handle; it seems that Opera adds the margins for left and right and then it centers the image. Knowing this and adding some invisible extra space in the dropdown image can help.
Left Arrow = scrollbar/left.png
Right Arrow = scrollbar/right.png
Up Arrow = scrollbar/up.png
Down Arrow = scrollbar/down.png
- Childs for Scrollbar arrow buttons and Dropdown buttons.
Panel Toggle Skin.left = panel_toggle/left.png
Panel Toggle Skin.right = panel_toggle/right.png
Panel Toggle Skin.top = panel_toggle/top.png
Panel Toggle Skin.bottom = panel_toggle/bottom.png
- Unhovered images for the different Panel toggles, at the same time this images are the childs for the hovered images in [Panel toggle skin. ... .hover].
RSS = buttons/rss.png
- Rss icon, appears inside addressfield.
- Note: since Opera 9 the `Rss` entry calls the new `feed.png`!
Speeddial Close = speeddial/speeddial-close.png
Speeddial Close Hover = speeddial/speeddial-close-hover.png
- Since Opera 9.2, the Close icon (used as child) which appears inside speeddial widgets and in the speeddial help tooltip.
(top)
Image buttons:
[Images] [⊗]
[Images]
- The general section title for single image-entrys with the type `Image`.
Window Browser Icon = icons/opera.png
- The O, used for Operas Web mail and ?
Window Hotlist Icon = buttons/panels.png
Window Mail View Icon = icons/mail_unread.png
- Used in tabs for unread mails view.
Window Mail Compose Icon = icons/drafts.png
- Used in tabs and panel for mail drafts view.
Window Document Icon = icons/page.png
Window Document Unread Icon = icons/page_unread.png
Window Document Loading Icon = icons/page_loading.png
- Used in tabs if Favicons Off (`...loading icon` appears also with Favicons On).
- The Window document icons appearing also in the addressfield and in the Windows panel, as well as in the browser menu bar if 'Show Close on each tab' is Off.
- The `Window Document Loading Icon.attention` and .hover.attention you can use as indicator for reloading by `Reload every...` (appears only on the tabs).
Window Chat Room Icon = icons/chat.png
Window Chat Private Icon = icons/chat.png
;---Comments for entrys below
Panel Search = buttons/search.png
Panel Bookmarks = buttons/bookmarks.png
Panel Mail = buttons/mail.png
Panel Mail.attention = buttons/mail_attention.png
Panel Contacts = buttons/contacts.png
Panel History = buttons/history.png
Panel Transfers = buttons/transfers.png
Panel Transfers.attention = buttons/transfers_attention.png
Panel Links = buttons/links.png
Panel Windows = buttons/windows.png
Panel Info = buttons/properties.png
Panel Notes = buttons/notes.png
Panel Chat = buttons/chat.png
;---Since Opera 9:
Panel Widgets = buttons/widget.png
;
- Used in the panel selector.
- .attention is used if new mails/news or transfers arrived.
Wand Dialog = buttons/wand.png
Wand Match Dialog = buttons/wand.png
;---Comment for entrys below
Dialog Warning = dialog_images/warning.png
Dialog Error = dialog_images/error.png
Dialog Question = dialog_images/question.png
Dialog Info = dialog_images/info.png
Dialog Stop = dialog_images/stop.png
- Used for Error- and other messages.
- Since Opera 9: some dialog-images appears now in the new `Error console`; in a reduced size.
- The image Dialog Stop exists since Opera 9.1. During the preview phase it was for a short time in use for the fraud protection warning (called from the warning.css). Now there the old Dialog Warning-image is called, but perhaps the Dialog Stop is also in use in other circumstances.
First Time Setup Dialog = dialog_images/opera.png
Startup Dialog = dialog_images/opera.png
- The big O, used in Startup- and First time setup-dialog.
Back = buttons/back.png
Forward = buttons/forward.png
Rewind = buttons/rewind.png
Fast Forward = buttons/fast_forward.png
Reload = buttons/reload.png
Stop = buttons/stop.png
Go to homepage = buttons/home.png
;---Comment for entrys below
View hotlist = buttons/panels.png
Panels = buttons/panels.png
- Used for Panels On/Off button and so on.
Print document = buttons/print.png
Enter Fullscreen = buttons/full_screen.png
Enable mediumscreen mode = buttons/fit_width.png
Find = buttons/search.png
Tile vertically = buttons/tile.png
Cascade = buttons/cascade.png
New page = buttons/new_page.png
Close page = icons/panel_collapse_small.png
Open document = buttons/folder_open.png
Save document = buttons/save.png
;---Comment for entrys below
Wand = buttons/wand.png
Wand.disabled = buttons/wand_disabled.png
- Here .disabled is used for better distinction.
Read mail = buttons/mail.png
Save link address = buttons/save.png
Lock panel = buttons/lock.png
Go to page = icons/bookmark.png
Top10 = buttons/top10.png
;---Since Opera 9:
Add widget = buttons/new_page.png
Remove widget = buttons/delete.png
Widget = buttons/widget.png
;
;---Comment for entrys below
;---Since Opera 9:
Highlight bookmark = buttons/highlight_bookmark.png
Missing bookmark = buttons/missing_bookmark.png
;
- The new entries `Highlight bookmark` and `Missing bookmark` are not in use in Opera 9-8501 (that was the star in the addressfield during some Opera 9 preview versions).
- But: the `Notes` icon still appears in the addressfield if something from the current page is copied to notes.
Account POP = icons/mail_unread.png
Account IMAP = icons/mail_unread.png
Account News = icons/news_unread.png
Account Import = icons/received.png
Account Operamail = icons/opera.png
Account IRC = icons/chat.png
Enable display images = buttons/images_all.png
Display cached images only = buttons/images_cached.png
Disable display images = buttons/images_none.png
;---Comment for entrys below
No Security = buttons/security_0.png
Low Security = buttons/security_1.png
Medium Security = buttons/security_2.png
High Security = buttons/security_3.png
- For this important security-icons please use significant images and the digits 1, 2 and 3 for low-, medium- and high-security levels.
;---Since Opera 9.1:
Trust Information = buttons/trust_info.png
Trust Unknown = buttons/trust_unknown.png
Trust Fraud = buttons/trust_fraud.png
- Please use i, ? and ! as icons for these important fraud protection indicators. Suggestion: i=green, ?=yellow and !=red.
Select author mode = buttons/page.png
Select user mode = buttons/contacts.png
Show print preview as screen = buttons/print.png
Show print preview one frame per sheet = buttons/print.png
New Bookmark = buttons/new_bookmark.png
New Contact = buttons/new_contact.png
New Folder = buttons/new_folder.png
View = buttons/view.png
Delete = buttons/delete.png
Save = buttons/save.png
Edit properties = buttons/properties.png
Add to bookmarks = buttons/new_bookmark.png
Add link to bookmarks = buttons/new_bookmark.png
List chat rooms = buttons/chat_rooms.png
New chat room = buttons/new_chat_room.png
Join chat room = buttons/go.png
Change nickname = buttons/change_nick.png
Add Contact = buttons/new_contact.png
Compose mail = buttons/compose.png
Reply = buttons/reply.png
Reply All = buttons/reply_all.png
Forward mail = buttons/forward_mail.png
Delete mail = buttons/delete.png
Send mail = buttons/send.png
Send queued mail = buttons/send.png
Add Attachment = buttons/attach.png
Get mail = buttons/check.png
Get and send mail = buttons/check_send.png
Stop mail = buttons/stop.png
Stop sending mail = buttons/stop.png
Mark as read = buttons/read.png
Mark as spam = buttons/spam.png
Mark as not spam = buttons/nospam.png
Undelete = buttons/reload.png
Save draft = buttons/save.png
View messages from contact = buttons/mail.png
Resume transfer = buttons/go.png
Stop transfer = buttons/stop.png
Restart transfer = buttons/reload.png
Send text in mail = buttons/compose.png
Send file = buttons/transfers.png
Who is = buttons/search.png
Open Link = buttons/go.png
Spell check = buttons/spell_check.png
;---Since Opera 9
Open widget = buttons/go.png
Close widget = buttons/stop.png
;
Set label = buttons/label.png
Session = icons/page.png
Copy Mail To = buttons/move_to.png
;---Comment for entrys below
Panel Collapse Small = icons/panel_collapse_small.png
Panel Collapse Left = icons/panel_collapse_left.png
Panel Collapse Right = icons/panel_collapse_right.png
Sort descending = icons/dropdown.png, 0, 2, 0, 2, 0
Sort ascending = icons/dropup.png, 0, 2, 0, 2, 0
- Used in Mail view headers and other 'Sorting-headers'.
Bullet = radio_button/selected.png
Checkmark = checkbox/selected.png
Parent folder = icons/folder_up.png
;---Comments for entrys below
Folder = icons/folder_closed.png
Folder.open = icons/folder_open.png
- .open used to indicate currently open folders.
- Used also in the personal bar. There you can't eliminate the dropdown arrow for the menu like for other icons (trough the toolbar.ini).
New note = buttons/new_note.png
Note = icons/note.png
Note Web = icons/note_web.png
;---Comments for entrys below
Bookmark Unvisited = icons/bookmark_unvisited.png
Bookmark Visited = icons/bookmark.png
- The visited/unvisited link buttons in the personal bar.
Trash = icons/trash.png
Trash.attention = icons/trash_attention.png
- .attention used if the special trash contains a blocked pop-up.
Group = icons/group_closed.png
Group.open = icons/group_open.png
Thread = icons/thread_closed.png
Thread.open = icons/thread_open.png
- .open used to indicate currently open groups/threads.
Contact Unknown = contacts/contact_unknown.png
Label Important = icons/label_important.png
Label Todo = icons/label_todo.png
Label Mail Back = icons/label_mail_back.png
Label Call Back = icons/label_call_back.png
Label Meeting = icons/label_meeting.png
Label Funny = icons/label_funny.png
Label Valuable = icons/label_valuable.png
Mail Inbox = icons/received.png
Mail Outbox = icons/outbox.png
Mail Sentbox = icons/sent.png
Mail Drafts = icons/drafts.png
Mail Trash = icons/trash.png
Mail Unread = icons/mail_unread.png
Mail Read = icons/mail_read.png
;---Comment for entrys below
Mail New = icons/mail_new.png
Mail Replied = icons/mail_replied.png
Mail Forwarded = icons/mail_forwarded.png
Mail Redirected = icons/mail_redirected.png
Mail Attachment = icons/mail_attachment.png
Mail Sent = icons/mail_sent.png
- Appears in the first column in several mail views.
Mail Thread = icons/thread.png
Mail Search = icons/search.png
Mail Spam = icons/spam.png
;---Comment for entry below
Zoom = buttons/zoom.png
- Appears in the Zoom dropdown field; the original is 22x22 pixels and cuts unfortunately some digits (if three-digits number or more), also with standard font in 1024x768. If you make this image about 13-14x15 it works well (see also Zoom image to large in the `Basic info` section)
Blocked = buttons/blocked.png
- Used in blocked pop-ups list (the special trash).
View flat = icons/flat.png
View threaded = icons/thread.png
View from = icons/from.png
View to = icons/to.png
View to and from = icons/flat.png
View mail = icons/mail_unread.png
;---Comment for entrys below
;View attachments = icons/mail_attachment.png
;View thumbnails = icons/mail_thumbnails.png
- Not in use, perhaps because it's a bug, but with 'View as attachments' and 'View as thumbnails' it works.
Show read = icons/mail_read.png
Show trash = icons/trash.png
Show spam = icons/spam.png
Show mailing lists = contacts/mailing_list.png
Show newsgroups = icons/news_group.png
Show newsfeeds = icons/newsfeed_unread.png
Attachment Music = icons/music.png
Attachment Images = icons/images.png
Attachment Video = icons/video.png
Attachment Documents = icons/documents.png
Attachment Archives = icons/archives.png
Mailing List Unknown = contacts/mailing_list_unknown.png
News Unsubscribed = icons/news_group.png
News Subscribed = icons/news_group.png
News Unread = icons/news_unread.png
News Read = icons/news_read.png
Newsfeed Unsubscribed = icons/newsfeed_unread.png
Newsfeed Subscribed = icons/newsfeed_unread.png
Newsfeed Unread = icons/newsfeed_unread.png
Newsfeed Read = icons/newsfeed_read.png
;---Comment for entrys below
Transfer Loading = icons/transfer_loading.png
Transfer Loading Waiting = icons/transfer_loading_waiting.png
Transfer Size Mismatch = icons/transfer_size_mismatch.png
Transfer Success = icons/transfer_success.png
Transfer Stopped = icons/transfer_stopped.png
Transfer Failure = icons/transfer_failure.png
Transfer Upload = icons/transfer_upload.png
- The small icons appearing in a detailed transfers view.
Search Web = icons/search.png
Search = icons/search.png
;---Comment for entrys below
Prefs Personal = contacts/contact_known.png
Prefs Browser = buttons/view.png
Prefs Pages = icons/page.png
Prefs Extensions = buttons/save.png
Prefs Network = buttons/security_3.png
Prefs None = icons/none.png
- Used in the old preferences dialog (still available in 8.x, but no longer in 9.x).
Status Away = icons/status_away.png
Status Busy = icons/status_busy.png
Status Be right back = icons/status_be_right_back.png
Status On the phone = icons/status_on_the_phone.png
Status Out to lunch = icons/status_out_to_lunch.png
Chat User = contacts/boy01.png
Chat Operator = contacts/boy05.png
Chat Room = icons/chat_inactive.png
Chat Joined Room = icons/chat.png
Contact0 = contacts/contact_known.png
Contact1 = contacts/boy02.png
Contact2 = contacts/boy03.png
Contact3 = contacts/boy04.png
Contact4 = contacts/boy05.png
Contact5 = contacts/boy06.png
Contact6 = contacts/boy07.png
Contact7 = contacts/boy08.png
Contact8 = contacts/boy09.png
Contact9 = contacts/boy10.png
Contact10 = contacts/boy11.png
Contact11 = contacts/boy12.png
Contact12 = contacts/boy13.png
Contact13 = contacts/boy14.png
Contact14 = contacts/boy15.png
Contact15 = contacts/boy16.png
Contact16 = contacts/girl01.png
Contact17 = contacts/girl02.png
Contact18 = contacts/girl03.png
Contact19 = contacts/girl04.png
Contact20 = contacts/girl05.png
Contact21 = contacts/girl06.png
Contact22 = contacts/girl07.png
Contact23 = contacts/girl08.png
Contact24 = contacts/girl09.png
Contact25 = contacts/girl10.png
Contact26 = contacts/girl11.png
Contact27 = contacts/girl12.png
Contact28 = contacts/girl13.png
Contact29 = contacts/girl14.png
Contact30 = contacts/girl15.png
Contact31 = contacts/girl16.png
Contact32 = contacts/special01.png
Contact33 = contacts/special02.png
Contact34 = contacts/special03.png
Contact35 = contacts/special04.png
Contact36 = contacts/special05.png
Contact37 = contacts/mailing_list.png
;---Comments for unused entrys below
;Mail Unread Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Mail Inbox Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Mail Outbox Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Mail Sentbox Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Mail Drafts Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Mail Trash Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Mail Spam Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Mail Thread Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Attachment Documents Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Attachment Archives Header = mail_headers/archives.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Attachment Music Header = mail_headers/music.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Attachment Video Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Attachment Images Header = mail_headers/images.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Label Important Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Label Todo Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Label Mail back Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Label Call back Header = mail_headers/call_back.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Label Meeting Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Label Funny Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Label Valuable Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Unknown contact header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Search Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;News Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Newsfeed Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Folder Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Chat Room Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
;Chat Private Header = mail_headers/news.jpg, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
- Not in use because the images takes to much space in the mail toolbars.
- Unfortunately the space is wasted as long as the entrys exists (no chance to save some space with a smaller image or so).
- Never found the sense of the 6.-10. parameters?
Hotlist Accountstatus On = drop_insert/vertical_bottom.png
Hotlist Accountstatus Off = drop_insert/vertical_top.png
Smiley Happy = smilies/smile.png
Smiley Unhappy = smilies/sad.png
Smiley Wink = smilies/wink.png
Smiley Surprised = smilies/surprised.png
Smiley Grin = smilies/lol.png
Smiley Cool = smilies/cool.png
Smiley Indifferent = smilies/normal.png
Smiley Cry = smilies/cry.png
Smiley Angry = smilies/angry.png
Smiley Tongue = smilies/tongue.png
Smiley Pacman = smilies/pacman.png
Start listening = buttons/start_listening.png
Stop listening = buttons/stop_listening.png
Stop speaking = buttons/stop_speaking.png
;---Since Opera 9:
Content block image = buttons/content-block-small.png
;
- The `Content block image` appears as header image without function in the content block toolbar.
-
;---Since Opera 9.2:
Opera Logo = icons/opera.png
Open pages = buttons/windows.png
- These icons appears inside the speeddial configure dialog.
Animated gif`s in [Images][⊗]
The following entries are part of the section [Images] too:
;---Since Opera 9.2:
Thumbnail Busy Image = speeddial/busy_anim.gif
Thumbnail Reload Image = speeddial/reload.gif
- The animated busy-gif appears centered during loading a speeddial thumbnail, the animated reload-gif appears during reloading a speeddial thumb instead the number on the left top corner.
- Colorizing enabled as comma-separated parameter, can have an effect on animations; depending on the used colors and on the color scheme.
- Margins, defined as comma-separated parameters inside the reload-gif entry, have no effect; so you must insert transparent space inside the animation if necessary.
- screenshot
-
- End of skin.ini comments -
(top)
BASIC INFO:
Some basics [⊗]
Other resources for skin creators:
The skin.ini inside Operas standard_skin.zip. The official Opera 7 Skin Specifications. This wiki; see the skins section on the main page. Very useful are also the pages Custom image names and Your skin's images (by scipio). Changes in the latest betas and the weekly previews you find on SkinINIChanges.
(top)
Native / Non-native skins[⊗]
Native skin:
- A native skin, defined with Native=1 in the section Options , takes the background skin elements from the operating system (regardless of Fallback background= is set to 1 or 0 in [Options] for not defined sections). The possibility to define own things is restricted, e.g.: for some background sections you can define for example the paddings (but not the images).
- Foreground elements like buttons you can define; that means: with Fallback foreground=0 you must define all foreground sections/items, and with Fallback foreground=1 lacking sections will be taken from the Standard_skin.zip.
Non-native skin:
- A non-native skin, defined with Native=0 or no such entry in the section Options , takes it`s background- and foreground elements from the defined sections dependent on the Fallback-entries in [Options].
- With Fallback background=0 / Fallback foreground=0 you must define all sections, with Fallback background=1 / Fallback foreground=1 all lacking sections will be taken from the Standard_skin.zip.
- In this document all the sections are described for a non-native skin, but perhaps some things are true also for a native skin.
(basic info)
Section-types and states [⊗]
- There are five different section types. You can use only one type per title (e.g., .large.left won't work):
- .large
- .top
- .left
- .bottom
- .right
- There are six different section states available. You can use several states per title, but sometimes you have to try out the correct order:
- .hover
- .attention
- .disabled
- .selected
- .pressed
- .open
- You can also combine one type with one or more states; the type must always be first (e.g., .top.hover works, but .hover.top does not).
- If you use sub-sections with types and/or states, you should define all needed entries for each section separately (or with `Clone=`). In some cases Opera may take missing entries from another section (e.g. the main section), and that can lead to confusion.
- Not all types and states are available for every item; in other words, you will have to try it out.
- Normally you should not define images for .disabled (buttons); Opera has its own technique for drawing disabled buttons. But in some cases (e.g. Wand) it's an advantage to define such a button for better distinction.
- On the other hand, some sections include .disabled sub-sections (for instance push buttons). In these cases you must have something there, otherwise such items won't appear (or only the shadow will appear).
(basic info)
Image-types [⊗]
- In [...]-sections you can use one of the following 5 Image-types:
- Type=Boxtile
- Type=BoxtileHorizontal
- Type=BoxtileVertical
- Type=Box
- Type=Image (default)
- For the following lists: 'Tiles expand' means; they copy themselfs to fill the space if necessary. 'Things stay as they are' means; no expanding, no filling. In most cases for Box-, Boxtilehorizontal-, Boxtilevertical- and Image-images only the `Tile center=` is used. Also in a boxtile-image sometimes not all 9 parts are necessary. Here the differences:
- Type=Boxtile used for 9-part boxtile-images, some parts expand if necessary.
- Tile Center= expands vertically and horizontally
- Tile Left= expands vertically
- Tile Right= expands vertically
- Tile Top= expands horizontally
- Tile Bottom= expands horizontally
- Corner Topleft/Topright/Bottomright/Bottomleft stay as they are
The tiles expand if necessary, the corners stay. Used for pagebar tabs or push buttons, for example. Note also: for a 9-part boxtile-image, the 3 images in a horizontal row should have the same height and the 3 images in a vertical row should have the same width.
- Type=Box normally used for single images.
In a 9-part image you will see empty space, rarely used. All tiles and corners stay as they are. In most cases you will use only `Tile center=`. It seems that the images real `Height=` and `Width=` are necessary? This type corresponds mainly to the single images in [Boxes]; normally you will define such images there.
- Type=Image used for a single image.
- Tile center= expands vertically and horizontally
Only the `Tile center=` will be taken and this image expands to the necessary size, other tiles and corners would be ignored, rarely used. Note: only `Tile Center=` used, and it seems that the images real `Height=` and `Width=` are necessary? This type corresponds mainly to the single images in [Images]; so the normal way is, to define such images there.
(basic info)
Image-color [⊗]
- Color=#0000FF You will see this color if no image is defined or only partial images exist.
You have to use the 6-digit HEX-Code for colors; which you can find out in every good graphics-program.
- Color=Window sets the color and text color to the Operating System color for the 'Window background'.
- Color=Window disabled sets the color and text color to the Operating System color for the 'Disabled window background'.
- Please note: Colorize= is ineffective for colors defined trough Color=.
(basic info)
Image-colorize [⊗]
- Colorize=1/0 enables/disables colorizing trough color schemes.
- Default is 0 in [Boxes] and [Images], but Default is 1 in all other [...]-sections.
- Please note: Colorize= is ineffective for colors defined trough Color=.
- The special way to set colorizing for single images in [Boxes] and [Images] is mentioned there.
(basic info)
Image-border [⊗]
- Border=X draws a rectangular border around the image (X is the dimension in pixels, no default), together with:
- Border color=#000FFF sets the border color, no default. Again, the 6-digit HEX-Code for colors is used; you can find out color codes in every good graphics-program.
- You can use this borders for buttons (border around the button and title) or for every other image, also for boxtiles.
- The border begins at the outer edges and takes the necessary space from inside the image.
- `Blend=` doesn't concern border colors, but `Colorize=` does.
(basic info)
- Text bold=1/0 enables/disables bold text for this section, Default is 0.
- Text underline=1/0 enables/disables underlined text for this section, Default is 0.
- Bold and underline works well in button-sections, but in toolbar-sections it usually has no effect.
- Text zoom=1/0 sets a special zoom effect for button titles, Default is 0. Only to use in the section [Toolbar button skin] , see details there.
(basic info)
Text-color [⊗]
- Text color=#FF0000 sets the text color for this section. Again, the 6-digit HEX-Code for colors is used; which you can find out in every good graphics-program.
- You can use text colors for toolbars/backgrounds but also for buttons, the button text colors override the colors defined for toolbars. Theoretically it's possible to define no text colors for toolbar buttons, but different text colors for toolbars: each toolbar with it's own text color.
(basic info)
Margin [⊗]
- Margin top/left/bottom/right=X sets a space, in pixels. General default margin is 0.
- Also negative numbers are possible (e.g.: -1).
- Margin does not work for checkboxes (e.g. from Appearance - Buttons - Preferences)! So it`s better to set general margins for the toolbars, but for buttons only in special cases.
- Note: `Spacing=` in toolbar-sections also affects the margins (between buttons).
- Remember also the possibility to use invisible image parts as a sort of margin.
- Margins really aren't simple to handle, and sometimes behave in unexpected ways!
- Margin examples:
- Margins in a toolbar-section normally make no sense/don't work.
- Margins in a button-section define the space around the button-image(s) and title to other buttons and also to the toolbar-edges. The same is also valid for fields.
- It`s also possible to define margins for single images in [Boxes] and [Images] (see comment for [Parameters] ). Margins there result in space around the single image only (title not included).
- screenshot
(basic info)
Padding [⊗]
- Padding top/left/bottom/right=X sets the distance between image edges and the inner part, in pixels. General default padding is 2.
- Negative numbers are also possible (e.g.: -3).
- Note: `Spacing=` in button-sections also affects the paddings. Besides: the general `Button text padding=` in [Options] overrides individual paddings.
- Paddings really aren't simple to handle, and sometimes behave unexpected ways!
- Padding examples:
- Paddings in a toolbar-section define the space from the toolbar-edges to the button-image(s) and title.
- Paddings for button-sections with 9-part boxtile-images set the space between the image-edges and text/single button image. This paddings are also valid if no 9-part boxtile is defined.
- screenshot
(basic info)
- Blend=X (X is a value from 1 to 100) sets the general transparency for a .hover-image; the value 1 means high transparency and 100 means no transparency (Default is 100). Used only in sections with the title-type '.hover'. Works for all kind of buttons and tabs, but not for the [Toolbar button skin] (neither small nor large).
- `Blend=` have no effect on `Border color=` and `Color=`.
(basic info)
Spacing [⊗]
- Spacing=X you be used in two ways:
- In button-sections, to define the space in pixels between icon and button title, default is 0. Works horizontally if `Images and text on right` and vertically if `Images and text below` is set in Appearance - Toolbars. Not valid if `Images only` or `Text only` is set.
- In toolbar-sections to define the space in pixels between the icons, default is 0. Works horizontally in horizontal toolbars and vertically in vertical toolbars.
- Negative numbers are possible (e.g.: -5)
- Tip: For the Personal bar skin.left and .right it`s useful to set `Spacing=-10` (for example) to minimize the vertical space.
- screenshot
(basic info)
Parameters [⊗]
- Parameters for single image-entries in [Boxes] and [Images]: .../xy.png,1,2,3,4,5
- 1 means: Colorize 0/1
- 2 means: Margin left in pixels
- 3 means: Margin top in pixels
- 4 means: Margin right in pixels
- 5 means: Margin bottom in pixels
- Margins here result in space around the single image only (title not included).
- Each entry inside a normal [...]-section is a parameter (apart from the image-entries).
- Please note, that you can't use the same image (same .png with the same path) several times with different parameters; only the parameters of the image loaded first will be used! This does not have to be the first or last section/entry found in the skin.ini! This is also valid for images called from own [...]-sections; especially with `Colorize=0/1`. Perhaps you wonder why it won't work in some cases; that's the reason.
- screenshot
(basic info)
Sections and single images [⊗]
- Basically there are two ways to define an image in an opera skin:
- Entry in one of the sections [Boxes] or [Images].
- Definition of a separate section. You can also create new custom sections, which is sometimes useful for special purposes. These can then be called up by the procedures 'Clone = ...' or 'Child0 = ...' in other sections.
(basic info)
- Clone='Section title' first takes all entries from the cloned section and then takes all different or new entries from the current section. You can use this to reduce code-size. Take care not to create loops; as it will result in Opera not starting or crashing!
(basic info)
- Child0=`image-entry or section-title` draws the child image on top of the image in the current section. Normally the child is `Type=Box` with the images `Height=` and `Width=`, or an image from the section [Boxes]. It`s not that easy, especially because `Type=Box`-images are not influenced by the `Icon size` you can choose in Appearance - Skin, but images in [Boxes] are.
- You can have several children together: `Child0=, Child1=, Child2=` and so on.
- Do not use children too often; as it may slow down Opera!
- Take care not to create loops; as it will result in Opera not starting or crashing!
- Child-examples:
- For a normal toolbar button, create the parent and the child(ren) as separate sections with `Type=Box` and with defined fixed `Height=` and `Width=` (usually the same); that`s the way, for instance, to create the buttons parent with `Colorize=1` but the child without colorizing. Hold in mind, that this construction doesn`t react on a changed `Icon size` in Appearance - Skin.
- For a 9-part boxtile as parent, the child(ren) can have a seperate section with `Type=Box` and defined fixed `Height=` and `Width=`; here the parent is affected by a changed `Icon size`, the child is not.
- A 9-part boxtile as parent with the child as single image in [Boxes] also works; parent and child are both affected by `Icon size` (but take care of using children in the scrollbar knobs; because there the parent doesn't change with `Icon size`, instead in W-XP the scrollbars will be affected by Operating systems font size or manual manipulation).
(basic info)
Comments
- You can use ';' or '#' at the beginning of a line for comments or for lines you wish not to use.
(basic info)
Special effects [⊗]
- In Appearance - Skin it's possible to activate 'Special Effects'. This enables softer button/tab - hovering (not the menu buttons at the top), soft popup notifiers and text zoom (see: [Toolbar button skin] ). In older versions the scrollbar hovering was also concerned.
- IMPORTANT since Opera 9: all buttons with a function after the `+`sign (toolbar.ini; not a menu/hidden menu) works only properly if you have activated the `Special effects` in Tools - Appearance - Skin (since Opera 9)! Not easy to understand, but true...
(basic info)
Toolbar.ini and skin.ini [⊗]
- Each button defined in the toolbar.ini calls the corresponding image entry/section inside the skin.ini. If the image name isn`t defined otherwise, the buttons command calls the image:
- this entry in the toolbar.ini calls the image name `Rewind` inside the skin.ini, that`s normally the single image-entry `Rewind=` in [Images] or [Boxes], but it can also be a [Rewind]-section.
-
- If it`s necessary to call another image than the command-related image, you have to call them with the 4th parameter:
- Button, 67648=Rewind,,,,"My special rewind"
- such an entry in the toolbar.ini calls the image name `My special rewind` inside the skin.ini, that`s normally the single image-entry `My special rewind=` in [Images] or [Boxes], but it can also be a [My special rewind]-section.
- In some cases it`s not possible to call an image via command, e.g. `Focus panel` or `Manage`, because the command is several times in use for different jobs. There you MUST call the image via the 4th parameter.
- If you plan to use 4th-parameter images/custom image names, please consult Scipios website: Custom image names, there you will find a lot of custom image names already used in other skins/setups.
- Checkbox, 52203=Enable... in the toolbar.ini calls in each case directly the [Checkbox skin]-sections inside the skin.ini, here you can`t use custom image names/custom images.
- Only for extraordinary things it can be an advantage to call special types or states like .large or .selected directly from the toolbar.ini; normally Opera displays the necessary things automatically.
(basic info)
Menu.ini and skin.ini [⊗]
- Also from the menu.ini you can call custom image names for single `Item`-entrys via the 4th parameter as described above.
(basic info)
Maximum button width [⊗]
- Mentioned here because it concerns also the skins view: for some toolbars it`s possible to set a `Maximum button width` in the toolbar.ini. For instance:
;---toolbar.ini
[Personalbar.style]
Maximum Button Width = 120
- Concerns the buttons width, but also the width of the personal bar if at left/right.
;---toolbar.ini
[Hotlist Panel Selector.style]
Maximum Button Width = 50
- Concerns the buttons width, but also the width of the panel selector if at left/right.
- Doesn`t works for [Pagebar.style]; therefore see the section [Options] .
(basic info)
Image format [⊗]
- Most images used for background or buttons are .png`s with the possibility to have alpha-channels/invisible image parts. For very large background images a compressed .jpg may be better, due to the filesize. Opera accepts also .bmp, and .gif.
(basic info)
Page/tab background color [⊗]
The background color of an empty page/tab cannot be customized by the skin.
- In Opera 8/9 you are able to change the color in `Tools - Preferences - Web pages - Background color`.
(basic info)
Application background color [⊗]
The application background color, which you see if all tabs are closed, cannot be changed by the skin.
- The color of the application background comes from the operating system. In wxp you have to change the `Application background` color. Search for something similar in other systems.
- Note also: with Opera 9.x normally you cannot see the application background; `Tools - Preferences - Advanced - Tabs - Allow window with no tabs` is Off by default.
(basic info)
Zoom image to large [⊗]
A known bug since ages but never corrected in the standard skin: the image /buttons/zoom.png (appears inside the zoom dropdown field) is to large and hides some numbers if the zoom is displayed with 3-digits or more.
- Reduce the original image size from 22x22 px to 12x12 or 13x13 px. So you can see at least 3-digits with the default fonts.
(basic info)
(top)
Categories
CategoryOpera
CategoryTechnical
Backlinks
- OperaZHCN