This page discusses how you can apply unified modern theme in WebUI application.

As a pre-requisite, you will need to be able to apply theme in WebUI application, which can be found in Applying Theme in WebUI Application page.

On this page:

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.

To learn more about unified theming, see Unified Theming.

Enabling unified theming is simple and straightforward. There are only two steps to enable unified theming:

  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 theme file represents a single file (*.ISTHEME)  that contains configurations for all the components, pages and/or controls that are contained within the Web application. Its location is defined in Location attribute in SelectedTheme node at theme project config file.

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

<?xml version="1.0" encoding="utf-8"?>
<ISTheme UseCssFramework="true">
  <ThemeGroup Name="Default" IsDefault="true">
    <ISComponents>
      <Component Type="ISNet.WebUI.WebControls.WebInput" Assembly="ISNet.WebUI.WebInput" LayoutName="WebInput Bootstrap" DataFile="webinput.isl" />
      <Component Type="ISNet.WebUI.WebCombo.WebCombo" Assembly="ISNet.WebUI.WebCombo" LayoutName="WebCombo Bootstrap" DataFile="webcombo.isl" />
      <Component Type="ISNet.WebUI.WebGrid.WebGrid" Assembly="ISNet.WebUI.WebGrid" LayoutName="WebGrid Bootstrap" DataFile="webgrid.isl" />
      <Component Type="ISNet.WebUI.WebTreeView.WebTreeView" Assembly="ISNet.WebUI.WebTreeView" LayoutName="WebTreeView Bootstrap" DataFile="webtreeview.isl" />
      <Component Type="ISNet.WebUI.WebScheduler.WebScheduler" Assembly="ISNet.WebUI.WebScheduler" LayoutName="WebScheduler Bootstrap" DataFile="webscheduler.isl" />
      <!-- WebDesktop -->
      <Component Type="ISNet.WebUI.WebDesktop.WebButton" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebButton Bootstrap" DataFile="./webdesktop/webbutton.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebCallOut" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebCallOut Bootstrap" DataFile="./webdesktop/webcallout.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebContextMenu" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebContextMenu Bootstrap" DataFile="./webdesktop/webcontextmenu.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebDesktopManager" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebDesktopManager Bootstrap" DataFile="./webdesktop/webdesktopmanager.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebDialogBox" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebDialogBox Bootstrap" DataFile="./webdesktop/webdialogbox.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebExplorerPane" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebExplorerPane Bootstrap" DataFile="./webdesktop/webexplorerpane.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebMenuBar" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebMenuBar Bootstrap" DataFile="./webdesktop/webmenubar.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebNavPane" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebNavPane Bootstrap" DataFile="./webdesktop/webnavpane.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebNotification" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebNotification Bootstrap" DataFile="./webdesktop/webnotification.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebPaneManager" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebPaneManager Bootstrap" DataFile="./webdesktop/webpanemanager.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebSplitter" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebSplitter Bootstrap" DataFile="./webdesktop/websplitter.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebTab" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebTab Bootstrap" DataFile="./webdesktop/webtab.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebToolBar" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebToolBar Bootstrap" DataFile="./webdesktop/webtoolbar.isl" />
      <Component Type="ISNet.WebUI.WebDesktop.PlaceHolderManager" Assembly="ISNet.WebUI.WebDesktop" LayoutName="PlaceHolderManager Bootstrap" DataFile="./webdesktop/placeholdermanager.isl" />
      <!-- WebEssentials -->
      <Component Type="ISNet.WebUI.WebEssentials.WebAccordion" Assembly="ISNet.WebUI.WebEssentials" LayoutName="WebAccordion Bootstrap" DataFile="./webessentials/webaccordion.isl" /> 
      <Component Type="ISNet.WebUI.WebEssentials.WebCalendar" Assembly="ISNet.WebUI.WebEssentials" LayoutName="WebCalendar Bootstrap" DataFile="./webessentials/webcalendar.isl" /> 
      <Component Type="ISNet.WebUI.WebEssentials.WebExpander" Assembly="ISNet.WebUI.WebEssentials" LayoutName="WebExpander Bootstrap" DataFile="./webessentials/webexpander.isl" /> 
      <Component Type="ISNet.WebUI.WebEssentials.WebListBox" Assembly="ISNet.WebUI.WebEssentials" LayoutName="WebListBox Bootstrap" DataFile="./webessentials/weblistbox.isl" /> 
      <Component Type="ISNet.WebUI.WebEssentials.WebProgressBar" Assembly="ISNet.WebUI.WebEssentials" LayoutName="WebProgressBar Bootstrap" DataFile="./webessentials/webprogressbar.isl" /> 
      <Component Type="ISNet.WebUI.WebEssentials.WebRating" Assembly="ISNet.WebUI.WebEssentials" LayoutName="WebRating Bootstrap" DataFile="./webessentials/webrating.isl" /> 
      <Component Type="ISNet.WebUI.WebEssentials.WebRibbon" Assembly="ISNet.WebUI.WebEssentials" LayoutName="WebRibbon Bootstrap" DataFile="./webessentials/webribbon.isl" /> 
      <Component Type="ISNet.WebUI.WebEssentials.WebSlider" Assembly="ISNet.WebUI.WebEssentials" LayoutName="WebSlider Bootstrap" DataFile="./webessentials/webslider.isl" /> 
      <Component Type="ISNet.WebUI.WebEssentials.WebSlidingMenu" Assembly="ISNet.WebUI.WebEssentials" LayoutName="WebSlidingMenu Bootstrap" DataFile="./webessentials/webslidingmenu.isl" /> 
      <!-- WebTextEditor -->
      <Component Type="ISNet.WebUI.WebTextEditor.WebFileUploader" Assembly="ISNet.WebUI.WebTextEditor" LayoutName="WebFileUploader Bootstrap" DataFile="./webtexteditor/webfileuploader.isl" /> 
      <Component Type="ISNet.WebUI.WebTextEditor.WebTextEditor" Assembly="ISNet.WebUI.WebTextEditor" LayoutName="WebTextEditor Bootstrap" DataFile="./webtexteditor/webtexteditor.isl" />
    </ISComponents>
  </ThemeGroup>
</ISTheme>

 

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.

<?xml version="1.0" encoding="utf-8"?>
<ISTheme UseCssFramework="true">
  <ThemeGroup Name="Default" IsDefault="true">
    <ISComponents>
      <Component Type="ISNet.WebUI.WebControls.WebInput" Assembly="ISNet.WebUI.WebInput" LayoutName="WebInput Bootstrap" DataFile="webinput.isl" />
      <Component Type="ISNet.WebUI.WebCombo.WebCombo" Assembly="ISNet.WebUI.WebCombo" LayoutName="WebCombo Bootstrap" DataFile="webcombo.isl" />
      <Component Type="ISNet.WebUI.WebGrid.WebGrid" Assembly="ISNet.WebUI.WebGrid" LayoutName="WebGrid Bootstrap" DataFile="webgrid.isl" />
      <Component Type="ISNet.WebUI.WebTreeView.WebTreeView" Assembly="ISNet.WebUI.WebTreeView" LayoutName="WebTreeView Bootstrap" DataFile="webtreeview.isl" />
      <Component Type="ISNet.WebUI.WebScheduler.WebScheduler" Assembly="ISNet.WebUI.WebScheduler" LayoutName="WebScheduler Bootstrap" DataFile="webscheduler.isl" />
      <!-- WebDesktop -->
      <Component Type="ISNet.WebUI.WebDesktop.WebButton" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebButton Bootstrap" DataFile="./webdesktop/webbutton.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebCallOut" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebCallOut Bootstrap" DataFile="./webdesktop/webcallout.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebContextMenu" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebContextMenu Bootstrap" DataFile="./webdesktop/webcontextmenu.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebDesktopManager" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebDesktopManager Bootstrap" DataFile="./webdesktop/webdesktopmanager.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebDialogBox" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebDialogBox Bootstrap" DataFile="./webdesktop/webdialogbox.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebExplorerPane" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebExplorerPane Bootstrap" DataFile="./webdesktop/webexplorerpane.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebMenuBar" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebMenuBar Bootstrap" DataFile="./webdesktop/webmenubar.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebNavPane" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebNavPane Bootstrap" DataFile="./webdesktop/webnavpane.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebNotification" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebNotification Bootstrap" DataFile="./webdesktop/webnotification.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebPaneManager" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebPaneManager Bootstrap" DataFile="./webdesktop/webpanemanager.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebSplitter" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebSplitter Bootstrap" DataFile="./webdesktop/websplitter.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebTab" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebTab Bootstrap" DataFile="./webdesktop/webtab.isl" /> 
      <Component Type="ISNet.WebUI.WebDesktop.WebToolBar" Assembly="ISNet.WebUI.WebDesktop" LayoutName="WebToolBar Bootstrap" DataFile="./webdesktop/webtoolbar.isl" />
      <Component Type="ISNet.WebUI.WebDesktop.PlaceHolderManager" Assembly="ISNet.WebUI.WebDesktop" LayoutName="PlaceHolderManager Bootstrap" DataFile="./webdesktop/placeholdermanager.isl" />
      <!-- WebEssentials -->
      <Component Type="ISNet.WebUI.WebEssentials.WebAccordion" Assembly="ISNet.WebUI.WebEssentials" LayoutName="WebAccordion Bootstrap" DataFile="./webessentials/webaccordion.isl" /> 
      <Component Type="ISNet.WebUI.WebEssentials.WebCalendar" Assembly="ISNet.WebUI.WebEssentials" LayoutName="WebCalendar Bootstrap" DataFile="./webessentials/webcalendar.isl" /> 
      <Component Type="ISNet.WebUI.WebEssentials.WebExpander" Assembly="ISNet.WebUI.WebEssentials" LayoutName="WebExpander Bootstrap" DataFile="./webessentials/webexpander.isl" /> 
      <Component Type="ISNet.WebUI.WebEssentials.WebListBox" Assembly="ISNet.WebUI.WebEssentials" LayoutName="WebListBox Bootstrap" DataFile="./webessentials/weblistbox.isl" /> 
      <Component Type="ISNet.WebUI.WebEssentials.WebProgressBar" Assembly="ISNet.WebUI.WebEssentials" LayoutName="WebProgressBar Bootstrap" DataFile="./webessentials/webprogressbar.isl" /> 
      <Component Type="ISNet.WebUI.WebEssentials.WebRating" Assembly="ISNet.WebUI.WebEssentials" LayoutName="WebRating Bootstrap" DataFile="./webessentials/webrating.isl" /> 
      <Component Type="ISNet.WebUI.WebEssentials.WebRibbon" Assembly="ISNet.WebUI.WebEssentials" LayoutName="WebRibbon Bootstrap" DataFile="./webessentials/webribbon.isl" /> 
      <Component Type="ISNet.WebUI.WebEssentials.WebSlider" Assembly="ISNet.WebUI.WebEssentials" LayoutName="WebSlider Bootstrap" DataFile="./webessentials/webslider.isl" /> 
      <Component Type="ISNet.WebUI.WebEssentials.WebSlidingMenu" Assembly="ISNet.WebUI.WebEssentials" LayoutName="WebSlidingMenu Bootstrap" DataFile="./webessentials/webslidingmenu.isl" /> 
      <!-- WebTextEditor -->
      <Component Type="ISNet.WebUI.WebTextEditor.WebFileUploader" Assembly="ISNet.WebUI.WebTextEditor" LayoutName="WebFileUploader Bootstrap" DataFile="./webtexteditor/webfileuploader.isl" /> 
      <Component Type="ISNet.WebUI.WebTextEditor.WebTextEditor" Assembly="ISNet.WebUI.WebTextEditor" LayoutName="WebTextEditor Bootstrap" DataFile="./webtexteditor/webtexteditor.isl" />
    </ISComponents>
  </ThemeGroup>
  <StyleSheets>
    <StyleSheet>css/bootstrap.min.css</StyleSheet>
    <StyleSheet>css/webui-bootstrap.min.css</StyleSheet>
  </StyleSheets>
</ISTheme>

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.

<html>
    <head>
        <!-- automatically generated links based on WebUI theme definition -->
        <link rel="stylesheet" href="/Themes/webui-bootstrap/css/bootstrap.min.css" type="text/css" />
        <link rel="stylesheet" href="/Themes/webui-bootstrap/css/webui-bootstrap.min.css" type="text/css" />
    </head>
    <body>
        <!-- WebUI component markup output -->
    </body>
</html>


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.

<ISWebDesktop:WebDesktopManager ID="WebDesktopManager1" RenderingMode="HTML5" runat="server">
  <WindowSettings MinimumSize="195,0" BorderType="Simple" CommandButtonBorderType="Simple" CaptionButtonSpacing="0" ApplyContainerStyle="true">
        <ContainerStyle CssClass="desktop-window-container"></ContainerStyle>
        <WindowStyle>
            <Normal CssClass="desktop-window"></Normal>
            <Over CssClass="desktop-window hover"></Over>
            <Active CssClass="desktop-window active"></Active>
        </WindowStyle>
        <CaptionStyle>
            <Normal CssClass="desktop-window-caption"></Normal>
            <Over CssClass="desktop-window-caption hover"></Over>
            <Active CssClass="desktop-window-caption active"></Active>
        </CaptionStyle>
        <CaptionButtonStyle>
            <Normal CssClass="desktop-window-captionbutton"></Normal>
            <Over CssClass="desktop-window-captionbutton hover"></Over>
            <Active CssClass="desktop-window-captionbutton active"></Active>
        </CaptionButtonStyle>
        <CommandButtonStyle>
            <Normal CssClass="desktop-window-commandbutton"></Normal>
            <Over CssClass="desktop-window-commandbutton hover"></Over>
            <Active CssClass="desktop-window-commandbutton active"></Active>
        </CommandButtonStyle>
        <CommandButtonDisabledStyle CssClass="desktop-window-commandbutton disabled"></CommandButtonDisabledStyle>
    </WindowSettings>
    <FrameStyle CssClass="desktop-frame"></FrameStyle>
    <TaskBarStyle CssClass="desktop-taskbar" Height="40"></TaskBarStyle>
    <TaskBarButtonStyle>
        <Normal CssClass="desktop-taskbarbutton"></Normal>
        <Over CssClass="desktop-taskbarbutton hover"></Over>
        <Active CssClass="desktop-taskbarbutton active"></Active>
    </TaskBarButtonStyle>
    <LoaderStyle CssClass="desktop-loader"></LoaderStyle>
    <LoaderProgressStyle CssClass="desktop-loaderprogress"></LoaderProgressStyle>
    <ShortcutStyle>
        <Normal CssClass="desktop-shortcut"></Normal>
        <Over CssClass="desktop-shortcut hover"></Over>
        <Active CssClass="desktop-shortcut active"></Active>
    </ShortcutStyle>
    <MenuStyles>
      <System MenuWindowType="Normal" HasBackgroundStrip="False" HighlightMode="UseWebStyle" HighlightDisabledItem="false" MenuDropShadow="false">
          <FrameStyle CssClass="common-menu"></FrameStyle>
          <SeparatorStyle CssClass="common-menu-separator"></SeparatorStyle>
          <ItemStyle>
            <Normal CssClass="common-menu-item"></Normal>
            <Over CssClass="common-menu-item hover"></Over>
            <Active CssClass="common-menu-item active"></Active>
          </ItemStyle>
          <CheckedItemStyle>
            <Normal CssClass="common-menu-checkeditem"></Normal>
            <Over CssClass="common-menu-checkeditem hover"></Over>
            <Active CssClass="common-menu-checkeditem active"></Active>
          </CheckedItemStyle>
          <DisabledItemStyle>
            <Normal CssClass="common-menu-item disabled"></Normal>
            <Over CssClass="common-menu-item disabled hover"></Over>
            <Active CssClass="common-menu-item disabled active"></Active>
          </DisabledItemStyle>
        </System>
    </MenuStyles>
  <ImagesSettings CloseActive="t.gif" CloseDown="t.gif" CloseInactive="t.gif" CloseOver="t.gif"
    MinimizeActive="t.gif"  MinimizeDown="t.gif"  MinimizeInactive="t.gif"  MinimizeOver="t.gif"
    MaximizeActive="t.gif"  MaximizeDown="t.gif"  MaximizeInactive="t.gif"  MaximizeOver="t.gif"
    RestoreActive="t.gif"  RestoreDown="t.gif"  RestoreInactive="t.gif"  RestoreOver="t.gif"/>
</ISWebDesktop:WebDesktopManager>

To verify if your project has applied the unified modern theme correctly, please refer to New WebUI Modern Theme and browse through the comprehensive style reference of each WebUI component.

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:

If you prefer to create a new WebUI application with unified theming instead, please see Creating a New WebUI Application with Unified Modern Theme.

In addition, you can also learn how the unified theme works by opening the provided WebUI.Unified.Samples solution which you can locate under the Windows Start Menu > Intersoft Premier Studio 2016 R1 > WebUI group.



Related Topics