Comflow Styling

Introduction

The document describes how you manage styling of Comflow, i.e. look and feel.

The document is valid for Comflow 2.18 and later.

Styling

The general styling of the Comflow portal has changed from version 2.16. The ambition has been to modernize the UI and make custom styling easier by using a CSS framework and, as far as possible, concentrate the style settings to one single file. This has been accomplished by using the Sass framework. See http://en.wikipedia.org/wiki/Sass_%28stylesheet_language%29.

Import Plugin

Sass is a framework for generating .css files. Sass compiles a number of modules into one single .css file, in our case, the comflow.css file. A certain folder structure is needed for the Sass framework to run correctly. That structure is decided in the net.comactivity.renderer plugin. If you don't have that source code checked out in your workspace, you must import that plugin. Goto to File -> Import -> Plugins and Fragments. Choose the 'Binary projects with linked content' option, press 'Next', and point to the net.comactivity.renderer plugin to add. You can see the folder structure under PublicRoot/css. The interesting part is the _config.scss file located in the PublicRoot/css/sass folder.

The _config.scss file and Custom Styling

The _config.scss file is the only file you must edit in order to style your portal. In that file, there are a number of properties that can be edited for styling menus, fields, labels, segments et c.

The first part of the file, called // CUSTOM_COLORS, contains colors that you can define on your own as custom colors. There is no limit for the number of custom colors defined.

Every color has a variable name prefixed with a '$' sign, and after that, the color itself is declared, either as RGB rgb(x,y,z), or HEX #FFFFFF. Variables declared further down in the file can reference other variables as long as those variables are declared in advance. Look into the file for full example.

If you for instance, want to lighten or darken a color, you can make use of Sass functionality when creating your custom colors. Here is a short example:

// CUSTOM_COLORS

$blue: rgb(0, 0, 255);

$lightblue: lighten($blue, 50);

$darkblue: darken($blue, 50);

$lightgreen: lighten(rgb(0, 255, 0), 40);

$darkred: darken(#FF0000, 30);

These custom colors can then be referenced later on in the config file.

Below is a description of the config file, and all its properties. The custom colors used are Comflow standard colors.

// SYSTEM_COLORS

$danger: #e74c3c;

$alarm: #f1c40f;

$warning: #f1c40f;

$info: #3498db;

$success: #2ecc71;

// CUSTOM_COLORS

$light-blue: rgb(115,188,232);

$dark-blue: rgb(0,126,193);

$silver: rgb(216,217,218);

// LOGIN

$login-link-color: $dark-blue;

$login-link-hover-color: $light-blue;

$login-form-background-color: #edeff1;

// LOGIN_BUTTON

$login-button-background-color: #007ec1;

$login-button-hover-color: #01a7ff;

$login-button-active-color: #006ba4;

$login-button-focus-color: #006ba4;

$login-button-text-hover-color: #fff;

// RSS

$rss-link-color: $dark-blue;

$rss-link-hover-color: $light-blue;

// END_RSS

// MESSAGE

$error-message-background-color: $danger;

$error-message-text-color: #fff;

$shutdown-message-background-color: $alarm;

$shutdown-message-text-color: #fff;

$info-message-background-color: $info;

$info-message-text-color: #fff;

$user-message-background-color: $success;

$user-message-text-color: #fff;

$message-count-background-color: #e95f34;

$message-count-text-color: #fff;

// PORTAL

$portal-background-color: #fff;

$portal-header-background-color: #fff;

$portal-top-right-logo-color: #000;

$comflow-font-size: 11px;

$comflow-font-factor: 6.0;

$comflow-text-color: #0b333c;

$comflow-icon-color: #666;

// SIDE_NAVIGATION

$side-navigator-background-color: #fff;

$side-navigator-activities-header-background-color: $light-blue;

$side-navigator-header-background-color: $light-blue;

$side-navigator-toggle-color: $dark-blue;

$side-navigator-user-info-background-color: $light-blue;

$side-navigator-user-info-text-color: #fff;

$side-navigator-icon-hover-color: $silver;

// TOP_NAVIGATION

$top-navigator-background-color: #ebebeb;

$top-navigator-text-color: #0b333c;

$top-navigator-hover-color: $light-blue;

$top-navigator-hover-text-color: #fff;

$top-navigator-height: 8px;

$top-navigator-width: 10px;

$top-navigator-font-size: 13px;

$top-navigator-horizontal-separator-height: 22px;

$top-navigator-horizontal-separator-background-color: #ccc;

$top-navigator-subitem-background-color: #0b333c;

$top-navigator-subitem-text-color: $text-dark-color;

$top-navigator-subitem-hover-color: $light-blue;

$top-navigator-subitem-hover-text-color: #fff;

$top-navigator-icon-hover-color: $light-blue;

// PORTLET

$portlet-background-color: #fff;

$portlet-border-left-color: #b7babc;

$portlet-border-bottom-color: #b7babc;

$portlet-border-right-color: #b7babc;

$portlet-header-title-bar-color: $light-blue;

$portlet-header-title-bar-text-color: #fff;

$portlet-header-title-bar-icon-color: #fff;

$portlet-header-title-bar-icon-hover-color: $silver;

$portlet-header-title-font-size: 16px;

$portlet-header-title-bar-height: 26px;

$toolbar-icon-in-view-color: gray;

$toolbar-icon-in-view-hover-color: $light-blue;

$record-tooltip-background-color: $silver;

// SEGMENT_HEADER

$segment-header-color: #fff;

$segment-header-text-color: $dark-blue;

$segment-header-border-bottom-color: #bbb;

$segment-header-border-top-left-radius: 8px;

$segment-header-border-top-right-radius: 8px;

$segment-header-title-font-size: 12px;

$segment-header-height: 20px;

// SEGMENT_BODY

$segment-background-color: #fff;

$segment-border-top-color: #fff;

$segment-border-bottom-color: #fff;

$segment-border-left-color: #fff;

$segment-border-right-color: #fff;

$segment-border-width: 1px;

$segment-border-top-left-radius: 4px;

$segment-border-top-right-radius: 4px;

$segment-border-bottom-left-radius: 4px;

$segment-border-bottom-right-radius: 4px;

// FIELD_GROUP

$field-group-label-color: #666;

$field-group-border-color: #bbb;

// FIELD

$field-input-text-color: $text-dark-color;

$prompt-field-border-color: #d3d5d6;

// DETAIL_FIELD

$detail-field-input-background-color: #fff;

$detail-field-input-border-color: #d3d5d6;

$detail-field-output-background-color: $segment-content-background-color;

$detail-field-output-border-color: $segment-content-background-color;

$detail-field-output-text-color: #000;

// DETAIL_LABEL

$detail-label-color: #666;

// TEXT_AREA

$text-area-output-background-color: $detail-field-output-background-color;

// BROWSE_SEGMENT

$browse-caption-text-color: #666;

$browse-caption-background-color: lighten(rgb(115,188,232), 20%);

$browse-even-row-color: #fff;

$browse-odd-row-color: #f7f7f7;

$browse-output-text-color: #000;

$browse-row-height: 20px;

$browse-search-row-background-color: #f7f7f7;

$browse-highlight-row-color: #a3d9fd;

$browse-summary-row-color: lighten($dark-blue,50%);

$browse-average-row-color: lighten($dark-blue,45%);

// TAB_ITEM

$tab-item-font-size: 12px;

$tab-item-selected-text-color: gray;

$tab-item-deselected-text-color: $text-light-color;

$tab-item-hover-text-color: $dark-blue;

$tab-item-selected-background-color: #fff;

$tab-item-border-width: 1px;

$tab-item-border-top-color: #aaa;

$tab-item-border-bottom-color: #fff;

$tab-item-border-left-color: #aaa;

$tab-item-border-right-color: #aaa;

$tab-item-border-top-left-radius: 4px;

$tab-item-border-top-right-radius: 4px;

// PROMPT

$prompt-title-background-color: $light-blue;

// BUTTON

$button-background-color: #ddd;

$button-hover-color: #bebebe;

$button-text-color: #000;

$button-border-color: #ccc;

$button-border-hover-color: #adadad;

$paging-button-background-color: $segment-content-background-color;

// AJAX_POPUP

$ajax-popup-odd-row-background-color: $browse-odd-row-color;

$ajax-popup-even-row-background-color: $browse-even-row-color;

There are three properties in the config file that deserve a little bit more attention.

- $comflow-font-size, default set to 11px

- $comflow-font-factor, default set to 6

- $browse-row-height, default set to 20px

Properties $comflow-font-size and $comflow-font-factor work together in order to calculate the width of a label and/or a field. The larger the font size, the larger the font factor. You have to experiment a little to decide an appropriate relation between these two properties.The $browse-row-height property is dependent on the $comflow-font-size property. The larger the font size, the larger you should set the browse row height.

Important. You can only add custom colors to the config file, and no other properties. Comments in the config file are prefixed with '//'. You can of course add your own comments, but do not remove the comments that are already there.

Scout

The PublicRoot/css/comflow.css file is the only css file deployed on the web server. The file is automatically generated by a css framework called Sass. Scout is a tool that you can install on your computer, and then Scout will help you generating your comflow.css file. However, first you need to either create a new Java project in your workspace, or edit an existing one in order to create the required folder structure. The recommended way is to create a new project. Copy the PublicRoot folder structure from the net.comactivity.renderer plugin into your projects' root folder. You can remove all folders except the css folder under the PublicRoot folder.

- Goto http://mhs.github.io/scout-app/.

- Download Scout for your device.

- Install, and open Scout.

- First you have to add a folder to listen to.

- Press the lower left corner '+' button, and point to a fitting root folder, i. e. your project folder.

- Input folder: Point to the PublicRoot/css/sass folder.

- Output folder: Point to the PublicRoot/css folder. This is the folder where the comflow.css file resides.

- Press the play button.

Scout should now boot up and detect changes in the input folder. Each time the _config.scss file is edited and saved, Scout compiles all modules and overwrites the comflow.css file, hence you must refresh your project in order secure that the most recent version of the file is deployed.

Site Definition

Use SVG logos

By default, the Comflow portal use SVG logos. To override this behavior, set the "portal.logos.use.svg" property to false.

Login logos

To customize the portal, there are four new properties for setting customized logos in the portal login page. These properties are all optional, hence they can be left out. By default, standard Comactivity/Comflow logos are displayed, and the "login.logo.top.display" is set to false, and the "login.logo.side.display" is set to true.

The side logo has a standard maximum width of 115px for now. However, you can copy the .CA-loginLogoSide css class in comflow.css and put it in Custom.css. Be sure to copy the entire class. Leave properties float and margin-right unedited, and edit width to no more than 200px, and the height no more than 250px.

There is no class put on the containing div for this top logo. You can’t control this logo in Comflow, so you need to customize the size of the image to fit the requirements of the customer.

Portal logos

To further customize the portal, there are two additional new properties for setting customized logos in the portal top pane. These properties are optional, hence they can be left out. By default, standard Comactivity/Comflow logos are displayed, and the "portal.top.right.logo.display" is set to true.

Custom.css

Most parts of styling Comflow is now made by editing the _config.scss file. However, for particular custom needs that still cannot be fulfilled, the Custom.css file is yet another way to customize Comflow, and it works the same way as in previous versions.

Custom styles allow the user to apply desired style attributes in design time to the parts of the portlets that are supported with this feature. Let’s say you for some reason want a specific input field in your portlet to have a light gray background and a red border. This can easily be done in the portlet designer. First, make sure you have the Custom.css file located in your customer project under PublicRoot/css/Custom like illustrated on the left. If you don’t, then create the folder structure and the file.

Then, open your desired portlet in the portlet designer. Highlight the input field. In the designer properties tab there are two properties (“Custom Field Style” and “Custom Label Style”), which controls which classes are applied to the label and the field itself. In this case we have chosen to name the class “redField”. We have now created the reference from the field to the class which means that the field will now look for style attributes in the Custom.css file. This means that we have to specify the class and some attributes in this file.

Which brings us to the final step. Open the Custom.css mentioned in the first step. This file might be empty or it might contain other classes. However, to create the class start on a new line and specify the class like this:

.CustomClass_redField {

border:1px solid red;

background-color:#cccccc;

}

Please pay attention to the way we have named the class. To avoid the class to conflict with other classes in other stylesheets the class must have the “.CustomClass_” prefix. As you can se we have specified two attributes in the class. In other words we have now defined a field with a red border and a light gray background specified with hex-code. In order to find out what attributes to use we recommend you to use the web to gain some basic knowledge on style sheets. http://www.w3schools.com might be a good place to start.