Plugin:TabSRMM/Customize images: Difference between revisions

From Miranda NG
Jump to navigation Jump to search
(Created page with "<languages/> thumb|<translate>Aero tab images</translate> <translate> When using the Aero UI or when using customized colors for the background, TabSRMM will render the tabs with its own images instead of using visual styles. This is because visual styles would not match your customized colors and visual styles do not support translucency. The images are included in the TabSRMM DLL and they are extracted to your profile when TabSRMM...")
 
No edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
<languages/>
<languages/>
[[File:TabSRMM Aero tab images.png|thumb|<translate>Aero tab images</translate>]]
[[File:TabSRMM Aero tab images.png|thumb|<translate><!--T:1--> Aero tab images</translate>]]


<translate>
<translate>
<!--T:2-->
When using the Aero UI or when using customized colors for the background, TabSRMM will render the tabs with its own images instead of using visual styles. This is because visual styles would not match your customized colors and visual styles do not support translucency.
When using the Aero UI or when using customized colors for the background, TabSRMM will render the tabs with its own images instead of using visual styles. This is because visual styles would not match your customized colors and visual styles do not support translucency.


<!--T:3-->
The images are included in the TabSRMM DLL and they are extracted to your profile when TabSRMM starts. By default, this is '''%miranda_userdata%\TabSRMM''' and there are 4 images:
The images are included in the TabSRMM DLL and they are extracted to your profile when TabSRMM starts. By default, this is '''%miranda_userdata%\TabSRMM''' and there are 4 images:
* '''tabskin_aero_button.png''' – used for button-tabs and the switch bar buttons
* '''tabskin_aero_button.png''' – used for button-tabs and the switch bar buttons
Line 11: Line 13:
* '''unknown.png''' – the default avatar picture, only used in a few rare cases when a contact does not have an avatar and the avatar display has been set to be always visible.
* '''unknown.png''' – the default avatar picture, only used in a few rare cases when a contact does not have an avatar and the avatar display has been set to be always visible.


== How to customize them ==
== How to customize them == <!--T:4-->
</translate>
</translate>


{{TNT|Warning|<translate>Do not overwrite them. You'll most likely lose your work, because TabSRMM may overwrite these images at any time and usually will do it after each upgrade. You can, however, use these original images as a base for your own work.</translate>}}
{{TNT|Warning|<translate><!--T:5--> Do not overwrite them. You'll most likely lose your work, because TabSRMM may overwrite these images at any time and usually will do it after each upgrade. You can, however, use these original images as a base for your own work.</translate>}}


<translate>
<translate>
<!--T:6-->
To use customized versions, simply create new images with a '''custom_''' prefix and place them in the same folder.
To use customized versions, simply create new images with a '''custom_''' prefix and place them in the same folder.


<!--T:7-->
'''Example''': create a '''custom_tabskin_aero.png''' to override the default '''tabskin_aero.png'''. The same method works for all other images. To make TabSRMM recognize your custom images, you must restart Miranda.
'''Example''': create a '''custom_tabskin_aero.png''' to override the default '''tabskin_aero.png'''. The same method works for all other images. To make TabSRMM recognize your custom images, you must restart Miranda.


== Some rules for creating these images ==
== Some rules for creating these images == <!--T:8-->


<!--T:9-->
* they MUST be 32bit PNG images in RGBA format with a valid alpha channel.
* they MUST be 32bit PNG images in RGBA format with a valid alpha channel.
* per-pixel transparency is supported and you are encouraged to use it.
* per-pixel transparency is supported and you are encouraged to use it.
Line 30: Line 35:
* The margins of the images are internally set to 5 pixels on each side. The inner part of the image will be stretched in both directions, so make sure to not use more than 5 pixels for a margin that should not be stretched.
* The margins of the images are internally set to 5 pixels on each side. The inner part of the image will be stretched in both directions, so make sure to not use more than 5 pixels for a margin that should not be stretched.


<!--T:10-->
For the glow effect image, you can set the opacity higher to make it appear with some contrast. Depending on your plugin settings, TabSRMM will try to colorize the images with the current Aero theme color (the color you can choose on the Windows desktop under Personalize → Window color).
For the glow effect image, you can set the opacity higher to make it appear with some contrast. Depending on your plugin settings, TabSRMM will try to colorize the images with the current Aero theme color (the color you can choose on the Windows desktop under Personalize → Window color).


== See also ==
== See also == <!--T:11-->


<!--T:12-->
* [[../Color themes|Using color themes]]
* [[../Color themes|Using color themes]]
* [[../Aero|Aero in TabSRMM]]
* [[../Aero|Aero in TabSRMM]]
</translate>
</translate>


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

Latest revision as of 02:06, 28 October 2022

Other languages:
Aero tab images

When using the Aero UI or when using customized colors for the background, TabSRMM will render the tabs with its own images instead of using visual styles. This is because visual styles would not match your customized colors and visual styles do not support translucency.

The images are included in the TabSRMM DLL and they are extracted to your profile when TabSRMM starts. By default, this is %miranda_userdata%\TabSRMM and there are 4 images:

  • tabskin_aero_button.png – used for button-tabs and the switch bar buttons
  • tabskin_aero.png – used for normal tabs, both for top and bottom tabs. The image MUST represent the top version and should be symmetrical around its x-axis. For bottom tabs, the image will be mirrored horizontally.
  • tabskin_aero_glow.png – the overlay for the glow effect of an active tab.
  • unknown.png – the default avatar picture, only used in a few rare cases when a contact does not have an avatar and the avatar display has been set to be always visible.

How to customize them

Warning
Do not overwrite them. You'll most likely lose your work, because TabSRMM may overwrite these images at any time and usually will do it after each upgrade. You can, however, use these original images as a base for your own work.

To use customized versions, simply create new images with a custom_ prefix and place them in the same folder.

Example: create a custom_tabskin_aero.png to override the default tabskin_aero.png. The same method works for all other images. To make TabSRMM recognize your custom images, you must restart Miranda.

Some rules for creating these images

  • they MUST be 32bit PNG images in RGBA format with a valid alpha channel.
  • per-pixel transparency is supported and you are encouraged to use it.
  • the images should be as small as possible to avoid performance issues when using a large number of tabs.
  • the images' overall opacity should be around 50%. This allows the colorized underlays to be visible so that colorized versions for the active/inactive and hovered tabs are possible.
  • The images should be grayscale to make colorizing work best. This does not apply to the unknown.png.
  • The margins of the images are internally set to 5 pixels on each side. The inner part of the image will be stretched in both directions, so make sure to not use more than 5 pixels for a margin that should not be stretched.

For the glow effect image, you can set the opacity higher to make it appear with some contrast. Depending on your plugin settings, TabSRMM will try to colorize the images with the current Aero theme color (the color you can choose on the Windows desktop under Personalize → Window color).

See also