| This manual is deprecated. Please visit https://groupoffice.readthedocs.io for the latest documentation. |
Difference between revisions of "Customize look and feel"
From Group-Office Groupware and CRM Documentation
(Created page with "== 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...") |
(→Custom theme for multiple installations (servermanager)) |
||
| (3 intermediate revisions by 2 users not shown) | |||
| Line 3: | Line 3: | ||
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:<br /> | 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:<br /> | ||
1. Create a webserver-accessible folder inside the Group-Office source folder (/usr/share/groupoffice on Debian/Ubuntu) called "branding" containing:<br /> | 1. Create a webserver-accessible folder inside the Group-Office source folder (/usr/share/groupoffice on Debian/Ubuntu) called "branding" containing:<br /> | ||
| − | - a | + | - a 214px × 46px logo used at the top left of Group-Office<br /> |
| − | - a | + | - a 213px x 47px logo used at the login screen of Group-Office<br /> |
- your custom css file and change it accordingly: | - your custom css file and change it accordingly: | ||
<pre> | <pre> | ||
| Line 10: | Line 10: | ||
Logo at top left. | Logo at top left. | ||
*/ | */ | ||
| − | # | + | #go-logo{ |
| − | background: url(' | + | background: url('logo214x46.png'); |
| − | height: | + | background-repeat: no-repeat; |
| − | padding- | + | float: left; |
| − | line-height:40px; | + | height: 46px; |
| + | padding-right: 20px; | ||
| + | line-height: 40px; | ||
| + | width: 214px; | ||
} | } | ||
/* | /* | ||
| − | + | Logo at login screen and about screen. | |
*/ | */ | ||
.go-app-logo, .go-about-logo{ | .go-app-logo, .go-about-logo{ | ||
| − | background: url(' | + | background: url('logo213x47.png'); |
| − | + | width: 217px; | |
| − | + | height: 47px; | |
| − | + | background-repeat: no-repeat; | |
| − | + | margin-top: 10px; | |
| − | + | margin-bottom: 20px; | |
} | } | ||
| Line 32: | Line 35: | ||
This logo is used on pages that do not render the complete ExtJS interface. eg. Accept calendar invitation. | This logo is used on pages that do not render the complete ExtJS interface. eg. Accept calendar invitation. | ||
*/ | */ | ||
| − | #container{ | + | |
| − | width: | + | #container { |
| − | padding:20px; | + | width: 1000px; |
| − | margin:10px auto; | + | padding: 20px; |
| − | background-color:white; | + | margin: 10px auto; |
| − | background:white url(' | + | background-color: white; |
| − | padding-top:80px; | + | background: white url('logo213x47.png') 20px 20px no-repeat; |
| − | border:1px solid #ddd; | + | padding-top: 80px; |
| + | border: 1px solid #ddd; | ||
border-radius: 6px; | border-radius: 6px; | ||
} | } | ||
| Line 46: | Line 50: | ||
border:1px solid #c1d1d6; | border:1px solid #c1d1d6; | ||
color:#666; | color:#666; | ||
| − | background:white url(' | + | background:white url('logo213x47.png') 20px 10px no-repeat; |
font:bold 12px "Lucida Sans Unicode","Lucida Grande","Mukti Narrow", sans-serif; | font:bold 12px "Lucida Sans Unicode","Lucida Grande","Mukti Narrow", sans-serif; | ||
padding:60px 10px 10px 20px; | padding:60px 10px 10px 20px; | ||
margin:0; | margin:0; | ||
text-align:left; | text-align:left; | ||
| + | } | ||
| + | |||
| + | .btn-groupoffice{ | ||
| + | background-image:url('images/16x16icon.png') !important; | ||
} | } | ||
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.
