Style sub-theme and CSS 'tweaks'

Description

Define style tweaks, sub-theme, or CSS to augment or override definitions in the web theme.

Discussion

Web themes, including Inherited Styles, can be enhanced using style tweaks. Tweaks are adjustments to the web theme definition stored in a separate file in the CSS folder for a Web Project. Adjustments can include new sub-themes, CSS, and Sass that add new behaviors or override existing style elements.

When you edit a system web theme, such as Alpha or Alpha-Dark, the web theme must be copied locally before it can be modified. If the system web theme is changed, e.g. to fix a bug or to add support for a new control type, the changes will not be reflected in the local copy of the system themes. The local theme would need to be manually updated with the new changes.

Style tweaks are stored and applied independently from the web theme. If the system web theme is updated for any reason in a future release of Alpha Anywhere, you will receive all of the changes without losing any web theme customizations.

Creating a Tweak

To define style tweaks, click the smart field button for the Style sub-theme and CSS 'tweaks' property.

images/style_tweaks_property.gif
If you customize the style colors and fonts using the Customize style color and fonts property, the changes are also stored in the style tweaks file.

Where are Tweaks Stored?

Style tweaks for a particular web theme are stored in the StyleTweaks folder in the css directory for the web project:

<web project folder>\css\StyleTweaks\<style name>\styleTweaks.json

Style Sub-themes vs. Local Sub-themes

Sub-themes and classes can also be defined using the Local sub-theme definitions - Javascript and Local sub-theme definitions - CSS properties.

The adjustments made using the Local sub-theme definition properties only apply to the component. This is because the sub-theme definitions are stored in the component. The Style sub-theme and CSS 'tweaks', however, are stored with the web theme. This means any sub-themes and CSS you define in using the Style sub-theme and CSS 'tweaks' property will affect all components that use the web theme.

images/localsubthemedef.gif
Local sub-theme definitions are only available in the component where they're defined.

What Web Themes Support Style Tweaks?

All Sass styles (i.e. web themes) support style tweaks. This includes the following system web themes:

  • Alpha
  • Alpha-Amber
  • Alpha-Aqua
  • Alpha-Blue
  • Alpha-Blue2
  • Alpha-Bluegrey
  • Alpha-Coffee
  • Alpha-Dark
  • Alpha-Dark-Green
  • Alpha-Dark-Rose
  • Alpha-Green
  • Alpha-Grey
  • Alpha-Indigo
  • Alpha-Magenta
  • Alpha-Orange
  • Alpha-Purple
  • Alpha-Red
  • Alpha-Rose
  • Alpha-Slate
  • Alpha-Teal
  • AndroidDark
  • AndroidLight
  • iOS7

This list is not exhaustive.

Videos

Introduction to Style Tweaks

In order to change the appearance of an app, you can either customize the CSS for individual controls or modify the theme's style sheet. In the past, modifying the web theme style required copying the theme locally. Style tweaks let you change or extend a web theme without needing to copy it.

In this video, we show how to tweak a web theme to change the theme's colors. We also show how to create a sub-theme for a button.

2017-07-05

Creating Sub-themes for Inherited Styles

Sub-themes are a way to create different looks for application elements, such as buttons or text boxes. Adding sub-themes using style tweaks was previously not supported for Inherited Styles. With the release of Alpha Anywhere 4.6.2.2, style tweak support has been added for Inherited Styles.

In this video, we show how to create a new sub-theme called 'primaryRounded' for an input control (e.g. text boxes, text areas) using the Alpha-Dark-Green web theme. The new sub-theme will have a rounded border around the input control. Alpha-Dark-Green is an Inherited Style that uses Alpha as it's base theme.

2020-08-03