How To > How to Customize ... > WebOffice html Client > Layout customizations

Nearly the whole front end of WebOffice 10.5 SP2 is build upon a framework, except some sites, e.g. login page, fatal error page, session error page, … These sites, which aren’t styled inside the framework, can be customized by adjusting the synergis.css file at C:\Tomcat\webapps\<WebOffice application>\client_workspace\basicresources.

WebOffice 10.5 SP2 includes an extra file (synergis_user.css), that overrides the settings in synergis.css. Please consider the steps in the example to change some styles layout styles.

•Open synergis.css, copy the style for an element you want to change and insert it into synergis_weboffice_user.xml.

•Change the css style in synergis_user.css.

Note: Do not change any values in synergis.css, they get lost on an upgrade.

Default value in synergis.css

Customized value in synergis_user.css

Change the background color of the login page

.synergis_body {

background-color: #D2E9FF;

border: 0px solid #6699CC;

text-align: center;

padding: 50 50 0 50;

font-family: verdana, arial;

font-size: 12px;

font-weight: bold;

font-style: normal;

color: #000000;

text-decoration: none;

height:100%;

}

howto_html_by_styles01

.synergis_body {

background-color: #FBE800;

border: 0px solid #6699CC;

text-align: center;

padding: 50 50 0 50;

font-family: verdana, arial;

font-size: 12px;

font-weight: bold;

font-style: normal;

color: #000000;

text-decoration: none;

height:100%;

}

howto_html_by_styles02

Change or delete the logo of the login page

For an URL to a new logo use relative paths starting from C:\Tomcat\webapps\<WebOffice application>\client_workspace\basicresources (e.g. use "../../pub/images/mylogo.png" if the image is located in C:\Tomcat\webapps\<WebOffice application>\pub\images\mylogo.png).

img.logo {

background-image: url( "logo_synergis.gif" );

background-repeat: no-repeat;

background-position:center;

width: 125px;

height: 18px;

border: 0px;

}

howto_html_by_styles01

img.logo {

background-image: url( "" );

background-repeat: no-repeat;

background-position:center;

width: 125px;

height: 18px;

border: 0px;

}

howto_html_by_styles03

Note: When you are using a modern Landing Page / Login Page, you do not have to do the appropriate settings within the CSS files mentioned above. You can configure the desired changes within the WebOffice author. Therefor, please have a look at chapter Corporate Identity.

Layout customizations by styles