Difference between revisions of "Customize look and feel"

Revision as of 09:37, 12 November 2012

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 142px × 30px logo used at the top left of Group-Office
- a 200px x 40px logo used at the login screen of Group-Office
- your custom css file and change it accordingly:

/*
Logo at top left.
*/
#headerLeft{
	background: url('logo142x30.png') 5px 6px no-repeat;
	height:40px;
	padding-left:160px;
	line-height:40px;
}

/*
	Logo at login screen and about screen.
*/
.go-app-logo, .go-about-logo{
	background: url('logo200x40.png');
	width:200px;
	height:40px;
	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:800px;
	padding:20px;
	margin:10px auto;
	background-color:white;
	background:white url('logo142x30.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('logo200x40.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.