Difference between revisions of "Customize look and feel"

Latest revision as of 14:40, 16 September 2013

Custom theme for multiple installations (servermanager)

If you are using the Group-Office servermanager to manage multiple Group-Office installations on a server, you have the option to use your own logo and product name for all installations on the server:
1. Create a webserver-accessible folder inside the Group-Office source folder (/usr/share/groupoffice on Debian/Ubuntu) called "branding" containing:
- a 214px × 46px logo used at the top left of Group-Office
- a 213px x 47px logo used at the login screen of Group-Office
- your custom css file and change it accordingly:

/*
Logo at top left.
*/
#go-logo{
	background: url('logo214x46.png');
        background-repeat: no-repeat;
	float: left;
	height: 46px;
	padding-right: 20px;
	line-height: 40px;
	width: 214px;
}

/*
Logo at login screen and about screen.
*/
.go-app-logo, .go-about-logo{
	background: url('logo213x47.png');
        width: 217px;
        height: 47px;
        background-repeat: no-repeat;
        margin-top: 10px;
        margin-bottom: 20px;
}

/**
This logo is used on pages that do not render the complete ExtJS interface. eg. Accept calendar invitation.
*/

#container {
	width: 1000px;
	padding: 20px;
	margin: 10px auto;
	background-color: white;
	background: white url('logo213x47.png') 20px 20px no-repeat;
	padding-top: 80px;
	border: 1px solid #ddd;
	border-radius: 6px;
}

#loading .loading-indicator{
	border:1px solid #c1d1d6;
	color:#666;
	background:white url('logo213x47.png') 20px 10px no-repeat;
	font:bold 12px "Lucida Sans Unicode","Lucida Grande","Mukti Narrow", sans-serif;
	padding:60px 10px 10px 20px;
	margin:0;
	text-align:left;
}

.btn-groupoffice{
	background-image:url('images/16x16icon.png') !important;
}

2. Update the Group-Office globalconfig.php used in all installations (or the config.php of just one installation):

$config['product_name'] = "MyOffice";
$config['custom_css_url'] = "/branding/myCssFile.css" // Your root might be different. eg. /groupoffice/branding/...
$config['favicon']='/branding/favicon.ico';
$config['gota_icon_url']='http://full.url.to.groupoffice/branding/icon.png';

Now all instances of the phrase "Group-Office" are replaced by "MyOffice", and you have your custom logo instead of the Group-Office logo.