Introduction

WebUI Studio 2016 includes major improvements to WebUI Framework and adds unified theming features, allowing you to easily create a UI theme that looks consistently throughout your application. Prior to unified theming, each WebUI component is typically styled individually. For instance, WebCombo has its own styles, so does WebInput and the rest of WebUI components. It becomes difficult and challenging to create a theme that presents consistent look and feel among multiple component types with similar semantics. You will not be able to share and reuse a style for multiple component types.

The new unified theming framework is introduced to address this challenge. Instead of individual component styles, the new unified theming  lets you create unified styles that can be shared across multiple component types with similar semantic. For example, the input element in WebCombo and WebInput could share the same style, the result popup in WebCombo and editors in WebInput could share the same style as well.

1. Enable UseCssFramework.
2. Add StyleSheets collection to your theme configuration.

Enable UseCssFramework

Find the theme file and add UseCssFramework="true" attribute at the ISTheme node.

The following is an example of theme project definition with UseCssFramework="true" attribute added.

Add StyleSheets Collection to The Theme Configuration

Add style sheets collection to the theme file. For reference, here's a complete definition of WebUI theme file configuration.

In the above example, notice that there are two stylesheets defined in the theme. As the result, any web pages that contain WebUI components defined in the theme will automatically include links to the specified stylesheets. See the example output of the html markup below.

Last but not least to mention, there are two key components when applying the unified modern theme in WebUI application:

• Component Layout Files – a set of files with ISL extension containing the CSS classes contract
• CSS Files – the stylesheet files that contain CSS3-compliance output

As shown on those images above, inside the Theme folder contains:

• a theme configuration (.istheme),
• the component layout files (.isl), and
• the CSS folder containing the stylesheet files

When styling with unified theming, there are several important points to note:

• The component layout definition files (.isl extension) should contain CSS class names corresponding to the actual CSS class defined in the stylesheets.
• Do not use the native styles or custom rules in the component layout definition. Instead, specify the CSS class of the corresponding styles.
• In the WebUI component markup (.aspx), remove all style nodes as they are no longer necessary. At runtime, the theme framework automatically applies the styles from the defined component layout definition.

Here's an example of component layout definition that complies to unified theming best practice.

Running WebUI Application with Unified Modern Theme Applied

Save all the changes and build your web application. When the application is running and requested through browser, WebUI.NET Framework (through Theme architecture) will detect for istheme.config file and automatically apply the contained theme information and component's style definition to the requested page. the stylesheet files that will be injected to the page at runtime.

Theme framework will injects the stylesheet files - as declared in component's style definition - at runtime.

The screenshot below shows a simple page with WebDesktopManager with WebUI theme applied.

The result of WebDesktop Manager with Unified Modern theme will look like following:

Related Topics

• Page:
  Creating a New WebUI Application with Unified Modern Theme
• Page:
  Configuring Web Compiler Extension for Visual Studio 2015
• Page:
  Configuring Node Sass Library