fabasoft folio themes folio themes.pdf · fabasoft folio themes 3 contents ... • form entry hover...

White Paper Fabasoft Folio Themes

Fabasoft Folio 2021 Update Rollup 1

Fabasoft Folio Themes 2

Copyright © Fabasoft R&D GmbH, Linz, Austria, 2021.

All rights reserved. All hardware and software names used are registered

trade names and/or registered trademarks of the respective manufacturers.

No rights to our software or our professional services, or results of our

professional services, or other protected rights can be based on the handing

over and presentation of these documents.


Contents

1 Introduction _____________________________________________________________________________________ 5

2 Software Requirements _________________________________________________________________________ 5

3 Themes __________________________________________________________________________________________ 5

4 Base Color Elements ____________________________________________________________________________ 7

4.1 For Developers ............................................................................................................................................... 7

4.1.1 Creating New Themes .......................................................................................................................... 7

4.1.2 Using Themes ......................................................................................................................................... 7

4.1.3 Using colors in CSS ................................................................................................................................ 7

4.2 Abstract Base Colors .................................................................................................................................... 8

4.2.1 Background (CBT_BACKGROUND) ..................................................................................................... 8

4.2.2 Background Alternate (CBT_BACKGROUNDALTERNATE) ............................................................. 9

4.2.3 Border (CBT_BORDER) ........................................................................................................................ 10

4.2.4 Border Inactive (CBT_BORDERINACTIVE) ....................................................................................... 11

4.2.5 Hover Background (CBT_HOVER) ..................................................................................................... 12

4.2.6 Selection Background (CBT_SELECT) ............................................................................................... 13

4.2.7 Selection Inactive Background (CBT_SELECTINACTIVE) .............................................................. 13

4.3 Fonts ............................................................................................................................................................... 14

4.3.1 Font Color (CBT_FONT) ....................................................................................................................... 14

4.3.2 Font Inactive Color (CBT_FONTINACTIVE)....................................................................................... 15

4.3.3 Font Inverse Color (CBT_FONTINVERSE)......................................................................................... 16

4.3.4 Font Decoration Color (CBT_FONTDECOR) .................................................................................... 16

4.4 Areas .............................................................................................................................................................. 17

4.4.1 Page ........................................................................................................................................................ 17

4.4.2 Page Header ......................................................................................................................................... 17

4.4.3 Page Head Box ..................................................................................................................................... 18

4.4.4 Container ............................................................................................................................................... 19

4.4.5 Tab .......................................................................................................................................................... 20

4.4.6 Ribbon .................................................................................................................................................... 21

4.4.7 Menu ....................................................................................................................................................... 21

4.4.8 Button ..................................................................................................................................................... 22

4.4.9 List ........................................................................................................................................................... 23

4.4.10 Form ..................................................................................................................................................... 24


4.4.11 Special .................................................................................................................................................. 24

5 Look Entries ___________________________________________________________________________________ 25

5.1 Custom Logo ................................................................................................................................................ 25

6 app.ducx Sample ______________________________________________________________________________ 25


1 Introduction

This document describes how to change the look and feel of the Fabasoft Folio Web Client utilizing

a theme. To get an impression on how to define themes with minimal effort read this white paper

and have a look at the themes provided by Fabasoft (search in an administration tool for objects of

object class Theme).

2 Software Requirements

System environment: All information contained in this document implicitly assumes a Microsoft

Windows environment or Linux environment.

Supported platforms: For detailed information on supported operating systems and software see

the software product information on the Fabasoft distribution media.

3 Themes

A theme ([email protected]:ColorScheme) defines the color scheme and look entries of the user

interface. Folders and Teamrooms accessed via the portal head can be personalized with different

themes.

A theme provides following configuration possibilities:

“Theme”

• Multilingual Name

Defines the name of the theme.

• Based on

The settings of the specified theme are used as fallback, if some settings are omitted in the

current theme. It is highly recommended to use the “Standard” theme

([email protected]:DefCS) as fallback.


• Symbol Color Filter

Defines a color filter for symbols. Currently the “Reduced Saturation” filter is provided.

• Background Position

Defines the position (top centered or repeat) of the background image. The background image

can be defined as look entry (see chapter Error! Reference source not found.“Error!

Reference source not found.”).

“Base Color Elements”

• Base Color

The base color is an enumeration property. The enumeration entries represent more or less

GUI elements. To each enumeration entry a concrete color value or a fallback base color can

be assigned.

• Value

Defines a color in HEX notation (e.g. “#FFFF00”) or "transparent".

• Base Color Fallback

The color is defined by the value of the fallback base color.

• Software Component

The software component that provides the entry.

“Look Entries”


The software component that provides the entry.

• Software Component Defining the Path

The software component that originally provides the entry that should be overwritten.

• Filename

The filename of the graphic.

• Content

The content of the graphic.

“Object Highlight”

• Element

The enumeration property contains several entries for highlighting rows in an object list. The

user can change the highlighting via the menu entry “View” > “Highlighting Color”.

• Value

A color in HEX notation (e.g. “#FFFF00”).


The software component that provides the entry. For an entry that is defined by the same

software component as the theme itself this value can be omitted.

“Attribute Highlight”

• Type of Highlight

The enumeration property contains several entries for highlighting properties.

• Value

A color in HEX notation (e.g. “#FFFF00”).


The software component that provides the entry. For an entry that is defined by the same

software component as the theme itself this value can be omitted.


4 Base Color Elements

A theme defines colors of GUI elements on the “Base Color Elements” tab. The colors are evaluated

the following way:

1. The color defined in the Value field for the corresponding Base Color is used. Possible values are

o any color in HEX notation (e.g. “#FFFF00”),

o “transparent” for transparency or

o no value (if the base color fallback should be used).

2. If no Value is defined, the Base Color Fallback is used.

3. Undefined Base Colors are taken from the theme defined on the “Theme” tab in the Based on

field.

The following chapters describe the base color elements and settings done by the “Standard”

theme.

4.1 For Developers

4.1.1 Creating New Themes

After creating a new theme it is not available until you recycle the web services.

Objects of object class Theme must have an ACL that sets the access type AccTypeWebAccess or

AccTypeExecApp (e.g. [email protected]:DefaultSeeInWebACL). Otherwise the contents of the

theme are not synchronized to the file system.

Objects of object class Application Dispatcher must have an ACL that sets the access type

AccTypeExecApp (e.g. FSCVAPP1.1001:DefaultApplicationACL). Otherwise the contents of the

dispatcher are not synchronized to the file system.

4.1.2 Using Themes

You can define themes

• for portal pages

• for individual users (in the user environment)

• by passing the theme as the URL parameter cs

Example: http://server.com/fsc/fscasp/content/bin/fscvext.dll?

ax=COO.1.1001.1.32498&cs=COO.1.1001.1.269106

4.1.3 Using colors in CSS

All available base colors are defined in the [email protected]:ColorBaseType enumeration type. In

CSS files the base color can be accessed the following way:

Example:

DIV.MyContainer

{

background-color:; /* corresponding to CBT_BACKGROUND */

border:solid 1px ; /* corresponding to CBT_BUTTONBORDER */


color:; /* corresponding to CBT_FONTINACTIVE */

}

4.2 Abstract Base Colors

These base colors should not be used directly, but they are used as fallback base colors. Some

base colors define both a Value and a Base Color Fallback. In this case the value is used but the

additional definition of the base color fallback denotes a useful relation. The user interface would

look nice, even if no value is defined. In the following chapters this fact is marked by following

phrase: “(own color by default)”.

4.2.1 Background (CBT_BACKGROUND)

In the “Standard” theme the base color “Background” is used for:

• Background Alternate (own color by default) CBT_BACKGROUNDALTERNATE


• Font Inverse Color CBT_FONTINVERSE

• Page Header Border CBT_HEADBORDER

• Page Background (own color by default) CBT_PAGE

• Container Background CBT_CONTAINER

• Tab Inactive Background (own color by default) CBT_TAB

4.2.2 Background Alternate (CBT_BACKGROUNDALTERNATE)

In the “Standard” theme the base color “Background Alternate” is used for:

• Page Header Box Background CBT_ HEADBOX


• Ribbon Background CBT_RIBBON

• Button Background CBT_BUTTON

• List Header Background CBT_LISTHEAD

• List Alternate Row Background (own color by default) CBT_LISTALTERNATE

4.2.3 Border (CBT_BORDER)

In the “Standard” theme the base color “Border” is used for:


• Border Inactive (own color by default) CBT_ BORDERINACTIVE

• Page Border CBT_PAGEBORDER

• Container Border CBT_CONTAINERBORDER

• Container Slider (own color by default) CBT_CONTAINERSLIDER

• Menu Border CBT_MENUBORDER

4.2.4 Border Inactive (CBT_BORDERINACTIVE)

In the “Standard” theme the base color “Border Inactive” is used for:

• Page Header Box Border CBT_HEADBOXBORDER


• Tab Inactive Border CBT_TABBORDER

• Ribbon Border CBT_RIBBONBORDER

• Button Border CBT_BUTTONBORDER

4.2.5 Hover Background (CBT_HOVER)

In the “Standard” theme the base color “Hover Background” is used for:

• Selection Inactive Background CBT_SELECTINACTIVE

• Page Header Hover Background (own color by default) CBT_HEADHOVER

• Ribbon Hover Background (own color by default) CBT_RIBBONHOVER

• Menu Hover Background CBT_MENUHOVER

• List Hover Background CBT_LISTHOVER

• Form Entry Hover Background CBT_ENTRYHOVER


4.2.6 Selection Background (CBT_SELECT)

In the “Standard” theme the base color “Selection Background” is used for:

• Ribbon Selected Background (own color by default) CBT_RIBBONSELECT

• Menu Selection Background CBT_MENUSELECT

• Button Hover Background CBT_BUTTONHOVER

• Button Selection Background CBT_BUTTONSELECT

• List Selection Background CBT_LISTSELECT

• Form Entry Selection Background CBT_ENTRYSELECT

4.2.7 Selection Inactive Background (CBT_SELECTINACTIVE)

In the “Standard” theme the base color “Selection Inactive Background” is used for:

• List Inactive Selection Background CBT_LISTSELECTINACTIVE

• Form Entry Inactive Selection Background CBT_ENTRYSELECTINACTIVE


4.3 Fonts

4.3.1 Font Color (CBT_FONT)

In the “Standard” theme the base color “Font Color” is used for:

• Font Inactive Color (own color by default) CBT_FONTINACTIVE

• Font Decoration Color (own color by default) CBT_FONTDECOR


4.3.2 Font Inactive Color (CBT_FONTINACTIVE)

In the “Standard” theme the base color “Font Inactive Color” is used for:

• Form Label Font Color CBT_LABELFONT


4.3.3 Font Inverse Color (CBT_FONTINVERSE)

4.3.4 Font Decoration Color (CBT_FONTDECOR)


4.4 Areas

4.4.1 Page

• Page Background CBT_PAGE

• Page Border CBT_PAGEBORDER

4.4.2 Page Header

Colors used in this region:

• Page Header Background CBT_HEADER


• Page Header Gradient CBT_HEADERGRADIENT

• Page Header Border CBT_HEADBORDER

• Page Header Hover Background CBT_HEADHOVER

• Page Header Hover Border CBT_HEADHOVERBORDER

• Page Header Selection Background CBT_HEADSELECT

• Page Header Selection Border CBT_HEADSELECTBORDER

4.4.3 Page Head Box

• Page Header Box Background CBT_HEADBOX

• Page Header Box Gradient CBT_HEADBOXGRADIENT

• Page Header Box Border CBT_HEADBOXBORDER


4.4.4 Container

• Container Background CBT_CONTAINER

• Container Border CBT_CONTAINERBORDER

• Container Slider CBT_CONTAINERSLIDER


4.4.5 Tab

• Tab Inactive Background CBT_TAB

• Tab Inactive Border CBT_TABBORDER

• Tab Active Background CBT_TABACTIVE


4.4.6 Ribbon

• Ribbon Background CBT_RIBBON

• Ribbon Label Background CBT_RIBBONLABEL

• Ribbon Border CBT_RIBBONBORDER

• Ribbon Hover Background CBT_RIBBONHOVER

• Ribbon Selected Background CBT_RIBBONSELECT

4.4.7 Menu

• Menu Background CBT_MENU

• Menu Border CBT_MENUBORDER


• Menu Hover Background CBT_MENUHOVER

• Menu Selection Background CBT_MENUSELECT

4.4.8 Button

• Button Background CBT_BUTTON

• Button Gradient CBT_BUTTONGRADIENT

• Button Border CBT_BUTTONBORDER

• Button Hover Background CBT_BUTTONHOVER

• Button Hover Gradient CBT_BUTTONHOVERGRADIENT


• Button Selection Background CBT_BUTTONSELECT

4.4.9 List

• List Header Background CBT_LISTHEAD

• List Header Gradient CBT_LISTHEADGRADIENT

• List Fixed Header Background CBT_LISTHEADFIXED

• List Alternate Row Background CBT_LISTALTERNATE

• List Hover Background CBT_LISTHOVER

• List Selection Background CBT_LISTSELECT

• List Inactive Selection Background CBT_LISTSELECTINACTIVE


4.4.10 Form

• Form Label Font Color CBT_LABELFONT

• Form Label Background CBT_LABEL

• Form Value Background CBT_VALUE

• Form Subordinate Label Background CBT_LABELSUB

• Form Subordinate Value Background CBT_VALUESUB

• Form Entry Hover Background CBT_ENTRYHOVER

• Form Entry Selection Background CBT_ENTRYSELECT

• Form Entry Inactive Selection Background CBT_ENTRYSELECTINACTIVE

4.4.11 Special

• Coverview Background Top CBT_COVERVIEWBGTOP

• Coverview Background Bottom CBT_COVERVIEWBGBOTTOM

• Error Background Color CBT_ERROR

• Warning Background Color CBT_WARNING

• Background Help CBT_BACKGROUNDHELP


5 Look Entries

Look entries define graphics like symbols. In most cases only the following two look entries are

useful to change. For all other look entries have a look on the “Standard” theme in your Fabasoft

Folio installation.

5.1 Custom Logo

Create a new look entry with following settings:


• Software Component Defining the Path [email protected]

• Filename

customlogo.png

• Content

6 app.ducx Sample

In the following sample an own theme is defined, which specifies a logo, a background image,

symbols with reduced saturation and colors for an active selection and hovered selection.

Example

private instance ColorScheme MyTheme {

basedoncs = DefCS;

lookelements = {

{

[email protected],

"customlogo.png",

file("resources/files/customlogo.png")

},

{

[email protected],

"backgroundimage.jpg",

file("resources/files/backgroundimage.jpg")

}

}

colorfilter = CF_REDUCEDSATURATION;

basecolors = {

{

CBT_HOVER,

"#EEF2F2"

},

{

CBT_SELECT,

"#E0B2AF"

}

}

objaclobj = DefaultAdministratorACL;

}

1 Introduction2 Software Requirements3 Themes4 Base Color Elements4.1 For Developers4.1.1 Creating New Themes4.1.2 Using Themes4.1.3 Using colors in CSS

4.2 Abstract Base Colors4.2.1 Background (CBT_BACKGROUND)4.2.2 Background Alternate (CBT_BACKGROUNDALTERNATE)4.2.3 Border (CBT_BORDER)4.2.4 Border Inactive (CBT_BORDERINACTIVE)4.2.5 Hover Background (CBT_HOVER)4.2.6 Selection Background (CBT_SELECT)4.2.7 Selection Inactive Background (CBT_SELECTINACTIVE)

4.3 Fonts4.3.1 Font Color (CBT_FONT)4.3.2 Font Inactive Color (CBT_FONTINACTIVE)4.3.3 Font Inverse Color (CBT_FONTINVERSE)4.3.4 Font Decoration Color (CBT_FONTDECOR)

4.4 Areas4.4.1 Page4.4.2 Page Header4.4.3 Page Head Box4.4.4 Container4.4.5 Tab4.4.6 Ribbon4.4.7 Menu4.4.8 Button4.4.9 List4.4.10 Form4.4.11 Special

5 Look Entries5.1 Custom Logo

6 app.ducx Sample

fabasoft folio themes folio themes.pdf · fabasoft folio themes 3 contents ... • form entry hover...

Documents