Layout Customizations by styles

<< Click to show table of contents >> Navigation: »No topic above this level«

Layout customizations by styles have to be done in CSS files in C:\Tomcat\webapps\<WebOffice application>\client_flex\bin-release\com\mysynergis\webofficeflex\assets\styles\default11.swf.

For customization of the stylesheet the Adobe Flex SDK 3.5 (free) is needed. See http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK for details. This tool is needed to decompile/compile SWF files.

Important color settings in the Stylesheet are:

Default value in CSS in default11.swf

Customized value in CSS in default11.swf

Application {

background-color: #6e6e6e;

font-family: Verdana, Arial, Helvetica, _sans";

font-size: 11px;

theme-color: #48535e;

}

howto_flex_by_styles01

Application {

background-color: #6e6e6e;

font-family: Verdana, Arial, Helvetica, _sans";

font-size: 11px;

theme-color: #FF00FF;

}

howto_flex_by_styles02

Menu {

background-color: #48535e;

roll-over-color: #8484ac;

background-alpha: 0.8;

color: #ffffff;

font-size: 11px;

text-roll-over-color: #ffffff;

}

howto_flex_by_styles03

Menu {

background-color: #FF00FF;

roll-over-color: #8484ac;

background-alpha: 0.8;

color: #ffffff;

font-size: 11px;

text-roll-over-color: #ffffff;

}

howto_flex_by_styles04

.WidgetCanvas {

border-style: solid;

border-thickness: 0;

corner-radius: 5;

backgroundAlpha: 0.5;

backgroundColor: #48535e;

dropShadowEnabled: true;

shadowDirection: right;

shadowDistance: 5;

}

howto_flex_by_styles05

.WidgetCanvas {

border-style: solid;

border-thickness: 0;

corner-radius: 5;

backgroundAlpha: 0.5;

backgroundColor: #FF00FF;

dropShadowEnabled: true;

shadowDirection: right;

shadowDistance: 5;

}

howto_flex_by_styles06

WidgetContent {

borderStyle: solid;

borderColor: #FFFFFF;

corner-radius: 5;

border-thickness: 2;

border-alpha: 0.5;

background-alpha: 0.3;

backgroundColor: #48535e;

left: 2;

right: 2;

top: 2;

bottom: 2;

}

howto_flex_by_styles05

WidgetContent {

borderStyle: solid;

borderColor: #FFFFFF;

corner-radius: 5;

border-thickness: 2;

border-alpha: 0.5;

background-alpha: 0.3;

backgroundColor: #FF00FF;

left: 2;

right: 2;

top: 2;

bottom: 2;

}

howto_flex_by_styles07

SearchRecord {

border-style: solid;

border-thickness: 1;

border-color: #48535e;

background-alpha: 0.6;

background-color: #48535e;

padding-top: 2;

padding-bottom: 1;

padding-left: 5;

padding-right: 4;

vertical-align: middle;

corner-radius: 5;

}

howto_flex_by_styles08

SearchRecord {

border-style: solid;

border-thickness: 1;

border-color: #FF00FF;

background-alpha: 0.6;

background-color: #FF00FF;

padding-top: 2;

padding-bottom: 1;

padding-left: 5;

padding-right: 4;

vertical-align: middle;

corner-radius: 5;

}

howto_flex_by_styles09

.PrintList {

color: #ffffff;

font-size: 11px;

font-weight: normal;

font-anti-alias-type: advanced;

background-color: #48535e;

border-thickness: 0;

roll-over-color: #8484ac;

selection-color: #8484ac;

}

howto_flex_by_styles01

.PrintList {

color: #ffffff;

font-size: 11px;

font-weight: normal;

font-anti-alias-type: advanced;

background-color: #FF00FF;

border-thickness: 0;

roll-over-color: #8484ac;

selection-color: #8484ac;

}

howto_flex_by_styles10

TextInput {

theme-color: #48535e;

}

howto_flex_by_styles11

TextInput {

theme-color: #FF00FF;

}

howto_flex_by_styles12

Don't forget to make a backup of the CSS styles, so that you have a copy in case of any troubles.

Comments (0)