Often times you will need to customize certain appearance aspects to suit your application's brands and identity. The Unified Modern theme customization is not performed on the CSS output itself. Instead, you make changes to the theme source which will be compiled into the designated CSS files.
The WebUI theme source is written in SCSS language, a special type of file which adds lots of additional functionality to CSS like variables, nesting and more which can make writing CSS easier and faster. The SCSS source files will then be compiled by the server running a web app to output a traditional CSS that browser can understand.
Before you can customize the WebUI theme source, make sure you have installed and configured a SCSS compiler in your development machine.
There are a good many applications that will get you up and running with Sass in a few minutes like: CodeKit, Compass.app, Ghostlab, Hammer, Koala, LiveReload, Prepros, Scout, etc. The WebUI theme source is compatible with most of the SCSS compilers available today. Based on our experience, we highly recommend one of the following SCSS compilers:
- Web Compiler Extension for Visual Studio 2015
A free Visual Studio extension created by Mads Kristensen that compiles LESS, Sass, JSX, ES6 and CoffeeScript files directly within Visual Studio or through MSBuild.
- Node Sass Library
If you're familiar with Node.js and already have it configured in your development machine, you might want to check out node-sass module which is a wrapper around libsass engine. The node-sass compiler performs fair faster than other compilers, and also provides a command-line interface that works in various operating system.
This page describes how you can configure Web Compiler Extension for Visual Studio 2015. In order to do this you will need to perform:
- Install Web Compiler Extension
- Configure Web Compiler for Unified Modern Theme WebUI Application
- Sample Scenario: Customizing SCSS Variable
Install Web Compiler Extension
This section shows how to install Web Compiler Extension for Visual Studio 2015. You may skip this section if Web Compiler already installed.
- Open Visual Studio 2015.
- Open Extensions and Updates dialog box (Tools / Extensions and Updates or type Extensions in the Quick Launch window). The dialog box also shows updates for installed samples and extensions. You can also download extensions from websites, or get them from other developers.
- Search Web Compiler in the Search Visual Studio Gallery window.
- Click Download, then Install.
After finishing the steps in this section, Web Compiler extension has been installed and ready to use.
Configure Web Compiler for Unified Modern Theme WebUI Application
In the this section, we are going to configure this Web Compiler extension to generate the output files in the appropriate folder.
Getting The Theme Source
To start customizing the theme, we need to add the theme source into the theme folder of your web project.
- Obtain the Theme source in the WebUI Studio installation folder (
C:\Program Files (x86)\Intersoft Solutions\WebUI Studio
- Copy the entire scss folder then paste them to the target theme folder of your web project.
Generate and Configure compilerconfig.json
After obtain the theme source, you're now ready to customize the WebUI modern theme. Next, let's generate and configure compilerconfig.json .
- Open your web project in Visual Studio.
- Locate scss folder in the Solution Explorer. Can Include In Project if necessary.
- Right-click any .scss file in Solution Explorer to setup compilation for the first time.
- A file called compilerconfig.json is created in the root of the project. This file let's you modify the behavior of the compiler.
Open the compilerconfig.json in editor and set the output files to the appropriate folder. Replace the configuration in compilerconfig.json with the following definition.
Sample Scenario: Customizing SCSS Variable
With everything sets up, we're now ready to customize the WebUI modern theme. Customizing the WebUI theme is designed to be easy and straightforward, thanks to the unified theming framework and the leverage of modern stylesheet preprocessors. Instead of making changes to the CSS styles directly, you can easily modify the predefined SCSS variables which affect all styles across multiple components that reference the variables.
For example, consider that you want to change the focus border color of all WebUI input components, all you need to do is defining the$control-frame-border-focus variable in the _custom-variables.scss file such as shown below.
Save the changes in _custom-variables.scss file. Right after the file is saved, Web Compiler is compiling. By default, WebCompiler automatically generates the output stylesheet files when one of the related source files are modified in the IDE.
The webui-bootstrap.min.css file is updated showing the changes that we made in scss file.
The screenshot below shows an example result of WebCombo and WebInput before and after the SCSS variable is customized. Notice how a single variable customization affects all WebUI components sharing the same semantic. At this point, you should have gain better understanding of the WebUI Unified Theme goals.