• Add a class to a control
• Add a shared style
• Add a subtheme
• Add a webfont
• Configure Project Style
• Define style tweaks
• Preview themes in other contexts
• Resizeable SVG Icons
• Set height to screen height

How to Define Style Tweaks

Description

Style 'tweaks' can be used to customize an Alpha Anywhere style (such as the Alpha style).

Discussion

Style 'tweaks' can be defined in the UX Component's properties. Once a style has been tweaked, tweaks can be modified directly in the Web Theme Builder.

Tweaking the Alpha Style

1. With the Alpha Style selected, click the smart field button for the Style sub-theme and CSS 'tweaks' property.

   

2. Tweak the style by adding sub-themes on the Sub-themes tab and/or defining custom CSS on the CSS tab. Your CSS can include Sass.

   

   This 'tweak' adds a shadow to all buttons in the theme.

3. Save the tweaks and preview the changes in Live or Working Preview.

   

   Buttons in our app now display with a shadow.

Modifying a Tweaked Style in the Web Theme Builder

1. From the Web Projects Control Panel, open the Menu and select Open Web Style Builder.

   

2. Select the Alpha theme from the list.

   

3. The Web Theme Builder opens in Tweak mode (indicated by the text "tweak" after the style name in the title bar.) Enter new or modify existing tweaks on the Code tab. Preview any adjustments made on the Adjust tab.

   Save your changes when you are done tweaking the style.

   

   Modifications are made on the Code tab in the Web Theme Builder