Styler: Customizing the styles interactively | WS.WebTV Documentation | WebTV Solutions

Print

Styles and interactive customization demo video:
http://www.webtvsolutions.com/webtv-en/index.php/video/30/styles-and-interactive-customization-in-ws-webtv-pro-1-9/

Since WS.WebTV 1.9, we have included the Styler tool that allows customizing the "Default" and "Minimalistic" styles.

1. The first thing you need to do is to choose the style you want to customize: go to Configuration > Appearance and click the "Customize" link which appears below the customizable styles:
- In the case of the Classic/Default Theme, you will find 4 customizable Styles.
- In the case of the V2 Theme, you will only find one customizable Style. Although the previous, this Sttyle has more customization options than the customizable Styles of the Classic Theme.


The customization list for the selected style will appear:

2. Once on the customization list...
(A) To create a new customization click "New customization".
(B) To edit an existing customization click the corresponding "pencil" icon.

NOTES:
1. Although you can create any number of customizations per style, you can only have one active at a time. Additionally, if you don't want any customization to be public, then leave all Customizations inactive.
2. In order for a Customization to be public it must be active and the corresponding style must be selected too.

The creation and edition interfaces are identical.

3. The interface consist of two areas: controls at the left and a live preview at the right.
Controls:
• Title: Enter a descriptive title for the customization.
• Presets: In this drop-down you can reset your current adjustments or load predefined settings.
TIP: Keep in mind that although the same presets are available for all customizable styles, the result will be slightly different in each case. We recommend you to try in order to get an idea of the differences [see below].
• Color controls: In order to change a color simply click on it and a color selector box will appear. Then click, or drag, over the gradients until achieving the desired color.
• Color controls with transparency: There are some color controls which also have a transparency setting ("Transp.") at the right; when you click the transparency color you will see a black & white color selector (white = opaque, black = transparent).
Either on color or transparency fields, you can also enter values, directly, in hexadecimal; example: #FFFFFF.
• Yes/No togglers: This kind of control enables or disables a control or a set of controls.
Preview:
The preview window will display the adjustments in real time. You can navigate the preview normally and the customizations will be applied to the visited pages.
- Classic/Default Theme: In order to preview the Mobile Interface simply scroll down (in the preview) and click the "Mobile version" link; use the same procedure to return to the "Desktop version". Additionally, adjust the "Width" control as desired.
- V2 Theme: In order to preview how the WebTV looks on different devices simply adjust the "Width" control as desired.


Classic Theme: Same preset = different results according to the Style...
It is worth mentioning that, in the case of the Classic Theme, although the same presets are available for the four customizable Styles, the result of applying the presets will be different for each Style.

4. Done customizing...
Once you are done with the customization, click the Save button.

5. Activating a customization...
Customizations are inactive by default. In order to activate any (remember that only one can be active at a time...) just click the grey "light bulb" icon (it will turn to yellow when active).Likewise, if you want to deactivate an active customization, click the yellow "light bulb" icon (it will turn grey when inactive).
ALSO, remember that if you want the customization to be public, the corresponding style must also be selected too in Configuration > Appearance.