Skip to end of metadata
Go to start of metadata

WebEssentials 4 brings a collection of essential web components featuring a whole new experience for developers and users through full support for the new WebUI Unified Theming. The latest version presents a modern theme which favors clean yet elegant look. All components in WebEssentials have been revamped inside and out with latest web standards such as HTML5, CSS3, and SVG, delivering gorgeous and pixel-perfect user interface compatible with major latest browsers.

This page explains the concepts, features, benefits and the best practices when using WebEssentials unified theme in your web projects.

If you're not familiar with WebUI unified theming, please refer to Unified Theming and WebUI Modern Theme.

On this page:

Introducing WebEssentials Modern Theme

WebEssentials 4 introduces a brand-new modern theme which was built upon unified theming framework. It's now possible to streamline the WebEssentials styles in a unified theme, enabling a consistent look-and-feel across the application. WebEssentials consists of nine sub-controls which are WebAccordion, WebCalendar, WebExpander, WebListBox, WebProgressBar, WebRating, WebRibbon, WebSlider, and WebSlidingMenu. Each of these controls has been thoughtfully redesigned from the inside and out for the best possible outcome for making your web projects more exquisite than ever before.

Here's how the WebEssentials controls look like with unified modern theme.



 



 





WebAccordion

WebAccordion is a collapsible content panel featuring a modern minimalist style and silky-smooth expand/collapse animation. Take advantage of its tight integration with the Visual Studio IDE to easily add new items and set their content directly, or use IFrame mode to host external pages in WebAccordion items.

Item Header Content

Accordion item header content can be configured to your liking by specifying HeaderText property for the text display and HeaderImageURL property for the icon display. See the figure and how to apply this feature below.

Expand Direction

You can also change the expand direction to fit your web projects. To apply this feature, specify the value of ExpandDirection property whether to Bottom, Top, Left, or Right. Here's the example for expanding WebAccordion to top direction.

Contextual Classes

The new WebAccordion has the same contextual classes as Bootstrap's. They are default, success, info, warning, danger, and primary. These classes can be implemented in both special bar and explorer bar. Look at the figure below.

To apply these changes, configure the ItemStyle CssClass property, look at the following example.

WebCalendar

WebCalendar provides a fast, convenient way to navigate by date and select dates and date ranges.

Calendar Display

User can change calendar display whether to day-view, month-view, or year-view  by clicking on the item-header. See the figure below

By using NumberOfCalendarDisplayed property, you can easily change number of calendar display to suit your needs. You can also enable multiple dates selection by setting EnableMultipleSelection property to True. Below is the example for showing three calendars display and enabling multiple dates selection.

And here's the results.

WebExpander

WebExpander eases the burden of managing lengthy content by dividing it into multiple smaller sections. Use its customizable layout and diverse expansion modes to create a unique, personalized appearance that complements your Rich Internet Applications.

Expand Modes

There are two expand modes that you can set in WebExpander, Fixed and Flow. Fixed mode gives you a consistent look of the ExpanderItem while Flow mode moves the ExpanderItem as it expands. Here's an overview of the two modes.

And see the code below for the example.

Flow Modes

ExpanderItem flow can also be configured whether to Bottom, Top, Left, or Right. For complete figure examples, see WebEssentials Modern Theme Style Reference.

WebListBox

Using text, images, or both, WebListBox unleashes your inner creativity, allowing you to build eye-popping vertical navigators. A rich set of predefined themes provides an endless variety of choices bound to suit every website. For more exacting applications, a comprehensive set of style and layout properties enables you to create navigation set to your own precise specifications in mere minutes.

Selection Modes

By changing the value of SelectionMode property to Multiple, WebListBox allows you to select more than one items to suit your application's needs. You can also set the value to Single so users can only select one item at a time. Here's the code example.

And this is the result for Multiple Selection Mode.

Display Modes

You can specify the list menu item content by setting the DisplayMode property in the LayoutSettings, see below for example.

Here are some possible outcome by changing the DisplayMode.

Active Item Indicator

WebListBox provides you with active item indicator which gives your web projects more stylish look, look at the figure below.

To activate this feature, enable DisplayActiveItemIndicator property to True in LayoutSettings. See at the example below.

WebProgressBar

Whether your preference is vertical or horizontal, WebProgressBar provides an elegant progress indicator for your Web application.

Animation

Animation speed on the progress bar can be set easily using Step and AnimationLatency properties. Here's the example to configure the animation.

Width is used for determined the length of the WebProgressBar, while MaxSliderDimension property is used to determine the length of the progress bar. The lower the value of Step property, the smoother the progress bar moves and the higher the value of AnimationLatency property, the slower the progress bar moves. Look the figure below for example.

Modes

There are two types of WebProgressBar Modes, Determinate and Indeterminate. Determinate mode allows users to see the on-going process of a progress. Indeterminate mode is used when there's an undetermined amount of progress in a process. Here's the code example for using the the Indeterminate mode.

Orientation

To change the WebProgressBar orientation, simply set the Orientation property to horizontal or vertical. Look below for code example.

Contextual Classes

Use contextual classes to colorize WebProgressBar control in a form to convey validation state to your user. There are four states available, primary (default), success, warning, and danger. You could add striped effect on WebProgressBar by simply adding striped-bar class and could be used along with available WebProgressBar states. To apply the style, simply add the style to the FrameStyle's CssClass property. Below are the code and figure example. 

Striped WebProgressBar can also be animated by adding active class to the CssClass.

WebRating

WebRating is a powerful and stylish addition to your blog or forum, or any Web applications that require an interactive user rating capability.

Precision Modes

You can set the value of Precision property whether to Whole, Half, or ExactPosition. The value Whole represents a whole star, Half means you can rate the control to half value, and ExactPosition allows user to select the value of  the WebRating precisely. Look below for example.

It's also possible to set the Tooltip property to [currentValue][selectedValue], [maximumValue][minimumValue], and custom value.

Orientation

This feature allows the WebRating control to be display horizontally or vertically by setting the Orientation property. See the following code and figure for example.

Reversed WebRating

WebRating can be set reversly by setting IsReversed property to True. See below example.

ValidationState API

WebRating now supports built-in validation styles available in the WebUI unified theme and also adds integration to ASP.NET validators. When the associated validator returns an invalid result, WebRating automatically updates its styles with an error style. Likewise, the styles will be updated accordingly when the input satisfies the validators. In addition, WebRating also introduces OnValidate client-side event which will be invoked whenever the validator is performing validation on the WebRating control. WebRating also provides a new SetValidationState API allowing you to change the contextual color programmatically.

These new API allows you to implement custom validation process. For instance, you might want to update the WebRating with success contextual color when the validation returns a valid value. You can easily achieve this scenario by handling the OnValidate event to intercept the validation process, then call the SetValidationState method accordingly. Take a look at the example below.

 

 

Size Class Variants

To change the size of WebRating, apply the class to FrameStyle's CssClass property. See the code below.

Form Group Variants

Depending on the usage, you can also apply form group size. Look at the figure below.


To apply a specific form group size, see the example below.

Contextual Classes

Whether to validate state or to decorate your web applications, this feature allows you to change the color on WebRating. There are four states available, primary (default), success, warning, and danger. Add the style to the FrameStyle's CssClass property to apply the stye.

To apply the form group styles, add the style class along with the default class. There are three types of styling that you can add, has-success class, has-warning class, and has-error class. Look for the example below for adding the success state class.

WebRibbon

WebRibbon is a business-oriented ASP.NET ribbon UI control which is comprehensive, fast and easy to use. WebRibbon is part of Intersoft WebEssentials family that provides common ribbon functionality similar to the ribbon in Office applications. It consists of application menu, ribbon tab, group and group item. WebRibbon enables you to easily create rich Ribbon-friendly applications where application functions are neatly organized and related commands are grouped together.

Size States

You can change the WebRibbon group items' size behavior by configuring the MinSizeState and MaxSizeState properties. By setting the MinSizeState property to Medium, the ribbon group item will shrink when narrowing the window. If you set it to Large, the ribbon group items won't be shrunk no matter how small the window is. Meanwhile, if you set the MaxSizeState property to Medium, the ribbon group item won't be enlarged when you expand the window. See the code below for example.

Group Item Type

You can also change the WebRibbonGroupItem's GroupItemType property to DropDownListButton to have a drop down list view to fill your application needs, see the figure below.

To apply this feature, simply change the GroupItemType property value to DropDownListButton, see the following code example.

Contextual Group Style

Colorize your WebRibbonTab to make your web application more appealing. See the illustration below.

To apply the color, simply set the value of ContextualGroupStyle property in ContextualTabs whether to LightBlue, DarkBlue, Teal, Purple, Magenta, Orange, Yellow, or Green. See the following example.

WebSlider

With its fully customizable orientation and slide direction, WebSlider makes it a breeze to add a unique slider input control, tailored precisely to your application’s needs.

Label Alignment

You can set the label alignment whether to Left, Right, or Both to change the label position on WebSlider. See below for figure and code example.

Slider Rail and Slider Range

Enabling slider rail allows users to see the slider range for a certain amount of values on WebSlider. You can set the ShowSliderRail property either to True or False. If you set the value of EnableRange property to True then the slider rail will automatically shown. Take a look below for example.

Slider Type

WebSlider provides you with two types of slider, Item slider type presents users with a simple value of a certain range, while Tick slider type is used for a more accurate selection value on the WebSlider. See the following example to set the SliderType property.

Orientation

Orientation property is used when you need to change the control orientation to horizontal or vertical. Look for the following figure and code example.

ValidationState API

WebSlider now supports built-in validation styles available in the WebUI unified theme and also adds integration to ASP.NET validators. When the associated validator returns an invalid result, WebSlider automatically updates its styles with an error style. Likewise, the styles will be updated accordingly when the input satisfies the validators. In addition, WebRating also introduces OnValidate client-side event which will be invoked whenever the validator is performing validation on the WebSlider control. WebSlider also provides a new SetValidationState API allowing you to change the contextual color programmatically.

These new API allows you to implement custom validation process. For instance, you might want to update the WebRating with success contextual color when the validation returns a valid value. You can easily achieve this scenario by handling the OnValidate event to intercept the validation process, then call the SetValidationState method accordingly. Take a look at the example below.

 

Range WebSlider will return start value and end value separated by semicolon ( ; ) to validator as its value.
 

Size Class Variants

WebSlider's size can be set depending on your needs. See the following figure for example.

To apply a specific size class, see the example below.

It's prohibited to determine Height property when using size class as the size class won't be applied.

Contextual Classes

This feature allows users to validate the input by changing the slider's color. There are four states available, primary (default), success, warning, and danger.

Look for the example code below to apply the style in FrameStyle's CssClass property.

WebSlidingMenu

Easily build sophisticated hierarchical navigation systems with WebSlidingMenu. This powerful component can host virtually unlimited items in the most complex structures. Its advanced Load-on-Demand technology provides high performance with minimal overhead by intelligently requesting items just before your users need them.

Frame Style Variants

The modern theme sports three frame variants such as shown in the illustration below. By default, the frame with border and drop shadow will be applied.

The frameless variant is suitable in scenario when WebSlidingMenu is placed in a container which already has border or decorators such as in panels.

To apply a specific frame variant, simply add the style to the FrameStyle's CssClass property, see the example below.

It's important to specify the comma prefix in the CssClass property which will add the specified classes along with the default class instead of overriding the default class.

Navigation Indicator

You can set the value of LayoutSettings' ShowNextIndicator property to True to display the arrow indicator on the sliding menu item, see the following example.

Contextual Classes

Whether to validate state or to decorate your web applications, this feature allows you to change the color on WebSlidingMenu. There are four states available, default, info, success, warning, and danger. Take a look at the code below to apply the info state class.

Applying Theme

Building on unified theming concept, the WebEssentials modern theme is designed as part of the WebUI modern theme. This means that once you applied the WebUI modern theme, it will automatically theme the WebEssentials control without additional code. To learn more how to apply the WebUI modern theme, please see Applying Unified Modern Theme in WebUI Application and Creating a New WebUI Application with Unified Modern Theme.

If you're new to the unified theming concept or unfamiliar with WebUI modern theme, please visit Unified Theming and New WebUI Modern Theme respectively. These two pages provide comprehensive details you need to know to understand how WebUI modern theme works.

Best Practices

If you're applying the modern theme to an existing web projects, please review your existing code to comply with the following best practices:

  • Remove appearance settings that are defined explicitly in the control. For instances, UseDefaultStyle is an examples of settings that might affect appearance.
  • Remove style settings that are defined explicitly in the control. Most style settings have Style suffix and are type of either WebStyle or DynamicStyle, such as FrameStyle, TodayStyle, HeaderStyle, and so on.
  • If you applied a WebEssentials layout file (.isl) from code behind, the code should be no longer necessary and can be safely removed.

In conclusion, you should avoid defining settings that might affect appearance such as explicit styles, since all styles are defined externally and streamlined in the CSS stylesheets. Defining appearance-related settings might introduce conflict with the theme definition and produce unexpected results.
As the result, your WebEssentials control definition should look much cleaner and simpler. The following example shows a simple WebCalendar control that should be themed perfectly.

Customizing Theme

With unified theming concept, you no longer specify any style settings explicitly in the control markup. Written completely in developer-friendly SCSS language, all WebEssentials styles are now streamlined in CSS classes contained in the theme source. This makes it easier for you to review the overall style definitions and make necessary changes to the styles.

Customizing the WebEssentials theme source requires you to copy the source to your projects and configure a SCSS compiler. For more information how to customize WebUI theme source, please see Customizing WebUI Modern Theme.

WebEssentials SCSS Variables

For easy customization, the WebEssentials modern theme has provided a number of variables relating to common appearance settings. The following list shows the available SCSS variables for WebEssentials.

The complete SCSS variables can be found in _variables.scss, while the WebEssentials theme source can be found in the _webessentials.scss file located in the theme source folder.

For more information how to customize SCSS variables and ensure the output is properly generated, see Customizing SCSS Variables.

WebEssentials Layout Definition

In addition to the styles defined in the SCSS, one of the main component in a theme source is the component layout definition. The layout definition contains the contracts between the control and the CSS classes. The connection between the layout definition and the corresponding controls are automatically taken care by the WebUI Theme Framework at runtime.

To get a better understanding of the WebEssentials styles, see its layout definition below.

webcalendar.isl

For complete visualization details of WebGrid modern theme, please refer to WebEssentials Modern Theme Style Reference.