Plugin:TabSRMM/Skinning format - Revision history

Dart Raiden at 23:07, 27 October 2022

2022-10-27T23:07:29Z

← Older revision		Revision as of 02:07, 28 October 2022
Line 320:		Line 320:
	</translate>		</translate>

	[[Category:Tutorials]]		[[Category:Tutorials{{#translation:}}\|{{#getdisplaytitle:{{FULLPAGENAME}}}}]]

Dart Raiden: Marked this version for translation

2022-09-26T23:20:32Z

Marked this version for translation

← Older revision		Revision as of 02:20, 27 September 2022
Line 138:		Line 138:
	<tt>Perpixel</tt> is a boolean value (0 or 1). If it is 1 (or any other value different from zero), the image will be rendered with per pixel alpha values.		<tt>Perpixel</tt> is a boolean value (0 or 1). If it is 1 (or any other value different from zero), the image will be rendered with per pixel alpha values.

	~~<!--T:32-->~~		=== Assign images to actual skin item(s) (assigned image items only) === <!--T:32-->
	=== Assign images to actual skin item(s) (assigned image items only) ===

	<!--T:33-->		<!--T:33-->

Dart Raiden at 23:19, 26 September 2022

2022-09-26T23:19:48Z

← Older revision		Revision as of 02:19, 27 September 2022
Line 142:		Line 142:

	<!--T:33-->		<!--T:33-->
	This is done with the <tt>%ItemX=Itemname%</tt> statement. X is a 0-based index number, so the first assignment has to be <tt>Item0=foo</tt>, the second <tt>Item1=bar</tt> and so on. Itemname refers to one of the skin item names listed at the beginning of this document, without the <tt>%</tt> character.		This is done with the <tt>ItemX=Itemname</tt> statement. X is a 0-based index number, so the first assignment has to be <tt>Item0=foo</tt>, the second <tt>Item1=bar</tt> and so on. <tt>Itemname</tt> refers to one of the skin item names listed at the beginning of this document, without the <tt>%</tt> character.

	<!--T:34-->		<!--T:34-->
Line 274:		Line 274:
	TitleButtonTopOffset = 7		TitleButtonTopOffset = 7
	CaptionOffset = 6</pre>		CaptionOffset = 6</pre>

	<translate>		<translate>

	== Skinning the window frame == <!--T:48-->		== Skinning the window frame == <!--T:48-->

Dart Raiden at 23:16, 26 September 2022

2022-09-26T23:16:03Z

← Older revision		Revision as of 02:16, 27 September 2022
Line 51:		Line 51:
	=== A sample skin element === <!--T:8-->		=== A sample skin element === <!--T:8-->
	</translate>		</translate>

	<pre>[%Container]		<pre>[%Container]
	ALPHA=100		ALPHA=100

Dart Raiden at 23:15, 26 September 2022

2022-09-26T23:15:45Z

← Older revision		Revision as of 02:15, 27 September 2022
Line 298:		Line 298:
	<translate>		<translate>
	<!--T:52-->		<!--T:52-->
	to the [Global] section. Note that, both items (Frame and FrameInactive) must be properly defined, because the message window will always use both, depending on the active state of the window. When ~~%{color:blue}~~FramelessMode% is undefined or set to 0, the frame will appear with the operating systems theme.		to the <tt>[Global]</tt> section. Note that, both items (<tt>Frame</tt> and <tt>FrameInactive</tt>) must be properly defined, because the message window will always use both, depending on the active state of the window. When <tt>FramelessMode</tt> is undefined or set to 0, the frame will appear with the operating systems theme.

	<!--T:53-->		<!--T:53-->
	When using frame skin definitions, you also ~~HAVE~~ to define the title buttons, that is, you have to valid skin definitions for the 3 items starting with ~~%{color:blue}~~Titlebutton%.		When using frame skin definitions, you also have to define the title buttons, that is, you have to valid skin definitions for the 3 items starting with <tt>Titlebutton</tt>.

	<!--T:54-->		<!--T:54-->
	When using image items for the frame, you really ~~SHOULD~~ use the ~~%{color:blue}~~FillColor% statement to speed up drawing of the inner part which will always be invisible anyway, because the frame is only a few pixels wide. Adjust the sizing margins of the image items in a way that it will properly stretch on the frame, and then setup the window frame metrics:		When using image items for the frame, you really should use the <tt>FillColor</tt> statement to speed up drawing of the inner part which will always be invisible anyway, because the frame is only a few pixels wide. Adjust the sizing margins of the image items in a way that it will properly stretch on the frame, and then setup the window frame metrics:
	</translate>		</translate>

Line 317:		Line 317:
	<translate>		<translate>
	<!--T:55-->		<!--T:55-->
	~~%{color:blue}~~Left, Right, Bottom and Caption% are the widths (in pixels) for the respective border elements (Caption = title bar height).		<tt>Left</tt>, <tt>Right</tt>, <tt>Bottom</tt> and <tt>Caption</tt> are the widths (in pixels) for the respective border elements (<tt>Caption</tt> is title bar height).
	</translate>		</translate>

	[[Category:Tutorials]]		[[Category:Tutorials]]

Dart Raiden: /* Assign images to actual skin item(s) (assigned image items only) */

2022-09-26T23:13:36Z

Assign images to actual skin item(s) (assigned image items only)

← Older revision		Revision as of 02:13, 27 September 2022
Line 242:		Line 242:
	<translate>		<translate>
	<!--T:45-->		<!--T:45-->
	The client area section defines the inner padding of the message container. The values ~~left~~, ~~top~~, ~~bottom~~ and ~~right~~ are padding values added to the container itself and the Inner value is a padding value added to the tab control. Setting it to 0 will make the tab control border invisible, setting one or all of the ~~left~~,~~top~~,~~bottom~~,~~right~~ values to 0 will make the borders as small as possible.		The client area section defines the inner padding of the message container. The values <tt>Left</tt>, <tt>Top</tt>, <tt>Bottom</tt> and <tt>Right</tt> are padding values added to the container itself and the <tt>Inner</tt> value is a padding value added to the tab control. Setting it to 0 will make the tab control border invisible, setting one or all of the <tt>Left</tt>, <tt>Top</tt>, <tt>Bottom</tt>, <tt>Right</tt> values to 0 will make the borders as small as possible.
	</translate>		</translate>

Dart Raiden: /* Assign images to actual skin item(s) (assigned image items only) */

2022-09-26T23:11:16Z

Assign images to actual skin item(s) (assigned image items only)

← Older revision		Revision as of 02:11, 27 September 2022
Line 144:		Line 144:

	<!--T:34-->		<!--T:34-->
	<tt>ColorKey</tt> ~~this~~ is a special color value which will be used to make areas of the container transparent (e.g. it can be used for rounded corners). The color key can be any value you want, but remember that any pixel with this color will appear completely transparent. the color key does only make sense for the container skin item and is ignored elsewhere.		<tt>ColorKey</tt> is a special color value which will be used to make areas of the container transparent (e.g. it can be used for rounded corners). The color key can be any value you want, but remember that any pixel with this color will appear completely transparent. the color key does only make sense for the container skin item and is ignored elsewhere.

	<!--T:35-->		<!--T:35-->
	<tt>FillColor</tt> ~~This~~ is a color value, which, if present, will be used to fill the inner part of the target area. You can use this if you only need the margin areas of the image (one example would be the Tab page which is usually invisible covered by the message log and other message window elements). The advantage is that by using a fill color, rendering will be faster. Only makes sense for a "divided" image item (all 4 sizing margins present).		<tt>FillColor</tt> is a color value, which, if present, will be used to fill the inner part of the target area. You can use this if you only need the margin areas of the image (one example would be the Tab page which is usually invisible covered by the message log and other message window elements). The advantage is that by using a fill color, rendering will be faster. Only makes sense for a "divided" image item (all 4 sizing margins present).

	<!--T:36-->		<!--T:36-->
Line 196:		Line 196:
	<translate>		<translate>
	<!--T:37-->		<!--T:37-->
	The global section has some general settings for the skin. ~~%{color:red}~~The 3 glyphs are used for the min/max/close button on the title bar.%		The global section has some general settings for the skin. The 3 glyphs are used for the min/max/close button on the title bar.

	<!--T:38-->		<!--T:38-->
	SbarHeight = height of the status bar in pixels. Using this, you can override the systems default status bar height and make your status bar "match" the background skin image for the container window.		<tt>SbarHeight</tt> is height of the status bar in pixels. Using this, you can override the systems default status bar height and make your status bar "match" the background skin image for the container window.

	<!--T:39-->		<!--T:39-->
	FontColor is the color for text output in the message window which is normally printed with the system text color (black). this affects: the info panel labels, the status bar text, text on buttons and elsewhere.		<tt>FontColor</tt> is the color for text output in the message window which is normally printed with the system text color (black). this affects: the info panel labels, the status bar text, text on buttons and elsewhere.
	</translate>		</translate>

Line 210:		Line 210:
	\|-		\|-
	\|Signature=101		\|Signature=101
	\|<translate><!--T:41--> ~~same~~ – don't remove or change</translate>		\|<translate><!--T:41--> Same – don't remove or change</translate>
	\|-		\|-
	\|FrameLessMode		\|FrameLessMode
	\|<translate><!--T:42--> If set to a value not equal to zero, containers will enter frameless mode. That means, they do not use Windows theme to skin the border and caption bar. Using this mode, you can define your own border and caption bar look by configuring the skin items ~~%{color:blue}~~$Frame% and ~~%{color:blue}~~$FrameInactive%. They are defined in the same way as other skin items. See the next page for more info on skinning the window frame</translate>		\|<translate><!--T:42--> If set to a value not equal to zero, containers will enter frameless mode. That means, they do not use Windows theme to skin the border and caption bar. Using this mode, you can define your own border and caption bar look by configuring the skin items <tt>$Frame</tt> and <tt>$FrameInactive</tt>. They are defined in the same way as other skin items. See the next page for more info on skinning the window frame</translate>
	\|-		\|-
	\|LightShadow / DarkShadow		\|LightShadow / DarkShadow
	\|<translate><!--T:43--> Simple color definitions to draw "beveled" 3d shadow effects in some cases. They should match your overall skin color theme</translate>		\|<translate><!--T:43--> Simple color definitions to draw "beveled" 3D shadow effects in some cases. They should match your overall skin color theme</translate>
	\|-		\|-
	\|TabTextNormal/Active/Unread/Hottrack		\|TabTextNormal/Active/Unread/Hottrack
Line 255:		Line 255:
	<translate>		<translate>
	<!--T:46-->		<!--T:46-->
	The WindowFrame section is only valid in ~~FrameLessMode~~ (that is, when you are using your own border and caption bar skinning). It defines the width of the Window border(s) – one value per side and one for the caption bar itself.		The <tt>WindowFrame</tt> section is only valid in frameless mode (that is, when you are using your own border and caption bar skinning). It defines the width of the Window border(s) – one value per side and one for the caption bar itself.

	<!--T:47-->		<!--T:47-->
	The other values in this section define the metrics for the title bar buttons – width, height and a top offset and the +CaptionOffset+ defines the top offset for the window icon and the title bar text.		The other values in this section define the metrics for the title bar buttons – width, height and a top offset and the <tt>CaptionOffset</tt> defines the top offset for the window icon and the title bar text.
	</translate>		</translate>

Line 273:		Line 273:
	TitleButtonTopOffset = 7		TitleButtonTopOffset = 7
	CaptionOffset = 6</pre>		CaptionOffset = 6</pre>

	<translate>		<translate>

Dart Raiden: /* Assign images to actual skin item(s) (assigned image items only) */

2022-09-26T23:08:01Z

Assign images to actual skin item(s) (assigned image items only)

← Older revision		Revision as of 02:08, 27 September 2022
Line 144:		Line 144:

	<!--T:34-->		<!--T:34-->
	<tt>%ColorKey%</tt> this is a special color value which will be used to make areas of the container transparent (e.g. it can be used for rounded corners). The color key can be any value you want, but remember that any pixel with this color will appear completely transparent. the color key ~~DOES ONLY MAKE SENSE~~ for the container skin item and is ignored elsewhere.		<tt>ColorKey</tt> this is a special color value which will be used to make areas of the container transparent (e.g. it can be used for rounded corners). The color key can be any value you want, but remember that any pixel with this color will appear completely transparent. the color key does only make sense for the container skin item and is ignored elsewhere.

	<!--T:35-->		<!--T:35-->
	<tt>%FillColor%</tt> This is a color value, which, if present, will be used to fill the inner part of the target area. You can use this if you only "need" the margin areas of the image (one example would be the Tab page which is usually invisible covered by the message log and other message window elements). The advantage is that by using a fill color, rendering will be faster. Only makes sense for a "divided" image item (all 4 sizing margins present).		<tt>FillColor</tt> This is a color value, which, if present, will be used to fill the inner part of the target area. You can use this if you only need the margin areas of the image (one example would be the Tab page which is usually invisible covered by the message log and other message window elements). The advantage is that by using a fill color, rendering will be faster. Only makes sense for a "divided" image item (all 4 sizing margins present).

	<!--T:36-->		<!--T:36-->

Dart Raiden at 23:07, 26 September 2022

2022-09-26T23:07:01Z

← Older revision		Revision as of 02:07, 27 September 2022
Line 138:		Line 138:

	<!--T:32-->		<!--T:32-->
	~~+assign~~ images to actual skin item(s). (assigned image items only)+		=== Assign images to actual skin item(s) (assigned image items only) ===

	<!--T:33-->		<!--T:33-->

Dart Raiden at 23:04, 26 September 2022

2022-09-26T23:04:25Z

← Older revision		Revision as of 02:04, 27 September 2022
Line 132:		Line 132:

	<!--T:30-->		<!--T:30-->
	<tt>%</tt> is a constant alpha value which is applied after perpixel alpha values – this can be used to make a non-transparent image translucent. Alpha values are in percent, so the valid range is from 0 (completely transparent) to 100 (completely opaque).		<tt>Alpha</tt> is a constant alpha value which is applied after perpixel alpha values – this can be used to make a non-transparent image translucent. Alpha values are in percent, so the valid range is from 0 (completely transparent) to 100 (completely opaque).

	<!--T:31-->		<!--T:31-->
	<tt>~~%PERPIXEL%~~</tt> is a boolean value (0 or 1). If it is 1 (or any other value different from zero), the image will be rendered with per pixel alpha values.		<tt>Perpixel</tt> is a boolean value (0 or 1). If it is 1 (or any other value different from zero), the image will be rendered with per pixel alpha values.

	<!--T:32-->		<!--T:32-->