Layout customizations by styles

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

Nearly the whole front end of WebOffice 10.9 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 weboffice.css file at C:\Tomcat\webapps\<WebOffice application>\client_workspace\basicresources.

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

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

•Change the css style in weboffice_user.css.

Do not change any values in weboffice.css, they get lost on an upgrade.

Default value in weboffice.css	Customized value in weboffice_user.css
Change the background color of the login page
.weboffice_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%; }	.weboffice_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%; }
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_vertigis.gif ); background-repeat: no-repeat; background-position:center; width: 125px; height: 18px; border: 0px; }	img.logo { background-image: url( ); background-repeat: no-repeat; background-position:center; width: 125px; height: 18px; border: 0px; }

Default value in weboffice.css

Customized value in weboffice_user.css

Change the background color of the login page

.weboffice_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

.weboffice_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_vertigis.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

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.

Comments (0)