Color Schemes

Web Central user interface supports per-user color schemes. The built-in colors schemes are:

• Slate: Fairly neutral color scheme, appropriate for most customers in most countries. Medium-large fonts, easy to read even on high resolution displays. May not be appropriate for users with low-resolution screens, such as 1366x786 or 1280x1024.
• Impact : Mostly monochrome and high contrast, appropriate for projectors and for users who require more contrast.

• Small Fonts -- Same colors as Slate, but has smaller fonts for users with small low-resolution screens.

Business partners can customize built-in color schemes, or create new ones.

Fonts

All Web Central UI elements text sizes are controlled by few variables in a stylesheet file. Business partners and customers can change these values if they desire smaller or larger font sizes for all views and all users.

View Types

The user interface also supports view types that optimize user experience for a specific group of users. The built-in view types are:

• Form : big, obvious controls for self-service user forms.
• Console : smaller, less-obtrusive controls, for process owner consoles.
• Dashboard : small controls, dense information, for operational dashboards.

LESS

Colors schemes and view type styles are defined in LESS files. LESS is a style-sheet language that extends CSS, and compiles into CSS. Use it to define reusable variables and classes, to make color scheme customization easy.

All colors for a specific scheme are defined as variables in a small color scheme LESS file. For example:

These variables are then used throughout the main core style sheet:

The same color can be used in many CSS classes. It is easier to customize colors in the small color scheme file than to search for each usage of the color in the main style sheet.

You can learn more about LESS at http://lesscss.org/ .

LESS Font Sizes

All font sizes are defined in the schema\ab-core\less\ab-common.less file:

// font size for normal text
@fontSizeText: 13px;
// font size for all action buttons
@fontSizeButtons: 14px;
// font size for normal titles: panel titles, tab titles
@fontSizeTitle: 18px;
// font size for bigger titles: category titles in category grids, tab titles in view with viewType="console"
@fontSizeBigTitle: 20px;
// font size for dialog window titles
@fontSizeWindowTitle: 24px;

LESS Files

LESS files are stored in the schema\ab-core\less folder.

File name	Description
ab-color-scheme-impact.less	Color definitions for the High Impact color scheme.
ab-color-scheme-slate.less	Color definitions for the Slate color scheme.
ab-color-scheme-slate-small.less	Color definitions for the Slate - Small Font color scheme.
ab-page-navigation-impact.less	Home page styles for the High Impact color scheme.
ab-page-navigation-slate.less	Home page styles for the Slate color scheme.
ab-page-navigation-slate-small.less	Home page styles for the Slate - Small Font color scheme.
ab-common.less	Common properties used in many classes.
ab-core.less	Main Web Central style sheet. Contains CSS classes used for all color schemes.
ab-view-console.less	CSS styles for console-type views. To enable in the view: <view version="2.0" type="console">
ab-view.form.less	CSS styles for form-type views. To enable in the view: <view version="2.0" type="form">
ab-view-dashboard.less	CSS styles for dashboard-type views. To enable in the view: <view version="2.0" type="dashboard">
ab-view-default.less	CSS styles for regular views. These are used in all views that do not define the view type, e.g. <view version="2.0">

Compiling LESS to CSS

Because browsers cannot load LESS files directly, you need to compile LESS into CSS files after you make any changes in LESS files.

Compiled CSS files are stored in the schema\ab-core\css folder.

To compile all LESS files into CSS files, run the minifyCoreCss Gradle target from Eclipse:

1. Open the Gradle Tasks view and wait for tasks to load.
2. Select the webcentral-war-root / build / minifyCoreCss task.
3. Right-click and select "Run Gradle Tasks."

Changing CSS directly

During development you can make changes in compiled CSS files for testing. This allows you to skip the LESS compilation step and quickly test the changes by reloading the page in the browser. After you finish testing, always make the final changes in LESS files and compile them into CSS.

Alternately, test your changes quickly with a CSS debugger, such as Firebug.

Adding a New Color Scheme

You can add a new color scheme so that you can assign users to this color scheme in the System / Archibus Administrator - User and Security / Add or Edit User Roles view. As this is a system change, if you use this technique, your files may need updates in future releases. Nonetheless, some sites may find it useful.

To add a color scheme:

1. Add a new enumerated value to the afm_users.clr_scheme field.
   
   

2. Create a LESS file. The enumeration value, such as VIBRANT, must match the file name, such as ab-core-vibrant.less . Case does not matter, but consistency is recommended; use all caps for enumeration values, and lower case for file names.

3. Place the new .less file in the schema\ab-core\less folder. The Gradle task compiles it to .css automatically.

4. Add a task to minify the new .css file, to javascriptCss.gradle in the root folder. Here is an example for ab-core-impact.less :

   task minifyCoreImpactCss(type: com.eriwen.gradle.css.tasks.MinifyCssTask) { source = css.source.dev.ext.cssDir + "ab-core-impact.css" dest = css.source.dev.ext.cssDir + "ab-core-impact.css" }

5. Add the new task you created above to this task:

   task minifyCoreCss { group = 'build' description = 'Minifies core CSS files' dependsOn lesscss, minifyCoreImpactCss, minifyCoreSlateCss, minifyCoreSlateSmallCss, minifyCoreVibrantCss, minifyPageNavigationImpactCss, minifyPageNavigationSlateCss, minifyPageNavigationVibrantCss, minifyViewConsoleCss, minifyViewDashboardCss, minifyViewDefaultCss, minifyViewFormCss }

6. Run the minifyCoreCss Gradle task (see instructions above, under Compiling LESS to CSS ).