Opacity Masks
Starting in version (alpha) 1.17.0.1 you can now use Opacity Masks on your Widgets, SubWidgets and Labels. An Opacity Mask is an image (PNG) which controls the opacity (visibility) of your Widget.
The Opacity Mask can be any PNG image with partial or fully transparent areas. The transparency will be reflected in your Widget and all of it's children. This way you can make Widgets in very complex shapes with very little effort.
The following screenshot shows an example of what you can do with the Opacity Mask feature:
The blue Widget at the bottom is a clear example: it is a simple rectangular Widget but I specified the following image as the Opacity Mask:
As you can see the Widget takes its opacity from the PNG and even hides the child elements (even partially if the PNG is partially transparent).
The Ticker at the top shows a more useful example where I am "cutting off" the corner of the Ticker so that the child elements are hidden underneath the slanted edge of the white box on the left. In the actual theme, the ticker is on top of the background but the elements are cut off using a opacity mask.
How to use Opacity Masks
To specify an Opacity Mask, first add the PNG to your Theme as an Image (just like any background image). Next, find the Opacity Mask property in your Widget, under the Display category. Expanding the Opacity Mask property you can select the image, and also change the Stretch property. The Stretch property controls how the opacity mask scales with your Widget. Use None to keep the opacity mask in its original size regardless of the Widget size, or use one of the other options to allow the opacity mask to stretch and scale with the Widget.
The Opacity Mask can be any PNG image with partial or fully transparent areas. The transparency will be reflected in your Widget and all of it's children. This way you can make Widgets in very complex shapes with very little effort.
The following screenshot shows an example of what you can do with the Opacity Mask feature:
The blue Widget at the bottom is a clear example: it is a simple rectangular Widget but I specified the following image as the Opacity Mask:
As you can see the Widget takes its opacity from the PNG and even hides the child elements (even partially if the PNG is partially transparent).
The Ticker at the top shows a more useful example where I am "cutting off" the corner of the Ticker so that the child elements are hidden underneath the slanted edge of the white box on the left. In the actual theme, the ticker is on top of the background but the elements are cut off using a opacity mask.
How to use Opacity Masks
To specify an Opacity Mask, first add the PNG to your Theme as an Image (just like any background image). Next, find the Opacity Mask property in your Widget, under the Display category. Expanding the Opacity Mask property you can select the image, and also change the Stretch property. The Stretch property controls how the opacity mask scales with your Widget. Use None to keep the opacity mask in its original size regardless of the Widget size, or use one of the other options to allow the opacity mask to stretch and scale with the Widget.
Edited (3 times)