Open-Xchange - User contributions [en]

AppSuite:Writing a simple application

2015-02-18T15:49:54Z

Christoph.hellweg:

{{Stability-experimental}}

<div class="title">Writing a simple application</div>

__TOC__

==Getting Started==

First create a new folder <tt>helloWorld</tt> in your namespace in the app folder, in this example the namespace <tt>com.example</tt> will be used. (<tt>apps/com.example/helloWorld</tt>)

For starters we need two files: a manifest File <tt>manifest.json</tt> and the application file.
It is convention to name your main application file <tt>main.js</tt>.

==Manifest==

First create a <tt>manifest.json</tt> file, describing the basic properties of your app.

<pre class="language-javascript">
{
title: "Hello World",
company: "Open-Xchange",
icon: "/images/icon.png",
category: "Dev",
settings: false,
requires: "dev",
index: 100
}
</pre>

Whilst developing, the manifest has to be added to <tt>src/manifests.json</tt>.
''Note: Same as above except for the path, which is mandatory.''

<pre class="language-javascript">
...
{
path: 'com.example/helloWorld/main',
title: "Hello World",
company: "Open-Xchange",
icon: "/images/icon.png",
category: "Dev",
settings: false,
requires: "dev",
index: 100
},
...
</pre>

You can find more detailed information on manifests here: [[AppSuite:UI manifests explained | UI manifests explained]]

===Setting an app icon===

It is convention to place your app image into a subfolder of your app called images.
The icon defined here will be displayed in the "Your applications" area.

[[File:Hello_World_-_Your_applications.png|alt=Your Applications|Your Applications]]

==Simple application==

This is the base skeleton of a new app with a window, that displays "Hello World".
Please read the annotated source code of an example main.js below, it is quite self-explanatory.

<pre class="language-javascript">
define('com.example/helloWorld/main', [], function () {

'use strict';

// this is just code. loading this does not imply to launch the application

// application object. 'name' is mandatory!
var app = ox.ui.createApp({ name: 'com.example/helloWorld' });

// by using setLauncher this way, we register a callback function
// that is called when the application is really launched
app.setLauncher(function () {

// application window (some applications don't have a window)
var win = ox.ui.createWindow({
name: 'com.example/helloWorld',
title: 'Hello World'
});

app.setWindow(win);

// Add css class with your namespace
win.addClass('com-example-helloWorld');

// add something on 'main' node
win.nodes.main
.css({ padding: '13px', textAlign: 'center' })
.append($('<h1>').text('Hello World!'));

// show the window
win.show();
});

return {
getApp: app.getInstance
};
});
</pre>

Save this file, build and refresh your browser, go to "Your applications", where you should find your app with your app icon.
Hint: You can also launch the application manually via your browsers console:

<pre class="language-javascript">
ox.launch('com.example/helloWorld/main');
</pre>

[[File:Hello_World_-_Simple_Application.png]]

===Styles===

In order to prevent conflicts with other apps or base-styles you should add a css class with your namespace to the main node of your application.

<pre class="language-javascript">
win.addClass('com-example-helloWorld');
</pre>

It is convention to create a file called style.less in the root folder of your application.
This file has to be defined for [http://requirejs.org/docs/api.html require.js] which is done like this.

<pre class="language-javascript">
...
define('com.example/helloWorld/main',
['less!com.example/helloWorld/style.less'
], function () {
...
</pre>

A simple less file would look like this:

<pre class="language-less">
.com-example-helloWorld {
h1 {
color: red;
}
...
}
</pre>

[[File: Hello_World_-_Simple_Application_Style.png]]

===Internationalization (i18n)===

In order to get <tt>gettext</tt> support for your app you have to require it:

<pre class="language-javascript">
...
define('com.example/helloWorld/main',
[...
'gettext!com.example/helloWorld'
...
], function (gt) {
...
</pre>

Every string in your app should be processed by <tt>gettext</tt> in order to have them properly translated.
In our example it would look like this:

<pre class="language-javascript">
...
.append($('<h1>').text(gt('Hello World!')));
...
</pre>

Hint: If you want to check your app for untranslated strings, append <tt>&debug-i18n=true</tt> to the URL in your browser and refresh. If a string is not processed by <tt>gettext</tt> it will be highlighted.

You can find more detailed information on this topic here: [[Appsuite:i18n]]

===Making an application window chromeless===

If you don't have the need for a toolbar and want a chromeless window, you can it in the ox.ui.createWindow function call.

<pre class="language-javascript">
...
var win = ox.ui.createWindow({
...
chromeless: true
...
});
...
</pre>

===Creating a Dialog===

In order to open a dialog <tt>io.ox/core/tk/dialogs</tt> has to be required and use one of the supplied methods.

<pre class="language-javascript">
...
win.nodes.main
.append($('<a class="btn">').text('Open Modal Dialog')
.on('click', function (e) {
e.preventDefault();
require(['io.ox/core/tk/dialogs'],
function (dialogs) {
new dialogs.ModalDialog({
width: 600,
easyOut: true
})
.append($('<p>').text('Hello world'))
.addButton('close', 'Close')
.show();
}
);
})
);
...
</pre>

[[File: Hello_World_-_Modal_Dialog.png]]

==Displaying a notification==

If you want to display notifications you can require <tt>io.ox/core/notifications</tt> and use the yell method, like in the examples below.

<pre class="language-javascript">
...
require(['io.ox/core/notifications'],
function (notifications) {
win.nodes.main
.append(
$('<a class="btn">').text('Display success notfication')
.on('click', function () {
notifications.yell('success', 'Ah success!');
}),
$('<a class="btn">').text('Display error notfication')
.on('click', function () {
notifications.yell('error', 'Oh failed!');
})
);
});
...
</pre>

[[File: Hello_World_-_Notifications.png]]

You can find information about more advanced notifications [[AppSuite:Writing a notification area plugin | here]].

==Displaying a Halo View==

===For internal users===

<pre class="language-javascript">
...
win.nodes.main.append(
$('<a href="#" class="btn halo-link">')
.data({ internal_userid: ox.user_id })
.text('Open Halo')
);
...
</pre>

===For external users===

<pre class="language-javascript">
...
win.nodes.main.append(
$('<a class="btn halo-link">')
.data({ email1: 'test@example.com' })
.text('Open Halo from Email')
);
...
</pre>

[[File: Hello_World_-_Halo.png|844px]]

==Using settings==

To get or set settings you have to create a <tt>settings</tt> subfolder, with a <tt>defaults.js</tt> in which the default values are defined for your settings and a <tt>model.js</tt>. Below you will find a simple example of these files.

===Defaults===

<pre class="language-javascript">
define('com.example/helloWorld/settings/defaults', [], function () {

'use strict';

// define the default values for your settings here
var settingsDefaults = {
exampleSetting: false
};

return settingsDefaults;
});
</pre>

===Model===

<pre class="language-javascript">
define('com.example/helloWorld/settings/model',
['settings!com.example/helloWorld'], function (settings) {

'use strict';

// Very simple default model
var helloWorldModel = Backbone.Model.extend({

initialize: function () {

},

save: function () {
settings.save(this.attributes);
},

destroy: function () {

}

});

return helloWorldModel;
});
</pre>

===Get/Set===

In <tt>main.js</tt> you could add the following snippet which draws a checkbox and saves its state as <tt>exampleSetting</tt> on the change event.

<pre class="language-javascript">
...
require(['settings!com.example/helloWorld'],
function (settings) {
win.nodes.main
.append(
$('<label>').text(gt('Example Setting')),
$('<input type="checkbox">')
.prop('checked', settings.get('exampleSetting', false))
.on('change', function () {
settings.set('exampleSetting', $(this).prop('checked')).save();
})
);
});
...
</pre>

==Download full example==

You can download the example application here with all above shown examples above included.

[[File: Hello_World_-_Simple_application_full_example.zip]]

[[Category:AppSuite]]
[[Category:UI]]

== Stuck somewhere? ==
You got stuck with a problem while developing? OXpedia might help you out with the article about [[AppSuite:Debugging_the_UI | debugging the UI]].

AppSuite:Extension points for email

2013-12-03T09:38:04Z

Christoph.hellweg: /* io.ox/mail/write/emailAddress */

{{Stability-experimental}}

<div class="title">Extension points for e-mail</div>
'''Abstract:''' This describes extension points for the e-mail module, allowing you to add functions.

== io.ox/mail/all/actions ==
The point for the "all" actions dropdown in the detail view of a selected mail.
This place should be used for actions in context with all involved contacts.
The baton is forwarded to the the single action functions.

baton contains:
data - holds the mail object of the current selected contact

data.threadKey -
data.threadPosition -
data.threadSize -
tracker

== io.ox/mail/attachment/links ==
The point for actions related to the attachments of a mail.

== io.ox/mail/detail ==
The point for the detail view of a selected mail.
The baton is forwarded.
It is followed by points for each mail detail:

* io.ox/mail/detail/contact-picture
* io.ox/mail/detail/receiveddate
* io.ox/mail/detail/fromlist
* io.ox/mail/detail/thread-position
* io.ox/mail/detail/flag
* io.ox/mail/detail/subject
* io.ox/mail/detail/tocopy
* io.ox/mail/detail/attachments
* io.ox/mail/detail/inline-links
* io.ox/mail/detail/phishing-warning
* io.ox/mail/detail/externalresources-warning
* io.ox/mail/detail/content

== io.ox/mail/detail/notification ==
The point for the notification handling.
A extended mail object is forwarded.

== io.ox/mail/detail/notification/update-notification ==
The point to remove read mails in notification Area.

== io.ox/mail/dnd/actions ==
The point for mail import via drag & drop.

== io.ox/mail/links/inline ==
The Point for inserting actions like reply & delete.

== io.ox/mail/settings/detail ==
The point for the mail settings detailpage.

== io.ox/mail/settings/detail/section ==
This point is not longer supported.

== io.ox/mail/thread ==
The Point for inserting actions related to the whole thread like move & delete.
The baton is forwarded.

== io.ox/mail/vgrid/options ==
The point for applying options to the vgrid related to the mail app.

=== sort ===
* specifies default sort field
* in case threadview is enabled/used and default sort field is '''not''' set to 'thread' user has to select 'sort by -> chat' manually after each login/page refresh
* alternatively you can use sever setting ''''io.ox/mail//vgrid/sort=''''

''option: by date''
<pre>
sort: 610
</pre>

''option: by from''
<pre>
sort: 603
</pre>

''option: by subject''
<pre>
sort: 607
</pre>

''option: by label''
<pre>
sort: 102
</pre>

''option: show threads (if threadview is enabled), sort by date (if threadview are disabled)''
<pre>
sort: 'thread'
</pre>

== io.ox/mail/vgrid/toolbar ==
The point for extending the vgrid toolbar in the mail app.

== io.ox/mail/write/toolbar ==
The point for inserting inline buttons on top of the mail write view.

== io.ox/mail/write/actions/send ==
The point for the action related to the send button.
The baton is available.
== io.ox/mail/write/autoCompleteItem (since 7.4.2) ==
The point for extending the autocomplete items in the mail app.

== io.ox/mail/write/contactItem (since 7.4.2) ==
The point for extending the contact list items in the mail app.

== io.ox/mail/write/contactPicture (since 7.4.2) ==
The point for extending contact picture in autocomplete and contact list.

== io.ox/mail/write/displayName (since 7.4.2) ==
The point for extending display name in autocomplete and contact list.

== io.ox/mail/write/emailAddress (since 7.4.2) ==
The point for extending email address in autocomplete and contact list.

== io.ox/mail/write/actions/draft ==
The point for the action related to the save button.
The baton is available.

== io.ox/mail/write/actions/discard ==
The point for the action related to the discard button.
The baton is available.

[[Category:AppSuite]]
[[Category:UI]]
[[Category:Extension points]]

AppSuite:Extension points for email

2013-12-03T09:37:58Z

Christoph.hellweg: /* io.ox/mail/write/displayName */

{{Stability-experimental}}

<div class="title">Extension points for e-mail</div>
'''Abstract:''' This describes extension points for the e-mail module, allowing you to add functions.

== io.ox/mail/all/actions ==
The point for the "all" actions dropdown in the detail view of a selected mail.
This place should be used for actions in context with all involved contacts.
The baton is forwarded to the the single action functions.

baton contains:
data - holds the mail object of the current selected contact

data.threadKey -
data.threadPosition -
data.threadSize -
tracker

== io.ox/mail/attachment/links ==
The point for actions related to the attachments of a mail.

== io.ox/mail/detail ==
The point for the detail view of a selected mail.
The baton is forwarded.
It is followed by points for each mail detail:

* io.ox/mail/detail/contact-picture
* io.ox/mail/detail/receiveddate
* io.ox/mail/detail/fromlist
* io.ox/mail/detail/thread-position
* io.ox/mail/detail/flag
* io.ox/mail/detail/subject
* io.ox/mail/detail/tocopy
* io.ox/mail/detail/attachments
* io.ox/mail/detail/inline-links
* io.ox/mail/detail/phishing-warning
* io.ox/mail/detail/externalresources-warning
* io.ox/mail/detail/content

== io.ox/mail/detail/notification ==
The point for the notification handling.
A extended mail object is forwarded.

== io.ox/mail/detail/notification/update-notification ==
The point to remove read mails in notification Area.

== io.ox/mail/dnd/actions ==
The point for mail import via drag & drop.

== io.ox/mail/links/inline ==
The Point for inserting actions like reply & delete.

== io.ox/mail/settings/detail ==
The point for the mail settings detailpage.

== io.ox/mail/settings/detail/section ==
This point is not longer supported.

== io.ox/mail/thread ==
The Point for inserting actions related to the whole thread like move & delete.
The baton is forwarded.

== io.ox/mail/vgrid/options ==
The point for applying options to the vgrid related to the mail app.

=== sort ===
* specifies default sort field
* in case threadview is enabled/used and default sort field is '''not''' set to 'thread' user has to select 'sort by -> chat' manually after each login/page refresh
* alternatively you can use sever setting ''''io.ox/mail//vgrid/sort=''''

''option: by date''
<pre>
sort: 610
</pre>

''option: by from''
<pre>
sort: 603
</pre>

''option: by subject''
<pre>
sort: 607
</pre>

''option: by label''
<pre>
sort: 102
</pre>

''option: show threads (if threadview is enabled), sort by date (if threadview are disabled)''
<pre>
sort: 'thread'
</pre>

== io.ox/mail/vgrid/toolbar ==
The point for extending the vgrid toolbar in the mail app.

== io.ox/mail/write/toolbar ==
The point for inserting inline buttons on top of the mail write view.

== io.ox/mail/write/actions/send ==
The point for the action related to the send button.
The baton is available.
== io.ox/mail/write/autoCompleteItem (since 7.4.2) ==
The point for extending the autocomplete items in the mail app.

== io.ox/mail/write/contactItem (since 7.4.2) ==
The point for extending the contact list items in the mail app.

== io.ox/mail/write/contactPicture (since 7.4.2) ==
The point for extending contact picture in autocomplete and contact list.

== io.ox/mail/write/displayName (since 7.4.2) ==
The point for extending display name in autocomplete and contact list.

== io.ox/mail/write/emailAddress ==
The point for extending email address in autocomplete and contact list.

== io.ox/mail/write/actions/draft ==
The point for the action related to the save button.
The baton is available.

== io.ox/mail/write/actions/discard ==
The point for the action related to the discard button.
The baton is available.

[[Category:AppSuite]]
[[Category:UI]]
[[Category:Extension points]]

AppSuite:Extension points for email

2013-12-03T09:37:53Z

Christoph.hellweg: /* io.ox/mail/write/contactPicture */

{{Stability-experimental}}

<div class="title">Extension points for e-mail</div>
'''Abstract:''' This describes extension points for the e-mail module, allowing you to add functions.

== io.ox/mail/all/actions ==
The point for the "all" actions dropdown in the detail view of a selected mail.
This place should be used for actions in context with all involved contacts.
The baton is forwarded to the the single action functions.

baton contains:
data - holds the mail object of the current selected contact

data.threadKey -
data.threadPosition -
data.threadSize -
tracker

== io.ox/mail/attachment/links ==
The point for actions related to the attachments of a mail.

== io.ox/mail/detail ==
The point for the detail view of a selected mail.
The baton is forwarded.
It is followed by points for each mail detail:

* io.ox/mail/detail/contact-picture
* io.ox/mail/detail/receiveddate
* io.ox/mail/detail/fromlist
* io.ox/mail/detail/thread-position
* io.ox/mail/detail/flag
* io.ox/mail/detail/subject
* io.ox/mail/detail/tocopy
* io.ox/mail/detail/attachments
* io.ox/mail/detail/inline-links
* io.ox/mail/detail/phishing-warning
* io.ox/mail/detail/externalresources-warning
* io.ox/mail/detail/content

== io.ox/mail/detail/notification ==
The point for the notification handling.
A extended mail object is forwarded.

== io.ox/mail/detail/notification/update-notification ==
The point to remove read mails in notification Area.

== io.ox/mail/dnd/actions ==
The point for mail import via drag & drop.

== io.ox/mail/links/inline ==
The Point for inserting actions like reply & delete.

== io.ox/mail/settings/detail ==
The point for the mail settings detailpage.

== io.ox/mail/settings/detail/section ==
This point is not longer supported.

== io.ox/mail/thread ==
The Point for inserting actions related to the whole thread like move & delete.
The baton is forwarded.

== io.ox/mail/vgrid/options ==
The point for applying options to the vgrid related to the mail app.

=== sort ===
* specifies default sort field
* in case threadview is enabled/used and default sort field is '''not''' set to 'thread' user has to select 'sort by -> chat' manually after each login/page refresh
* alternatively you can use sever setting ''''io.ox/mail//vgrid/sort=''''

''option: by date''
<pre>
sort: 610
</pre>

''option: by from''
<pre>
sort: 603
</pre>

''option: by subject''
<pre>
sort: 607
</pre>

''option: by label''
<pre>
sort: 102
</pre>

''option: show threads (if threadview is enabled), sort by date (if threadview are disabled)''
<pre>
sort: 'thread'
</pre>

== io.ox/mail/vgrid/toolbar ==
The point for extending the vgrid toolbar in the mail app.

== io.ox/mail/write/toolbar ==
The point for inserting inline buttons on top of the mail write view.

== io.ox/mail/write/actions/send ==
The point for the action related to the send button.
The baton is available.
== io.ox/mail/write/autoCompleteItem (since 7.4.2) ==
The point for extending the autocomplete items in the mail app.

== io.ox/mail/write/contactItem (since 7.4.2) ==
The point for extending the contact list items in the mail app.

== io.ox/mail/write/contactPicture (since 7.4.2) ==
The point for extending contact picture in autocomplete and contact list.

== io.ox/mail/write/displayName ==
The point for extending display name in autocomplete and contact list.
== io.ox/mail/write/emailAddress ==
The point for extending email address in autocomplete and contact list.

== io.ox/mail/write/actions/draft ==
The point for the action related to the save button.
The baton is available.

== io.ox/mail/write/actions/discard ==
The point for the action related to the discard button.
The baton is available.

[[Category:AppSuite]]
[[Category:UI]]
[[Category:Extension points]]

AppSuite:Extension points for email

2013-12-03T09:37:48Z

Christoph.hellweg: /* io.ox/mail/write/contactItem */

{{Stability-experimental}}

<div class="title">Extension points for e-mail</div>
'''Abstract:''' This describes extension points for the e-mail module, allowing you to add functions.

== io.ox/mail/all/actions ==
The point for the "all" actions dropdown in the detail view of a selected mail.
This place should be used for actions in context with all involved contacts.
The baton is forwarded to the the single action functions.

baton contains:
data - holds the mail object of the current selected contact

data.threadKey -
data.threadPosition -
data.threadSize -
tracker

== io.ox/mail/attachment/links ==
The point for actions related to the attachments of a mail.

== io.ox/mail/detail ==
The point for the detail view of a selected mail.
The baton is forwarded.
It is followed by points for each mail detail:

* io.ox/mail/detail/contact-picture
* io.ox/mail/detail/receiveddate
* io.ox/mail/detail/fromlist
* io.ox/mail/detail/thread-position
* io.ox/mail/detail/flag
* io.ox/mail/detail/subject
* io.ox/mail/detail/tocopy
* io.ox/mail/detail/attachments
* io.ox/mail/detail/inline-links
* io.ox/mail/detail/phishing-warning
* io.ox/mail/detail/externalresources-warning
* io.ox/mail/detail/content

== io.ox/mail/detail/notification ==
The point for the notification handling.
A extended mail object is forwarded.

== io.ox/mail/detail/notification/update-notification ==
The point to remove read mails in notification Area.

== io.ox/mail/dnd/actions ==
The point for mail import via drag & drop.

== io.ox/mail/links/inline ==
The Point for inserting actions like reply & delete.

== io.ox/mail/settings/detail ==
The point for the mail settings detailpage.

== io.ox/mail/settings/detail/section ==
This point is not longer supported.

== io.ox/mail/thread ==
The Point for inserting actions related to the whole thread like move & delete.
The baton is forwarded.

== io.ox/mail/vgrid/options ==
The point for applying options to the vgrid related to the mail app.

=== sort ===
* specifies default sort field
* in case threadview is enabled/used and default sort field is '''not''' set to 'thread' user has to select 'sort by -> chat' manually after each login/page refresh
* alternatively you can use sever setting ''''io.ox/mail//vgrid/sort=''''

''option: by date''
<pre>
sort: 610
</pre>

''option: by from''
<pre>
sort: 603
</pre>

''option: by subject''
<pre>
sort: 607
</pre>

''option: by label''
<pre>
sort: 102
</pre>

''option: show threads (if threadview is enabled), sort by date (if threadview are disabled)''
<pre>
sort: 'thread'
</pre>

== io.ox/mail/vgrid/toolbar ==
The point for extending the vgrid toolbar in the mail app.

== io.ox/mail/write/toolbar ==
The point for inserting inline buttons on top of the mail write view.

== io.ox/mail/write/actions/send ==
The point for the action related to the send button.
The baton is available.
== io.ox/mail/write/autoCompleteItem (since 7.4.2) ==
The point for extending the autocomplete items in the mail app.

== io.ox/mail/write/contactItem (since 7.4.2) ==
The point for extending the contact list items in the mail app.

== io.ox/mail/write/contactPicture ==
The point for extending contact picture in autocomplete and contact list.
== io.ox/mail/write/displayName ==
The point for extending display name in autocomplete and contact list.
== io.ox/mail/write/emailAddress ==
The point for extending email address in autocomplete and contact list.

== io.ox/mail/write/actions/draft ==
The point for the action related to the save button.
The baton is available.

== io.ox/mail/write/actions/discard ==
The point for the action related to the discard button.
The baton is available.

[[Category:AppSuite]]
[[Category:UI]]
[[Category:Extension points]]

AppSuite:Extension points for email

2013-12-03T09:37:37Z

Christoph.hellweg: /* io.ox/mail/write/autoCompleteItem */

{{Stability-experimental}}

<div class="title">Extension points for e-mail</div>
'''Abstract:''' This describes extension points for the e-mail module, allowing you to add functions.

== io.ox/mail/all/actions ==
The point for the "all" actions dropdown in the detail view of a selected mail.
This place should be used for actions in context with all involved contacts.
The baton is forwarded to the the single action functions.

baton contains:
data - holds the mail object of the current selected contact

data.threadKey -
data.threadPosition -
data.threadSize -
tracker

== io.ox/mail/attachment/links ==
The point for actions related to the attachments of a mail.

== io.ox/mail/detail ==
The point for the detail view of a selected mail.
The baton is forwarded.
It is followed by points for each mail detail:

* io.ox/mail/detail/contact-picture
* io.ox/mail/detail/receiveddate
* io.ox/mail/detail/fromlist
* io.ox/mail/detail/thread-position
* io.ox/mail/detail/flag
* io.ox/mail/detail/subject
* io.ox/mail/detail/tocopy
* io.ox/mail/detail/attachments
* io.ox/mail/detail/inline-links
* io.ox/mail/detail/phishing-warning
* io.ox/mail/detail/externalresources-warning
* io.ox/mail/detail/content

== io.ox/mail/detail/notification ==
The point for the notification handling.
A extended mail object is forwarded.

== io.ox/mail/detail/notification/update-notification ==
The point to remove read mails in notification Area.

== io.ox/mail/dnd/actions ==
The point for mail import via drag & drop.

== io.ox/mail/links/inline ==
The Point for inserting actions like reply & delete.

== io.ox/mail/settings/detail ==
The point for the mail settings detailpage.

== io.ox/mail/settings/detail/section ==
This point is not longer supported.

== io.ox/mail/thread ==
The Point for inserting actions related to the whole thread like move & delete.
The baton is forwarded.

== io.ox/mail/vgrid/options ==
The point for applying options to the vgrid related to the mail app.

=== sort ===
* specifies default sort field
* in case threadview is enabled/used and default sort field is '''not''' set to 'thread' user has to select 'sort by -> chat' manually after each login/page refresh
* alternatively you can use sever setting ''''io.ox/mail//vgrid/sort=''''

''option: by date''
<pre>
sort: 610
</pre>

''option: by from''
<pre>
sort: 603
</pre>

''option: by subject''
<pre>
sort: 607
</pre>

''option: by label''
<pre>
sort: 102
</pre>

''option: show threads (if threadview is enabled), sort by date (if threadview are disabled)''
<pre>
sort: 'thread'
</pre>

== io.ox/mail/vgrid/toolbar ==
The point for extending the vgrid toolbar in the mail app.

== io.ox/mail/write/toolbar ==
The point for inserting inline buttons on top of the mail write view.

== io.ox/mail/write/actions/send ==
The point for the action related to the send button.
The baton is available.
== io.ox/mail/write/autoCompleteItem (since 7.4.2) ==
The point for extending the autocomplete items in the mail app.

== io.ox/mail/write/contactItem ==
The point for extending the contact list items in the mail app.
== io.ox/mail/write/contactPicture ==
The point for extending contact picture in autocomplete and contact list.
== io.ox/mail/write/displayName ==
The point for extending display name in autocomplete and contact list.
== io.ox/mail/write/emailAddress ==
The point for extending email address in autocomplete and contact list.

== io.ox/mail/write/actions/draft ==
The point for the action related to the save button.
The baton is available.

== io.ox/mail/write/actions/discard ==
The point for the action related to the discard button.
The baton is available.

[[Category:AppSuite]]
[[Category:UI]]
[[Category:Extension points]]

AppSuite:Extension points for email

2013-12-03T09:18:00Z

Christoph.hellweg: /* io.ox/mail/write/actions/send */

{{Stability-experimental}}

<div class="title">Extension points for e-mail</div>
'''Abstract:''' This describes extension points for the e-mail module, allowing you to add functions.

== io.ox/mail/all/actions ==
The point for the "all" actions dropdown in the detail view of a selected mail.
This place should be used for actions in context with all involved contacts.
The baton is forwarded to the the single action functions.

baton contains:
data - holds the mail object of the current selected contact

data.threadKey -
data.threadPosition -
data.threadSize -
tracker

== io.ox/mail/attachment/links ==
The point for actions related to the attachments of a mail.

== io.ox/mail/detail ==
The point for the detail view of a selected mail.
The baton is forwarded.
It is followed by points for each mail detail:

* io.ox/mail/detail/contact-picture
* io.ox/mail/detail/receiveddate
* io.ox/mail/detail/fromlist
* io.ox/mail/detail/thread-position
* io.ox/mail/detail/flag
* io.ox/mail/detail/subject
* io.ox/mail/detail/tocopy
* io.ox/mail/detail/attachments
* io.ox/mail/detail/inline-links
* io.ox/mail/detail/phishing-warning
* io.ox/mail/detail/externalresources-warning
* io.ox/mail/detail/content

== io.ox/mail/detail/notification ==
The point for the notification handling.
A extended mail object is forwarded.

== io.ox/mail/detail/notification/update-notification ==
The point to remove read mails in notification Area.

== io.ox/mail/dnd/actions ==
The point for mail import via drag & drop.

== io.ox/mail/links/inline ==
The Point for inserting actions like reply & delete.

== io.ox/mail/settings/detail ==
The point for the mail settings detailpage.

== io.ox/mail/settings/detail/section ==
This point is not longer supported.

== io.ox/mail/thread ==
The Point for inserting actions related to the whole thread like move & delete.
The baton is forwarded.

== io.ox/mail/vgrid/options ==
The point for applying options to the vgrid related to the mail app.

=== sort ===
* specifies default sort field
* in case threadview is enabled/used and default sort field is '''not''' set to 'thread' user has to select 'sort by -> chat' manually after each login/page refresh
* alternatively you can use sever setting ''''io.ox/mail//vgrid/sort=''''

''option: by date''
<pre>
sort: 610
</pre>

''option: by from''
<pre>
sort: 603
</pre>

''option: by subject''
<pre>
sort: 607
</pre>

''option: by label''
<pre>
sort: 102
</pre>

''option: show threads (if threadview is enabled), sort by date (if threadview are disabled)''
<pre>
sort: 'thread'
</pre>

== io.ox/mail/vgrid/toolbar ==
The point for extending the vgrid toolbar in the mail app.

== io.ox/mail/write/toolbar ==
The point for inserting inline buttons on top of the mail write view.

== io.ox/mail/write/actions/send ==
The point for the action related to the send button.
The baton is available.
== io.ox/mail/write/autoCompleteItem ==
The point for extending the autocomplete items in the mail app.
== io.ox/mail/write/contactItem ==
The point for extending the contact list items in the mail app.
== io.ox/mail/write/contactPicture ==
The point for extending contact picture in autocomplete and contact list.
== io.ox/mail/write/displayName ==
The point for extending display name in autocomplete and contact list.
== io.ox/mail/write/emailAddress ==
The point for extending email address in autocomplete and contact list.

== io.ox/mail/write/actions/draft ==
The point for the action related to the save button.
The baton is available.

== io.ox/mail/write/actions/discard ==
The point for the action related to the discard button.
The baton is available.

[[Category:AppSuite]]
[[Category:UI]]
[[Category:Extension points]]

AppSuite:Debugging the UI

2013-08-29T10:04:16Z

Christoph.hellweg: /* Enable/disable capability via URL hash */

<div class="title">Debugging the UI</div>
'''Synopsis:''' A collection of hints to debug during UI development
__TOC__
== What capabilities are available? ==
<pre class="language-settings">
_(ox.serverConfig.capabilities).pluck("id").sort();
</pre>

== Check settings ==
<pre class="language-settings">
// check core settings
require('settings!io.ox/core').get();
// check mail settings
require('settings!io.ox/mail').get();
</pre>

== Debug relogin ==
<pre class="language-settings">
ox.autoLogoutRestartDebug();
</pre>

== Enable/disable capability via URL hash ==
Just add the parameter "cap" to URL hash. A leading minus disables a capability. Multiple capabilities separated by comma. Example:
<pre language="none">
...&cap=emoji,-calendar
</pre>
[[Category:AppSuite]]
[[Category:UI]]
[[Category:Developer]]

AppSuite:External libraries for the UI

2013-06-28T09:20:24Z

Christoph.hellweg: /* UI */

{{Stability-stable}}

'''Abstract: ''' An overview over libraries that are used by the UI - either when running or when building it:

== UI ==
{|
! Name & Link
! License
! Modified?
|-
| [http://jquery.com/ jQuery] + jQuery UI
| MIT / GPL Version 2
| No
|-
| [http://www.modernizr.com/ Modernizr]
| MIT / BSD
| No
|-
| [http://requirejs.org/ RequireJS]
| MIT / BSD
| No
|-
| [http://documentcloud.github.com/underscore/ Underscore.js]
| MIT
| No
|-
| [http://cldr.unicode.org/ Unicode CLDR]
| MIT
| No
|-
| [http://getbootstrap.com/ Twitter Bootstrap]
| Apache
| No
|-
| [https://github.com/eternicode/bootstrap-datepicker Bootstrap Datepicker]
| Apache
| Yes
|-
| [http://mediaelementjs.com/ MediaElement.js]
| MIT / GPL Version 2
| No
|-
| [http://brad.is/coding/BigScreen/ BigScreen]
| Apache 2.0
| No
|-
| [http://mobiscroll.com/ Mobiscroll]
| MIT
| No
|}

== Build system ==
{|
! Name & Link
! License
! Modified?
|-
| [http://nodejs.org Node.js] <em>not included</em>
|
|
|-
| [https://github.com/mde/jake Jake]
| Apache
| Yes
|-
| [https://github.com/mishoo/UglifyJS#readme UglifiyJS]
| BSD
| No
|-
| [http://jshint.com/ JSHint]
| modified MIT license
| No
|-
| [http://vowsjs.org/ Vows]
| BSD
| No
|-
| [https://github.com/cloudhead/eyes.js eyes.js]
| BSD
| No
|-
| [https://github.com/isaacs/rimraf rimraf]
| BSD
| No
|-
| [http://lesscss.org/ LESS]
| Apache
| No
|-
| [https://github.com/isaacs/sax-js sax-js]
| MIT
| No
|-
| [https://github.com/Leonidas-from-XIV/node-xml2js node-xml2js]
| MIT
| No
|-
| [https://github.com/zzdhidden/node-jquery-deferred node-jquery-deferred]
| MIT
| No
|}

[[Category:AppSuite]][[Category:UI]]

AppSuite:External libraries for the UI

2013-06-28T09:20:03Z

Christoph.hellweg: /* UI */

{{Stability-stable}}

'''Abstract: ''' An overview over libraries that are used by the UI - either when running or when building it:

== UI ==
{|
! Name & Link
! License
! Modified?
|-
| [http://jquery.com/ jQuery] + jQuery UI
| MIT / GPL Version 2
| no
|-
| [http://www.modernizr.com/ Modernizr]
| MIT / BSD
| No
|-
| [http://requirejs.org/ RequireJS]
| MIT / BSD
| No
|-
| [http://documentcloud.github.com/underscore/ Underscore.js]
| MIT
| No
|-
| [http://cldr.unicode.org/ Unicode CLDR]
| MIT
| No
|-
| [http://getbootstrap.com/ Twitter Bootstrap]
| Apache
| No
|-
| [https://github.com/eternicode/bootstrap-datepicker Bootstrap Datepicker]
| Apache
| YES
|-
| [http://mediaelementjs.com/ MediaElement.js]
| MIT / GPL Version 2
| No
|-
| [http://brad.is/coding/BigScreen/ BigScreen]
| Apache 2.0
| No
|-
| [http://mobiscroll.com/ Mobiscroll]
| MIT
| No
|}

== Build system ==
{|
! Name & Link
! License
! Modified?
|-
| [http://nodejs.org Node.js] <em>not included</em>
|
|
|-
| [https://github.com/mde/jake Jake]
| Apache
| Yes
|-
| [https://github.com/mishoo/UglifyJS#readme UglifiyJS]
| BSD
| No
|-
| [http://jshint.com/ JSHint]
| modified MIT license
| No
|-
| [http://vowsjs.org/ Vows]
| BSD
| No
|-
| [https://github.com/cloudhead/eyes.js eyes.js]
| BSD
| No
|-
| [https://github.com/isaacs/rimraf rimraf]
| BSD
| No
|-
| [http://lesscss.org/ LESS]
| Apache
| No
|-
| [https://github.com/isaacs/sax-js sax-js]
| MIT
| No
|-
| [https://github.com/Leonidas-from-XIV/node-xml2js node-xml2js]
| MIT
| No
|-
| [https://github.com/zzdhidden/node-jquery-deferred node-jquery-deferred]
| MIT
| No
|}

[[Category:AppSuite]][[Category:UI]]

AppSuite:Theming

2013-04-12T08:48:32Z

Christoph.hellweg: /* Links */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Appsuite used LESS as dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

Please read [http://lesscss.org/#docs LESS.JS] documentation first.

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

Naming of the variables should be straight forward. Variables containing the word ''Background'' will always refer to the background color. Variables containing ''Color'' will refer to the foreground color of an element, like color of a font. ''Hover'' in most cases means "hovered" elements. ''Active'' relates to the currently selected or active item. Elements that are supposed to catch the users eye can use the ''Highlight'' class and the variable contains this word.

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || #333 ||
|-
| @foldertreeSectionTitleColor || #888 || Color for sectiontitles in foldertree (like "Public" folders)
|-
| @foldertreeActiveLabelColor || #ccc ||
|-
| @foldertreePassiveLabelColor || #ccc ||
|-
| @foldertreeHoverBackground || #888 ||
|-
| @foldertreeSelectedBackground || #222 ||
|-
| @foldertreeCounterBadgeBackground || #555 ||
|-
| @foldertreeCounterBadgeColor ||@white ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c /* blue */ || Appointment status color
|-
| @appointmentTemporary || #ffbb00 /* yellow */ || Appointment status color
|-
| @appointmentAbsent || #913f3f /* red */ || Appointment status color
|-
| @appointmentFree || #8eb360 /* green */ || Appointment status color
|-
| @appointmentPrivate || #555 /* gray */ || Appointment status color
|-
| @appointmentDeclinedFont || #888 /* dark gray */|| Font color for declined Appointments
|-
| @appointmentUnconfirmedAlpha || 0.4 || Transparency value for unconfirmed Appointments
|-
| @appointmentDeclinedAlpha || 0.3 || Transparency value for declined Appointments
|-
| @appointmentHoverPct || 15% || Percentage increase of the dark pigment content on hover effect
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff || Lasso frame color
|-
| @weekviewDayIn || #fff /* white */ || Default background color in week view
|-
| @weekviewDayOut || #e0e0e0 /* grey */ || Background color outside of the mean working time
|-
| @weekviewTimeline || #f00 /* red */ || Color of the Line indicating the current time
|-
| @weekviewTimeWith || 58px || With of the time labels on the left side
|-
| @calendarToolbarHeight || 41px || Height of the control toolbar
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ || Color of appointments, which are not in focus
|-
| @monthviewToday || #daefff /* light blue */|| Background color of the current day
|-
| @calendarToolbarHeight || 41px || Height of the control toolbar
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

=== Sample ===
<pre class="language-css">
.border-radius(@radius: 0px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}

#menu a {
color: #111;
.border-radius(5px);
}
</pre>

Read [http://www.lesscss.org/#-mixins LESS Mixins]

=== global OX Mixins ===

they can be found at [[#definitions.less | definitions.less]]

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || .box-sizing(border-box) ||
|-
| .user-select(@select) || .user-select(none) ||
|-
| .border-radius(@radius) || .border-radius(3px) ||
|-
| .box-shadow(@shadow) || .box-shadow(3px) ||
|-
| .vertical-gradient(@startColor, @endColor) || .vertical-gradient(#888, #555) ||
|-
| .radial-gradient(@color1, @color2, @color3) || .radial-gradient(#111, #222, #333) ||
|-
| .transition(@transition) || .transition(background-color 0.2s linear) ||
|-
| .animation(@animation) || .animation(slidein 300ms) ||
|-
| .animation-name(@name) || .animation-name(slideright) ||
|-
| .ellipsis || .ellipsis ||
|-
| .overflow(@type) || .overflow(hidden) ||
|-
| .overflow-x(@type) || .overflow-x(hidden) ||
|-
| .overflow-y(@type) || .overflow-y(hidden) ||
|-
| .backface-visibility(@type) || .backface-visibility(hidden) ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Links ==
[http://bradfrost.github.io/this-is-responsive/resources.html Responsive design]

[http://lesscss.org/ LESS]

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-12T08:48:25Z

Christoph.hellweg: /* Links */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Appsuite used LESS as dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

Please read [http://lesscss.org/#docs LESS.JS] documentation first.

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

Naming of the variables should be straight forward. Variables containing the word ''Background'' will always refer to the background color. Variables containing ''Color'' will refer to the foreground color of an element, like color of a font. ''Hover'' in most cases means "hovered" elements. ''Active'' relates to the currently selected or active item. Elements that are supposed to catch the users eye can use the ''Highlight'' class and the variable contains this word.

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || #333 ||
|-
| @foldertreeSectionTitleColor || #888 || Color for sectiontitles in foldertree (like "Public" folders)
|-
| @foldertreeActiveLabelColor || #ccc ||
|-
| @foldertreePassiveLabelColor || #ccc ||
|-
| @foldertreeHoverBackground || #888 ||
|-
| @foldertreeSelectedBackground || #222 ||
|-
| @foldertreeCounterBadgeBackground || #555 ||
|-
| @foldertreeCounterBadgeColor ||@white ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c /* blue */ || Appointment status color
|-
| @appointmentTemporary || #ffbb00 /* yellow */ || Appointment status color
|-
| @appointmentAbsent || #913f3f /* red */ || Appointment status color
|-
| @appointmentFree || #8eb360 /* green */ || Appointment status color
|-
| @appointmentPrivate || #555 /* gray */ || Appointment status color
|-
| @appointmentDeclinedFont || #888 /* dark gray */|| Font color for declined Appointments
|-
| @appointmentUnconfirmedAlpha || 0.4 || Transparency value for unconfirmed Appointments
|-
| @appointmentDeclinedAlpha || 0.3 || Transparency value for declined Appointments
|-
| @appointmentHoverPct || 15% || Percentage increase of the dark pigment content on hover effect
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff || Lasso frame color
|-
| @weekviewDayIn || #fff /* white */ || Default background color in week view
|-
| @weekviewDayOut || #e0e0e0 /* grey */ || Background color outside of the mean working time
|-
| @weekviewTimeline || #f00 /* red */ || Color of the Line indicating the current time
|-
| @weekviewTimeWith || 58px || With of the time labels on the left side
|-
| @calendarToolbarHeight || 41px || Height of the control toolbar
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ || Color of appointments, which are not in focus
|-
| @monthviewToday || #daefff /* light blue */|| Background color of the current day
|-
| @calendarToolbarHeight || 41px || Height of the control toolbar
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

=== Sample ===
<pre class="language-css">
.border-radius(@radius: 0px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}

#menu a {
color: #111;
.border-radius(5px);
}
</pre>

Read [http://www.lesscss.org/#-mixins LESS Mixins]

=== global OX Mixins ===

they can be found at [[#definitions.less | definitions.less]]

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || .box-sizing(border-box) ||
|-
| .user-select(@select) || .user-select(none) ||
|-
| .border-radius(@radius) || .border-radius(3px) ||
|-
| .box-shadow(@shadow) || .box-shadow(3px) ||
|-
| .vertical-gradient(@startColor, @endColor) || .vertical-gradient(#888, #555) ||
|-
| .radial-gradient(@color1, @color2, @color3) || .radial-gradient(#111, #222, #333) ||
|-
| .transition(@transition) || .transition(background-color 0.2s linear) ||
|-
| .animation(@animation) || .animation(slidein 300ms) ||
|-
| .animation-name(@name) || .animation-name(slideright) ||
|-
| .ellipsis || .ellipsis ||
|-
| .overflow(@type) || .overflow(hidden) ||
|-
| .overflow-x(@type) || .overflow-x(hidden) ||
|-
| .overflow-y(@type) || .overflow-y(hidden) ||
|-
| .backface-visibility(@type) || .backface-visibility(hidden) ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Links ==
[http://bradfrost.github.io/this-is-responsive/resources.html Responsive design]
[http://lesscss.org/ LESS]

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-12T08:46:54Z

Christoph.hellweg: /* Best practice */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Appsuite used LESS as dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

Please read [http://lesscss.org/#docs LESS.JS] documentation first.

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

Naming of the variables should be straight forward. Variables containing the word ''Background'' will always refer to the background color. Variables containing ''Color'' will refer to the foreground color of an element, like color of a font. ''Hover'' in most cases means "hovered" elements. ''Active'' relates to the currently selected or active item. Elements that are supposed to catch the users eye can use the ''Highlight'' class and the variable contains this word.

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || #333 ||
|-
| @foldertreeSectionTitleColor || #888 || Color for sectiontitles in foldertree (like "Public" folders)
|-
| @foldertreeActiveLabelColor || #ccc ||
|-
| @foldertreePassiveLabelColor || #ccc ||
|-
| @foldertreeHoverBackground || #888 ||
|-
| @foldertreeSelectedBackground || #222 ||
|-
| @foldertreeCounterBadgeBackground || #555 ||
|-
| @foldertreeCounterBadgeColor ||@white ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c /* blue */ || Appointment status color
|-
| @appointmentTemporary || #ffbb00 /* yellow */ || Appointment status color
|-
| @appointmentAbsent || #913f3f /* red */ || Appointment status color
|-
| @appointmentFree || #8eb360 /* green */ || Appointment status color
|-
| @appointmentPrivate || #555 /* gray */ || Appointment status color
|-
| @appointmentDeclinedFont || #888 /* dark gray */|| Font color for declined Appointments
|-
| @appointmentUnconfirmedAlpha || 0.4 || Transparency value for unconfirmed Appointments
|-
| @appointmentDeclinedAlpha || 0.3 || Transparency value for declined Appointments
|-
| @appointmentHoverPct || 15% || Percentage increase of the dark pigment content on hover effect
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff || Lasso frame color
|-
| @weekviewDayIn || #fff /* white */ || Default background color in week view
|-
| @weekviewDayOut || #e0e0e0 /* grey */ || Background color outside of the mean working time
|-
| @weekviewTimeline || #f00 /* red */ || Color of the Line indicating the current time
|-
| @weekviewTimeWith || 58px || With of the time labels on the left side
|-
| @calendarToolbarHeight || 41px || Height of the control toolbar
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ || Color of appointments, which are not in focus
|-
| @monthviewToday || #daefff /* light blue */|| Background color of the current day
|-
| @calendarToolbarHeight || 41px || Height of the control toolbar
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

=== Sample ===
<pre class="language-css">
.border-radius(@radius: 0px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}

#menu a {
color: #111;
.border-radius(5px);
}
</pre>

Read [http://www.lesscss.org/#-mixins LESS Mixins]

=== global OX Mixins ===

they can be found at [[#definitions.less | definitions.less]]

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || .box-sizing(border-box) ||
|-
| .user-select(@select) || .user-select(none) ||
|-
| .border-radius(@radius) || .border-radius(3px) ||
|-
| .box-shadow(@shadow) || .box-shadow(3px) ||
|-
| .vertical-gradient(@startColor, @endColor) || .vertical-gradient(#888, #555) ||
|-
| .radial-gradient(@color1, @color2, @color3) || .radial-gradient(#111, #222, #333) ||
|-
| .transition(@transition) || .transition(background-color 0.2s linear) ||
|-
| .animation(@animation) || .animation(slidein 300ms) ||
|-
| .animation-name(@name) || .animation-name(slideright) ||
|-
| .ellipsis || .ellipsis ||
|-
| .overflow(@type) || .overflow(hidden) ||
|-
| .overflow-x(@type) || .overflow-x(hidden) ||
|-
| .overflow-y(@type) || .overflow-y(hidden) ||
|-
| .backface-visibility(@type) || .backface-visibility(hidden) ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Links ==
[http://bradfrost.github.io/this-is-responsive/resources.html Responsive design]

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-12T08:37:42Z

Christoph.hellweg: /* LESS.JS */

AppSuite:Theming

2013-04-12T08:34:16Z

Christoph.hellweg: /* LESS.JS */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/#docs LESS.JS] documentation first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

Naming of the variables should be straight forward. Variables containing the word ''Background'' will always refer to the background color. Variables containing ''Color'' will refer to the foreground color of an element, like color of a font. ''Hover'' in most cases means "hovered" elements. ''Active'' relates to the currently selected or active item. Elements that are supposed to catch the users eye can use the ''Highlight'' class and the variable contains this word.

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || #333 ||
|-
| @foldertreeSectionTitleColor || #888 || Color for sectiontitles in foldertree (like "Public" folders)
|-
| @foldertreeActiveLabelColor || #ccc ||
|-
| @foldertreePassiveLabelColor || #ccc ||
|-
| @foldertreeHoverBackground || #888 ||
|-
| @foldertreeSelectedBackground || #222 ||
|-
| @foldertreeCounterBadgeBackground || #555 ||
|-
| @foldertreeCounterBadgeColor ||@white ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c /* blue */ || Appointment status color
|-
| @appointmentTemporary || #ffbb00 /* yellow */ || Appointment status color
|-
| @appointmentAbsent || #913f3f /* red */ || Appointment status color
|-
| @appointmentFree || #8eb360 /* green */ || Appointment status color
|-
| @appointmentPrivate || #555 /* gray */ || Appointment status color
|-
| @appointmentDeclinedFont || #888 /* dark gray */|| Font color for declined Appointments
|-
| @appointmentUnconfirmedAlpha || 0.4 || Transparency value for unconfirmed Appointments
|-
| @appointmentDeclinedAlpha || 0.3 || Transparency value for declined Appointments
|-
| @appointmentHoverPct || 15% || Percentage increase of the dark pigment content on hover effect
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff || Lasso frame color
|-
| @weekviewDayIn || #fff /* white */ || Default background color in week view
|-
| @weekviewDayOut || #e0e0e0 /* grey */ || Background color outside of the mean working time
|-
| @weekviewTimeline || #f00 /* red */ || Color of the Line indicating the current time
|-
| @weekviewTimeWith || 58px || With of the time labels on the left side
|-
| @calendarToolbarHeight || 41px || Height of the control toolbar
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ || Color of appointments, which are not in focus
|-
| @monthviewToday || #daefff /* light blue */|| Background color of the current day
|-
| @calendarToolbarHeight || 41px || Height of the control toolbar
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

=== Sample ===
<pre class="language-css">
.border-radius(@radius: 0px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}

#menu a {
color: #111;
.border-radius(5px);
}
</pre>

Read [http://www.lesscss.org/#-mixins LESS Mixins]

=== global OX Mixins ===

they can be found at [[#definitions.less | definitions.less]]

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || .box-sizing(border-box) ||
|-
| .user-select(@select) || .user-select(none) ||
|-
| .border-radius(@radius) || .border-radius(3px) ||
|-
| .box-shadow(@shadow) || .box-shadow(3px) ||
|-
| .vertical-gradient(@startColor, @endColor) || .vertical-gradient(#888, #555) ||
|-
| .radial-gradient(@color1, @color2, @color3) || .radial-gradient(#111, #222, #333) ||
|-
| .transition(@transition) || .transition(background-color 0.2s linear) ||
|-
| .animation(@animation) || .animation(slidein 300ms) ||
|-
| .animation-name(@name) || .animation-name(slideright) ||
|-
| .ellipsis || .ellipsis ||
|-
| .overflow(@type) || .overflow(hidden) ||
|-
| .overflow-x(@type) || .overflow-x(hidden) ||
|-
| .overflow-y(@type) || .overflow-y(hidden) ||
|-
| .backface-visibility(@type) || .backface-visibility(hidden) ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-12T08:21:58Z

Christoph.hellweg: /* global OX Mixins */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

Naming of the variables should be straight forward. Variables containing the word ''Background'' will always refer to the background color. Variables containing ''Color'' will refer to the foreground color of an element, like color of a font. ''Hover'' in most cases means "hovered" elements. ''Active'' relates to the currently selected or active item. Elements that are supposed to catch the users eye can use the ''Highlight'' class and the variable contains this word.

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || #333 ||
|-
| @foldertreeSectionTitleColor || #888 || Color for sectiontitles in foldertree (like "Public" folders)
|-
| @foldertreeActiveLabelColor || #ccc ||
|-
| @foldertreePassiveLabelColor || #ccc ||
|-
| @foldertreeHoverBackground || #888 ||
|-
| @foldertreeSelectedBackground || #222 ||
|-
| @foldertreeCounterBadgeBackground || #555 ||
|-
| @foldertreeCounterBadgeColor ||@white ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c /* blue */ || Appointment status color
|-
| @appointmentTemporary || #ffbb00 /* yellow */ || Appointment status color
|-
| @appointmentAbsent || #913f3f /* red */ || Appointment status color
|-
| @appointmentFree || #8eb360 /* green */ || Appointment status color
|-
| @appointmentPrivate || #555 /* gray */ || Appointment status color
|-
| @appointmentDeclinedFont || #888 /* dark gray */|| Font color for declined Appointments
|-
| @appointmentUnconfirmedAlpha || 0.4 || Transparency value for unconfirmed Appointments
|-
| @appointmentDeclinedAlpha || 0.3 || Transparency value for declined Appointments
|-
| @appointmentHoverPct || 15% || Percentage increase of the dark pigment content on hover effect
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff || Lasso frame color
|-
| @weekviewDayIn || #fff /* white */ || Default background color in week view
|-
| @weekviewDayOut || #e0e0e0 /* grey */ || Background color outside of the mean working time
|-
| @weekviewTimeline || #f00 /* red */ || Color of the Line indicating the current time
|-
| @weekviewTimeWith || 58px || With of the time labels on the left side
|-
| @calendarToolbarHeight || 41px || Height of the control toolbar
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ || Color of appointments, which are not in focus
|-
| @monthviewToday || #daefff /* light blue */|| Background color of the current day
|-
| @calendarToolbarHeight || 41px || Height of the control toolbar
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

=== Sample ===
<pre class="language-css">
.border-radius(@radius: 0px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}

#menu a {
color: #111;
.border-radius(5px);
}
</pre>

Read [http://www.lesscss.org/#-mixins LESS Mixins]

=== global OX Mixins ===

they can be found at [[#definitions.less | definitions.less]]

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || .box-sizing(border-box) ||
|-
| .user-select(@select) || .user-select(none) ||
|-
| .border-radius(@radius) || .border-radius(3px) ||
|-
| .box-shadow(@shadow) || .box-shadow(3px) ||
|-
| .vertical-gradient(@startColor, @endColor) || .vertical-gradient(#888, #555) ||
|-
| .radial-gradient(@color1, @color2, @color3) || .radial-gradient(#111, #222, #333) ||
|-
| .transition(@transition) || .transition(background-color 0.2s linear) ||
|-
| .animation(@animation) || .animation(slidein 300ms) ||
|-
| .animation-name(@name) || .animation-name(slideright) ||
|-
| .ellipsis || .ellipsis ||
|-
| .overflow(@type) || .overflow(hidden) ||
|-
| .overflow-x(@type) || .overflow-x(hidden) ||
|-
| .overflow-y(@type) || .overflow-y(hidden) ||
|-
| .backface-visibility(@type) || .backface-visibility(hidden) ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-12T08:21:47Z

Christoph.hellweg: /* global OX Mixins */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

Naming of the variables should be straight forward. Variables containing the word ''Background'' will always refer to the background color. Variables containing ''Color'' will refer to the foreground color of an element, like color of a font. ''Hover'' in most cases means "hovered" elements. ''Active'' relates to the currently selected or active item. Elements that are supposed to catch the users eye can use the ''Highlight'' class and the variable contains this word.

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || #333 ||
|-
| @foldertreeSectionTitleColor || #888 || Color for sectiontitles in foldertree (like "Public" folders)
|-
| @foldertreeActiveLabelColor || #ccc ||
|-
| @foldertreePassiveLabelColor || #ccc ||
|-
| @foldertreeHoverBackground || #888 ||
|-
| @foldertreeSelectedBackground || #222 ||
|-
| @foldertreeCounterBadgeBackground || #555 ||
|-
| @foldertreeCounterBadgeColor ||@white ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c /* blue */ || Appointment status color
|-
| @appointmentTemporary || #ffbb00 /* yellow */ || Appointment status color
|-
| @appointmentAbsent || #913f3f /* red */ || Appointment status color
|-
| @appointmentFree || #8eb360 /* green */ || Appointment status color
|-
| @appointmentPrivate || #555 /* gray */ || Appointment status color
|-
| @appointmentDeclinedFont || #888 /* dark gray */|| Font color for declined Appointments
|-
| @appointmentUnconfirmedAlpha || 0.4 || Transparency value for unconfirmed Appointments
|-
| @appointmentDeclinedAlpha || 0.3 || Transparency value for declined Appointments
|-
| @appointmentHoverPct || 15% || Percentage increase of the dark pigment content on hover effect
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff || Lasso frame color
|-
| @weekviewDayIn || #fff /* white */ || Default background color in week view
|-
| @weekviewDayOut || #e0e0e0 /* grey */ || Background color outside of the mean working time
|-
| @weekviewTimeline || #f00 /* red */ || Color of the Line indicating the current time
|-
| @weekviewTimeWith || 58px || With of the time labels on the left side
|-
| @calendarToolbarHeight || 41px || Height of the control toolbar
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ || Color of appointments, which are not in focus
|-
| @monthviewToday || #daefff /* light blue */|| Background color of the current day
|-
| @calendarToolbarHeight || 41px || Height of the control toolbar
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

=== Sample ===
<pre class="language-css">
.border-radius(@radius: 0px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}

#menu a {
color: #111;
.border-radius(5px);
}
</pre>

Read [http://www.lesscss.org/#-mixins LESS Mixins]

=== global OX Mixins ===

they can be found at [[#definitions.less definitions.less]]

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || .box-sizing(border-box) ||
|-
| .user-select(@select) || .user-select(none) ||
|-
| .border-radius(@radius) || .border-radius(3px) ||
|-
| .box-shadow(@shadow) || .box-shadow(3px) ||
|-
| .vertical-gradient(@startColor, @endColor) || .vertical-gradient(#888, #555) ||
|-
| .radial-gradient(@color1, @color2, @color3) || .radial-gradient(#111, #222, #333) ||
|-
| .transition(@transition) || .transition(background-color 0.2s linear) ||
|-
| .animation(@animation) || .animation(slidein 300ms) ||
|-
| .animation-name(@name) || .animation-name(slideright) ||
|-
| .ellipsis || .ellipsis ||
|-
| .overflow(@type) || .overflow(hidden) ||
|-
| .overflow-x(@type) || .overflow-x(hidden) ||
|-
| .overflow-y(@type) || .overflow-y(hidden) ||
|-
| .backface-visibility(@type) || .backface-visibility(hidden) ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-12T08:21:10Z

Christoph.hellweg: /* global OX Mixins */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

Naming of the variables should be straight forward. Variables containing the word ''Background'' will always refer to the background color. Variables containing ''Color'' will refer to the foreground color of an element, like color of a font. ''Hover'' in most cases means "hovered" elements. ''Active'' relates to the currently selected or active item. Elements that are supposed to catch the users eye can use the ''Highlight'' class and the variable contains this word.

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || #333 ||
|-
| @foldertreeSectionTitleColor || #888 || Color for sectiontitles in foldertree (like "Public" folders)
|-
| @foldertreeActiveLabelColor || #ccc ||
|-
| @foldertreePassiveLabelColor || #ccc ||
|-
| @foldertreeHoverBackground || #888 ||
|-
| @foldertreeSelectedBackground || #222 ||
|-
| @foldertreeCounterBadgeBackground || #555 ||
|-
| @foldertreeCounterBadgeColor ||@white ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c /* blue */ || Appointment status color
|-
| @appointmentTemporary || #ffbb00 /* yellow */ || Appointment status color
|-
| @appointmentAbsent || #913f3f /* red */ || Appointment status color
|-
| @appointmentFree || #8eb360 /* green */ || Appointment status color
|-
| @appointmentPrivate || #555 /* gray */ || Appointment status color
|-
| @appointmentDeclinedFont || #888 /* dark gray */|| Font color for declined Appointments
|-
| @appointmentUnconfirmedAlpha || 0.4 || Transparency value for unconfirmed Appointments
|-
| @appointmentDeclinedAlpha || 0.3 || Transparency value for declined Appointments
|-
| @appointmentHoverPct || 15% || Percentage increase of the dark pigment content on hover effect
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff || Lasso frame color
|-
| @weekviewDayIn || #fff /* white */ || Default background color in week view
|-
| @weekviewDayOut || #e0e0e0 /* grey */ || Background color outside of the mean working time
|-
| @weekviewTimeline || #f00 /* red */ || Color of the Line indicating the current time
|-
| @weekviewTimeWith || 58px || With of the time labels on the left side
|-
| @calendarToolbarHeight || 41px || Height of the control toolbar
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ || Color of appointments, which are not in focus
|-
| @monthviewToday || #daefff /* light blue */|| Background color of the current day
|-
| @calendarToolbarHeight || 41px || Height of the control toolbar
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

=== Sample ===
<pre class="language-css">
.border-radius(@radius: 0px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}

#menu a {
color: #111;
.border-radius(5px);
}
</pre>

Read [http://www.lesscss.org/#-mixins LESS Mixins]

=== global OX Mixins ===

they can be found at [[#definitions.less]]

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || .box-sizing(border-box) ||
|-
| .user-select(@select) || .user-select(none) ||
|-
| .border-radius(@radius) || .border-radius(3px) ||
|-
| .box-shadow(@shadow) || .box-shadow(3px) ||
|-
| .vertical-gradient(@startColor, @endColor) || .vertical-gradient(#888, #555) ||
|-
| .radial-gradient(@color1, @color2, @color3) || .radial-gradient(#111, #222, #333) ||
|-
| .transition(@transition) || .transition(background-color 0.2s linear) ||
|-
| .animation(@animation) || .animation(slidein 300ms) ||
|-
| .animation-name(@name) || .animation-name(slideright) ||
|-
| .ellipsis || .ellipsis ||
|-
| .overflow(@type) || .overflow(hidden) ||
|-
| .overflow-x(@type) || .overflow-x(hidden) ||
|-
| .overflow-y(@type) || .overflow-y(hidden) ||
|-
| .backface-visibility(@type) || .backface-visibility(hidden) ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-12T08:19:47Z

Christoph.hellweg: /* Month View */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

Naming of the variables should be straight forward. Variables containing the word ''Background'' will always refer to the background color. Variables containing ''Color'' will refer to the foreground color of an element, like color of a font. ''Hover'' in most cases means "hovered" elements. ''Active'' relates to the currently selected or active item. Elements that are supposed to catch the users eye can use the ''Highlight'' class and the variable contains this word.

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || #333 ||
|-
| @foldertreeSectionTitleColor || #888 || Color for sectiontitles in foldertree (like "Public" folders)
|-
| @foldertreeActiveLabelColor || #ccc ||
|-
| @foldertreePassiveLabelColor || #ccc ||
|-
| @foldertreeHoverBackground || #888 ||
|-
| @foldertreeSelectedBackground || #222 ||
|-
| @foldertreeCounterBadgeBackground || #555 ||
|-
| @foldertreeCounterBadgeColor ||@white ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c /* blue */ || Appointment status color
|-
| @appointmentTemporary || #ffbb00 /* yellow */ || Appointment status color
|-
| @appointmentAbsent || #913f3f /* red */ || Appointment status color
|-
| @appointmentFree || #8eb360 /* green */ || Appointment status color
|-
| @appointmentPrivate || #555 /* gray */ || Appointment status color
|-
| @appointmentDeclinedFont || #888 /* dark gray */|| Font color for declined Appointments
|-
| @appointmentUnconfirmedAlpha || 0.4 || Transparency value for unconfirmed Appointments
|-
| @appointmentDeclinedAlpha || 0.3 || Transparency value for declined Appointments
|-
| @appointmentHoverPct || 15% || Percentage increase of the dark pigment content on hover effect
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff || Lasso frame color
|-
| @weekviewDayIn || #fff /* white */ || Default background color in week view
|-
| @weekviewDayOut || #e0e0e0 /* grey */ || Background color outside of the mean working time
|-
| @weekviewTimeline || #f00 /* red */ || Color of the Line indicating the current time
|-
| @weekviewTimeWith || 58px || With of the time labels on the left side
|-
| @calendarToolbarHeight || 41px || Height of the control toolbar
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ || Color of appointments, which are not in focus
|-
| @monthviewToday || #daefff /* light blue */|| Background color of the current day
|-
| @calendarToolbarHeight || 41px || Height of the control toolbar
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

=== Sample ===
<pre class="language-css">
.border-radius(@radius: 0px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}

#menu a {
color: #111;
.border-radius(5px);
}
</pre>

Read [http://www.lesscss.org/#-mixins LESS Mixins]

=== global OX Mixins ===

they can be found at [#definitions.less]

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || .box-sizing(border-box) ||
|-
| .user-select(@select) || .user-select(none) ||
|-
| .border-radius(@radius) || .border-radius(3px) ||
|-
| .box-shadow(@shadow) || .box-shadow(3px) ||
|-
| .vertical-gradient(@startColor, @endColor) || .vertical-gradient(#888, #555) ||
|-
| .radial-gradient(@color1, @color2, @color3) || .radial-gradient(#111, #222, #333) ||
|-
| .transition(@transition) || .transition(background-color 0.2s linear) ||
|-
| .animation(@animation) || .animation(slidein 300ms) ||
|-
| .animation-name(@name) || .animation-name(slideright) ||
|-
| .ellipsis || .ellipsis ||
|-
| .overflow(@type) || .overflow(hidden) ||
|-
| .overflow-x(@type) || .overflow-x(hidden) ||
|-
| .overflow-y(@type) || .overflow-y(hidden) ||
|-
| .backface-visibility(@type) || .backface-visibility(hidden) ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-12T08:18:03Z

Christoph.hellweg: /* Week View */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

Naming of the variables should be straight forward. Variables containing the word ''Background'' will always refer to the background color. Variables containing ''Color'' will refer to the foreground color of an element, like color of a font. ''Hover'' in most cases means "hovered" elements. ''Active'' relates to the currently selected or active item. Elements that are supposed to catch the users eye can use the ''Highlight'' class and the variable contains this word.

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || #333 ||
|-
| @foldertreeSectionTitleColor || #888 || Color for sectiontitles in foldertree (like "Public" folders)
|-
| @foldertreeActiveLabelColor || #ccc ||
|-
| @foldertreePassiveLabelColor || #ccc ||
|-
| @foldertreeHoverBackground || #888 ||
|-
| @foldertreeSelectedBackground || #222 ||
|-
| @foldertreeCounterBadgeBackground || #555 ||
|-
| @foldertreeCounterBadgeColor ||@white ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c /* blue */ || Appointment status color
|-
| @appointmentTemporary || #ffbb00 /* yellow */ || Appointment status color
|-
| @appointmentAbsent || #913f3f /* red */ || Appointment status color
|-
| @appointmentFree || #8eb360 /* green */ || Appointment status color
|-
| @appointmentPrivate || #555 /* gray */ || Appointment status color
|-
| @appointmentDeclinedFont || #888 /* dark gray */|| Font color for declined Appointments
|-
| @appointmentUnconfirmedAlpha || 0.4 || Transparency value for unconfirmed Appointments
|-
| @appointmentDeclinedAlpha || 0.3 || Transparency value for declined Appointments
|-
| @appointmentHoverPct || 15% || Percentage increase of the dark pigment content on hover effect
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff || Lasso frame color
|-
| @weekviewDayIn || #fff /* white */ || Default background color in week view
|-
| @weekviewDayOut || #e0e0e0 /* grey */ || Background color outside of the mean working time
|-
| @weekviewTimeline || #f00 /* red */ || Color of the Line indicating the current time
|-
| @weekviewTimeWith || 58px || With of the time labels on the left side
|-
| @calendarToolbarHeight || 41px || Height of the control toolbar
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

=== Sample ===
<pre class="language-css">
.border-radius(@radius: 0px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}

#menu a {
color: #111;
.border-radius(5px);
}
</pre>

Read [http://www.lesscss.org/#-mixins LESS Mixins]

=== global OX Mixins ===

they can be found at [#definitions.less]

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || .box-sizing(border-box) ||
|-
| .user-select(@select) || .user-select(none) ||
|-
| .border-radius(@radius) || .border-radius(3px) ||
|-
| .box-shadow(@shadow) || .box-shadow(3px) ||
|-
| .vertical-gradient(@startColor, @endColor) || .vertical-gradient(#888, #555) ||
|-
| .radial-gradient(@color1, @color2, @color3) || .radial-gradient(#111, #222, #333) ||
|-
| .transition(@transition) || .transition(background-color 0.2s linear) ||
|-
| .animation(@animation) || .animation(slidein 300ms) ||
|-
| .animation-name(@name) || .animation-name(slideright) ||
|-
| .ellipsis || .ellipsis ||
|-
| .overflow(@type) || .overflow(hidden) ||
|-
| .overflow-x(@type) || .overflow-x(hidden) ||
|-
| .overflow-y(@type) || .overflow-y(hidden) ||
|-
| .backface-visibility(@type) || .backface-visibility(hidden) ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-12T08:13:26Z

Christoph.hellweg: /* Appointment */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

Naming of the variables should be straight forward. Variables containing the word ''Background'' will always refer to the background color. Variables containing ''Color'' will refer to the foreground color of an element, like color of a font. ''Hover'' in most cases means "hovered" elements. ''Active'' relates to the currently selected or active item. Elements that are supposed to catch the users eye can use the ''Highlight'' class and the variable contains this word.

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || #333 ||
|-
| @foldertreeSectionTitleColor || #888 || Color for sectiontitles in foldertree (like "Public" folders)
|-
| @foldertreeActiveLabelColor || #ccc ||
|-
| @foldertreePassiveLabelColor || #ccc ||
|-
| @foldertreeHoverBackground || #888 ||
|-
| @foldertreeSelectedBackground || #222 ||
|-
| @foldertreeCounterBadgeBackground || #555 ||
|-
| @foldertreeCounterBadgeColor ||@white ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c /* blue */ || Appointment status color
|-
| @appointmentTemporary || #ffbb00 /* yellow */ || Appointment status color
|-
| @appointmentAbsent || #913f3f /* red */ || Appointment status color
|-
| @appointmentFree || #8eb360 /* green */ || Appointment status color
|-
| @appointmentPrivate || #555 /* gray */ || Appointment status color
|-
| @appointmentDeclinedFont || #888 /* dark gray */|| Font color for declined Appointments
|-
| @appointmentUnconfirmedAlpha || 0.4 || Transparency value for unconfirmed Appointments
|-
| @appointmentDeclinedAlpha || 0.3 || Transparency value for declined Appointments
|-
| @appointmentHoverPct || 15% || Percentage increase of the dark pigment content on hover effect
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

=== Sample ===
<pre class="language-css">
.border-radius(@radius: 0px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}

#menu a {
color: #111;
.border-radius(5px);
}
</pre>

Read [http://www.lesscss.org/#-mixins LESS Mixins]

=== global OX Mixins ===

they can be found at [#definitions.less]

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || .box-sizing(border-box) ||
|-
| .user-select(@select) || .user-select(none) ||
|-
| .border-radius(@radius) || .border-radius(3px) ||
|-
| .box-shadow(@shadow) || .box-shadow(3px) ||
|-
| .vertical-gradient(@startColor, @endColor) || .vertical-gradient(#888, #555) ||
|-
| .radial-gradient(@color1, @color2, @color3) || .radial-gradient(#111, #222, #333) ||
|-
| .transition(@transition) || .transition(background-color 0.2s linear) ||
|-
| .animation(@animation) || .animation(slidein 300ms) ||
|-
| .animation-name(@name) || .animation-name(slideright) ||
|-
| .ellipsis || .ellipsis ||
|-
| .overflow(@type) || .overflow(hidden) ||
|-
| .overflow-x(@type) || .overflow-x(hidden) ||
|-
| .overflow-y(@type) || .overflow-y(hidden) ||
|-
| .backface-visibility(@type) || .backface-visibility(hidden) ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-12T08:10:15Z

Christoph.hellweg: /* Appointment */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

Naming of the variables should be straight forward. Variables containing the word ''Background'' will always refer to the background color. Variables containing ''Color'' will refer to the foreground color of an element, like color of a font. ''Hover'' in most cases means "hovered" elements. ''Active'' relates to the currently selected or active item. Elements that are supposed to catch the users eye can use the ''Highlight'' class and the variable contains this word.

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || #333 ||
|-
| @foldertreeSectionTitleColor || #888 || Color for sectiontitles in foldertree (like "Public" folders)
|-
| @foldertreeActiveLabelColor || #ccc ||
|-
| @foldertreePassiveLabelColor || #ccc ||
|-
| @foldertreeHoverBackground || #888 ||
|-
| @foldertreeSelectedBackground || #222 ||
|-
| @foldertreeCounterBadgeBackground || #555 ||
|-
| @foldertreeCounterBadgeColor ||@white ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c /* blue */ || Appointment status color
|-
| @appointmentTemporary || #ffbb00 /* yellow */ || Appointment status color
|-
| @appointmentAbsent || #913f3f /* red */ || Appointment status color
|-
| @appointmentFree || #8eb360 /* green */ || Appointment status color
|-
| @appointmentPrivate || #555 /* gray */ || Appointment status color
|-
| @appointmentDeclinedFont || #888 /* dark gray */|| Font color for declined Appointments
|-
| @appointmentUnconfirmedAlpha || 0.4 || Transparency value for unconfirmed Appointments
|-
| @appointmentDeclinedAlpha || 0.3 || Transparency value for declined Appointments
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

=== Sample ===
<pre class="language-css">
.border-radius(@radius: 0px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}

#menu a {
color: #111;
.border-radius(5px);
}
</pre>

Read [http://www.lesscss.org/#-mixins LESS Mixins]

=== global OX Mixins ===

they can be found at [#definitions.less]

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || .box-sizing(border-box) ||
|-
| .user-select(@select) || .user-select(none) ||
|-
| .border-radius(@radius) || .border-radius(3px) ||
|-
| .box-shadow(@shadow) || .box-shadow(3px) ||
|-
| .vertical-gradient(@startColor, @endColor) || .vertical-gradient(#888, #555) ||
|-
| .radial-gradient(@color1, @color2, @color3) || .radial-gradient(#111, #222, #333) ||
|-
| .transition(@transition) || .transition(background-color 0.2s linear) ||
|-
| .animation(@animation) || .animation(slidein 300ms) ||
|-
| .animation-name(@name) || .animation-name(slideright) ||
|-
| .ellipsis || .ellipsis ||
|-
| .overflow(@type) || .overflow(hidden) ||
|-
| .overflow-x(@type) || .overflow-x(hidden) ||
|-
| .overflow-y(@type) || .overflow-y(hidden) ||
|-
| .backface-visibility(@type) || .backface-visibility(hidden) ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-12T08:07:58Z

Christoph.hellweg: /* Appointment */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

Naming of the variables should be straight forward. Variables containing the word ''Background'' will always refer to the background color. Variables containing ''Color'' will refer to the foreground color of an element, like color of a font. ''Hover'' in most cases means "hovered" elements. ''Active'' relates to the currently selected or active item. Elements that are supposed to catch the users eye can use the ''Highlight'' class and the variable contains this word.

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || #333 ||
|-
| @foldertreeSectionTitleColor || #888 || Color for sectiontitles in foldertree (like "Public" folders)
|-
| @foldertreeActiveLabelColor || #ccc ||
|-
| @foldertreePassiveLabelColor || #ccc ||
|-
| @foldertreeHoverBackground || #888 ||
|-
| @foldertreeSelectedBackground || #222 ||
|-
| @foldertreeCounterBadgeBackground || #555 ||
|-
| @foldertreeCounterBadgeColor ||@white ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c /* blue */ ||
|-
| @appointmentTemporary || #ffbb00 /* yellow */ ||
|-
| @appointmentAbsent || #913f3f /* red */ ||
|-
| @appointmentFree || #8eb360 /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

=== Sample ===
<pre class="language-css">
.border-radius(@radius: 0px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}

#menu a {
color: #111;
.border-radius(5px);
}
</pre>

Read [http://www.lesscss.org/#-mixins LESS Mixins]

=== global OX Mixins ===

they can be found at [#definitions.less]

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || .box-sizing(border-box) ||
|-
| .user-select(@select) || .user-select(none) ||
|-
| .border-radius(@radius) || .border-radius(3px) ||
|-
| .box-shadow(@shadow) || .box-shadow(3px) ||
|-
| .vertical-gradient(@startColor, @endColor) || .vertical-gradient(#888, #555) ||
|-
| .radial-gradient(@color1, @color2, @color3) || .radial-gradient(#111, #222, #333) ||
|-
| .transition(@transition) || .transition(background-color 0.2s linear) ||
|-
| .animation(@animation) || .animation(slidein 300ms) ||
|-
| .animation-name(@name) || .animation-name(slideright) ||
|-
| .ellipsis || .ellipsis ||
|-
| .overflow(@type) || .overflow(hidden) ||
|-
| .overflow-x(@type) || .overflow-x(hidden) ||
|-
| .overflow-y(@type) || .overflow-y(hidden) ||
|-
| .backface-visibility(@type) || .backface-visibility(hidden) ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T14:48:38Z

Christoph.hellweg: /* global OX Mixins */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || ||
|-
| @foldertreeSectionTitleColor || ||
|-
| @foldertreeActiveLabelColor || ||
|-
| @foldertreePassiveLabelColor || ||
|-
| @foldertreeHoverBackground || ||
|-
| @foldertreeSelectedBackground || ||
|-
| @foldertreeCounterBadgeBackground || ||
|-
| @foldertreeCounterBadgeColor || ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

=== Sample ===
<pre class="language-css">
.border-radius(@radius: 0px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}

#menu a {
color: #111;
.border-radius(5px);
}
</pre>

Read [http://www.lesscss.org/#-mixins LESS Mixins]

=== global OX Mixins ===

they can be found at [#definitions.less]

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || .box-sizing(border-box) ||
|-
| .user-select(@select) || .user-select(none) ||
|-
| .border-radius(@radius) || .border-radius(3px) ||
|-
| .box-shadow(@shadow) || .box-shadow(3px) ||
|-
| .vertical-gradient(@startColor, @endColor) || .vertical-gradient(#888, #555) ||
|-
| .radial-gradient(@color1, @color2, @color3) || .radial-gradient(#111, #222, #333) ||
|-
| .transition(@transition) || .transition(background-color 0.2s linear) ||
|-
| .animation(@animation) || .animation(slidein 300ms) ||
|-
| .animation-name(@name) || .animation-name(slideright) ||
|-
| .ellipsis || .ellipsis ||
|-
| .overflow(@type) || .overflow(hidden) ||
|-
| .overflow-x(@type) || .overflow-x(hidden) ||
|-
| .overflow-y(@type) || .overflow-y(hidden) ||
|-
| .backface-visibility(@type) || .backface-visibility(hidden) ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T14:48:02Z

Christoph.hellweg: /* global OX Mixins */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || ||
|-
| @foldertreeSectionTitleColor || ||
|-
| @foldertreeActiveLabelColor || ||
|-
| @foldertreePassiveLabelColor || ||
|-
| @foldertreeHoverBackground || ||
|-
| @foldertreeSelectedBackground || ||
|-
| @foldertreeCounterBadgeBackground || ||
|-
| @foldertreeCounterBadgeColor || ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

=== Sample ===
<pre class="language-css">
.border-radius(@radius: 0px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}

#menu a {
color: #111;
.border-radius(5px);
}
</pre>

Read [http://www.lesscss.org/#-mixins LESS Mixins]

=== global OX Mixins ===

they can be found at []

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || .box-sizing(border-box) ||
|-
| .user-select(@select) || .user-select(none) ||
|-
| .border-radius(@radius) || .border-radius(3px) ||
|-
| .box-shadow(@shadow) || .box-shadow(3px) ||
|-
| .vertical-gradient(@startColor, @endColor) || .vertical-gradient(#888, #555) ||
|-
| .radial-gradient(@color1, @color2, @color3) || .radial-gradient(#111, #222, #333) ||
|-
| .transition(@transition) || .transition(background-color 0.2s linear) ||
|-
| .animation(@animation) || .animation(slidein 300ms) ||
|-
| .animation-name(@name) || .animation-name(slideright) ||
|-
| .ellipsis || .ellipsis ||
|-
| .overflow(@type) || .overflow(hidden) ||
|-
| .overflow-x(@type) || .overflow-x(hidden) ||
|-
| .overflow-y(@type) || .overflow-y(hidden) ||
|-
| .backface-visibility(@type) || .backface-visibility(hidden) ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T14:40:42Z

Christoph.hellweg: /* global OX Mixins */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || ||
|-
| @foldertreeSectionTitleColor || ||
|-
| @foldertreeActiveLabelColor || ||
|-
| @foldertreePassiveLabelColor || ||
|-
| @foldertreeHoverBackground || ||
|-
| @foldertreeSelectedBackground || ||
|-
| @foldertreeCounterBadgeBackground || ||
|-
| @foldertreeCounterBadgeColor || ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

=== Sample ===
<pre class="language-css">
.border-radius(@radius: 0px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}

#menu a {
color: #111;
.border-radius(5px);
}
</pre>

Read [http://www.lesscss.org/#-mixins LESS Mixins]

=== global OX Mixins ===

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || .box-sizing(border-box) ||
|-
| .user-select(@select) || .user-select(none) ||
|-
| .border-radius(@radius) || .border-radius(3px) ||
|-
| .box-shadow(@shadow) || .box-shadow(3px) ||
|-
| .vertical-gradient(@startColor, @endColor) || .vertical-gradient(#888, #555) ||
|-
| .radial-gradient(@color1, @color2, @color3) || .radial-gradient(#111, #222, #333) ||
|-
| .transition(@transition) || .transition(background-color 0.2s linear) ||
|-
| .animation(@animation) || .animation(slidein 300ms) ||
|-
| .animation-name(@name) || .animation-name(slideright) ||
|-
| .ellipsis || .ellipsis ||
|-
| .overflow(@type) || .overflow(hidden) ||
|-
| .overflow-x(@type) || .overflow-x(hidden) ||
|-
| .overflow-y(@type) || .overflow-y(hidden) ||
|-
| .backface-visibility(@type) || .backface-visibility(hidden) ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T14:27:21Z

Christoph.hellweg: /* OX Mixins */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || ||
|-
| @foldertreeSectionTitleColor || ||
|-
| @foldertreeActiveLabelColor || ||
|-
| @foldertreePassiveLabelColor || ||
|-
| @foldertreeHoverBackground || ||
|-
| @foldertreeSelectedBackground || ||
|-
| @foldertreeCounterBadgeBackground || ||
|-
| @foldertreeCounterBadgeColor || ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

=== Sample ===
<pre class="language-css">
.border-radius(@radius: 0px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}

#menu a {
color: #111;
.border-radius(5px);
}
</pre>

Read [http://www.lesscss.org/#-mixins LESS Mixins]

=== global OX Mixins ===

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || ||
|-
| .user-select(@select) || ||
|-
| .border-radius(@radius) || ||
|-
| .box-shadow(@shadow) || ||
|-
| .vertical-gradient(@startColor, @endColor) || ||
|-
| .radial-gradient(@color1, @color2, @color3) || ||
|-
| .transition(@transition) || ||
|-
| .animation(@animation) || ||
|-
| .animation-name(@name) || ||
|-
| .ellipsis || ||
|-
| .overflow(@type) || ||
|-
| .overflow-x(@type) || ||
|-
| .overflow-y(@type) || ||
|-
| .backface-visibility(@type) || ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T14:26:55Z

Christoph.hellweg: /* Sample */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || ||
|-
| @foldertreeSectionTitleColor || ||
|-
| @foldertreeActiveLabelColor || ||
|-
| @foldertreePassiveLabelColor || ||
|-
| @foldertreeHoverBackground || ||
|-
| @foldertreeSelectedBackground || ||
|-
| @foldertreeCounterBadgeBackground || ||
|-
| @foldertreeCounterBadgeColor || ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

=== Sample ===
<pre class="language-css">
.border-radius(@radius: 0px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}

#menu a {
color: #111;
.border-radius(5px);
}
</pre>

Read [http://www.lesscss.org/#-mixins LESS Mixins]

=== OX Mixins ===

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || ||
|-
| .user-select(@select) || ||
|-
| .border-radius(@radius) || ||
|-
| .box-shadow(@shadow) || ||
|-
| .vertical-gradient(@startColor, @endColor) || ||
|-
| .radial-gradient(@color1, @color2, @color3) || ||
|-
| .transition(@transition) || ||
|-
| .animation(@animation) || ||
|-
| .animation-name(@name) || ||
|-
| .ellipsis || ||
|-
| .overflow(@type) || ||
|-
| .overflow-x(@type) || ||
|-
| .overflow-y(@type) || ||
|-
| .backface-visibility(@type) || ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T14:18:46Z

Christoph.hellweg: /* Sample */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || ||
|-
| @foldertreeSectionTitleColor || ||
|-
| @foldertreeActiveLabelColor || ||
|-
| @foldertreePassiveLabelColor || ||
|-
| @foldertreeHoverBackground || ||
|-
| @foldertreeSelectedBackground || ||
|-
| @foldertreeCounterBadgeBackground || ||
|-
| @foldertreeCounterBadgeColor || ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

=== Sample ===
<pre class="language-css">
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

#menu a {
color: #111;
.bordered;
}

.post a {
color: red;
.bordered;
}
</pre>

Read [http://www.lesscss.org/#-mixins LESS Mixins]

=== OX Mixins ===

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || ||
|-
| .user-select(@select) || ||
|-
| .border-radius(@radius) || ||
|-
| .box-shadow(@shadow) || ||
|-
| .vertical-gradient(@startColor, @endColor) || ||
|-
| .radial-gradient(@color1, @color2, @color3) || ||
|-
| .transition(@transition) || ||
|-
| .animation(@animation) || ||
|-
| .animation-name(@name) || ||
|-
| .ellipsis || ||
|-
| .overflow(@type) || ||
|-
| .overflow-x(@type) || ||
|-
| .overflow-y(@type) || ||
|-
| .backface-visibility(@type) || ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T14:18:09Z

Christoph.hellweg: /* Mixins */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || ||
|-
| @foldertreeSectionTitleColor || ||
|-
| @foldertreeActiveLabelColor || ||
|-
| @foldertreePassiveLabelColor || ||
|-
| @foldertreeHoverBackground || ||
|-
| @foldertreeSelectedBackground || ||
|-
| @foldertreeCounterBadgeBackground || ||
|-
| @foldertreeCounterBadgeColor || ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:

=== Sample ===
<pre class="language-css">
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

#menu a {
color: #111;
.bordered;
}

.post a {
color: red;
.bordered;
}
</pre>

[http://www.lesscss.org/#-mixins LESS Mixins]

=== OX Mixins ===

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || ||
|-
| .user-select(@select) || ||
|-
| .border-radius(@radius) || ||
|-
| .box-shadow(@shadow) || ||
|-
| .vertical-gradient(@startColor, @endColor) || ||
|-
| .radial-gradient(@color1, @color2, @color3) || ||
|-
| .transition(@transition) || ||
|-
| .animation(@animation) || ||
|-
| .animation-name(@name) || ||
|-
| .ellipsis || ||
|-
| .overflow(@type) || ||
|-
| .overflow-x(@type) || ||
|-
| .overflow-y(@type) || ||
|-
| .backface-visibility(@type) || ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T14:14:49Z

Christoph.hellweg: /* OX Mixins */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || ||
|-
| @foldertreeSectionTitleColor || ||
|-
| @foldertreeActiveLabelColor || ||
|-
| @foldertreePassiveLabelColor || ||
|-
| @foldertreeHoverBackground || ||
|-
| @foldertreeSelectedBackground || ||
|-
| @foldertreeCounterBadgeBackground || ||
|-
| @foldertreeCounterBadgeColor || ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class

=== Sample ===
<pre class="language-css">
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

#menu a {
color: #111;
.bordered;
}

.post a {
color: red;
.bordered;
}
</pre>

=== OX Mixins ===

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel) || ||
|-
| .user-select(@select) || ||
|-
| .border-radius(@radius) || ||
|-
| .box-shadow(@shadow) || ||
|-
| .vertical-gradient(@startColor, @endColor) || ||
|-
| .radial-gradient(@color1, @color2, @color3) || ||
|-
| .transition(@transition) || ||
|-
| .animation(@animation) || ||
|-
| .animation-name(@name) || ||
|-
| .ellipsis || ||
|-
| .overflow(@type) || ||
|-
| .overflow-x(@type) || ||
|-
| .overflow-y(@type) || ||
|-
| .backface-visibility(@type) || ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T14:13:23Z

Christoph.hellweg: /* OX Mixins */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || ||
|-
| @foldertreeSectionTitleColor || ||
|-
| @foldertreeActiveLabelColor || ||
|-
| @foldertreePassiveLabelColor || ||
|-
| @foldertreeHoverBackground || ||
|-
| @foldertreeSelectedBackground || ||
|-
| @foldertreeCounterBadgeBackground || ||
|-
| @foldertreeCounterBadgeColor || ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class

=== Sample ===
<pre class="language-css">
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

#menu a {
color: #111;
.bordered;
}

.post a {
color: red;
.bordered;
}
</pre>

=== OX Mixins ===

{|
! Mixin || Sample || Description
|-
| .box-sizing(@boxmodel: content-box) || ||
|-
| .user-select(@select: none) || ||
|-
| .border-radius(@radius: 0px) || ||
|-
| .box-shadow(@shadow: none) || ||
|-
| .vertical-gradient(@startColor: #888888, @endColor: #333333) || ||
|-
| .radial-gradient(@color1: #000000, @color2: #555555, @color3: #ffffff) || ||
|-
| .transition(@transition: all 1s linear) || ||
|-
| .animation(@animation) || ||
|-
| .animation-name(@name) || ||
|-
| .ellipsis || ||
|-
| .overflow(@type: auto) || ||
|-
| .overflow-x(@type: auto) || ||
|-
| .overflow-y(@type: auto) || ||
|-
| .backface-visibility(@type: hidden) || ||
|}

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T14:09:26Z

Christoph.hellweg: /* Mixins */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || ||
|-
| @foldertreeSectionTitleColor || ||
|-
| @foldertreeActiveLabelColor || ||
|-
| @foldertreePassiveLabelColor || ||
|-
| @foldertreeHoverBackground || ||
|-
| @foldertreeSelectedBackground || ||
|-
| @foldertreeCounterBadgeBackground || ||
|-
| @foldertreeCounterBadgeColor || ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class

=== Sample ===
<pre class="language-css">
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

#menu a {
color: #111;
.bordered;
}

.post a {
color: red;
.bordered;
}
</pre>

=== OX Mixins ===

.box-sizing(@boxmodel: content-box)
.user-select(@select: none)
.border-radius(@radius: 0px)
.box-shadow(@shadow: none)
.vertical-gradient(@startColor: #888888, @endColor: #333333)
.radial-gradient(@color1: #000000, @color2: #555555, @color3: #ffffff)
.transition(@transition: all 1s linear)
.animation(@animation)
.animation-name(@name)
.ellipsis
.overflow(@type: auto)
.overflow-x(@type: auto)
.overflow-y(@type: auto)
.backface-visibility(@type: hidden)

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T13:23:54Z

Christoph.hellweg: /* Mixins */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || ||
|-
| @foldertreeSectionTitleColor || ||
|-
| @foldertreeActiveLabelColor || ||
|-
| @foldertreePassiveLabelColor || ||
|-
| @foldertreeHoverBackground || ||
|-
| @foldertreeSelectedBackground || ||
|-
| @foldertreeCounterBadgeBackground || ||
|-
| @foldertreeCounterBadgeColor || ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class

=== Sample ===
<pre class="language-css">
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

#menu a {
color: #111;
.bordered;
}

.post a {
color: red;
.bordered;
}
</pre>

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T13:20:25Z

Christoph.hellweg: /* Mixins */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || ||
|-
| @foldertreeSectionTitleColor || ||
|-
| @foldertreeActiveLabelColor || ||
|-
| @foldertreePassiveLabelColor || ||
|-
| @foldertreeHoverBackground || ||
|-
| @foldertreeSelectedBackground || ||
|-
| @foldertreeCounterBadgeBackground || ||
|-
| @foldertreeCounterBadgeColor || ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class

<pre class="language-css">
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
</pre>

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T13:20:17Z

Christoph.hellweg: /* Mixins */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || ||
|-
| @foldertreeSectionTitleColor || ||
|-
| @foldertreeActiveLabelColor || ||
|-
| @foldertreePassiveLabelColor || ||
|-
| @foldertreeHoverBackground || ||
|-
| @foldertreeSelectedBackground || ||
|-
| @foldertreeCounterBadgeBackground || ||
|-
| @foldertreeCounterBadgeColor || ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class

<pre class="language-less">
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
</pre>

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T13:20:02Z

Christoph.hellweg: /* Mixins */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || ||
|-
| @foldertreeSectionTitleColor || ||
|-
| @foldertreeActiveLabelColor || ||
|-
| @foldertreePassiveLabelColor || ||
|-
| @foldertreeHoverBackground || ||
|-
| @foldertreeSelectedBackground || ||
|-
| @foldertreeCounterBadgeBackground || ||
|-
| @foldertreeCounterBadgeColor || ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class

<pre class="language-css">
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
</pre>

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T13:05:36Z

Christoph.hellweg: /* Mixins */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || ||
|-
| @foldertreeSectionTitleColor || ||
|-
| @foldertreeActiveLabelColor || ||
|-
| @foldertreePassiveLabelColor || ||
|-
| @foldertreeHoverBackground || ||
|-
| @foldertreeSelectedBackground || ||
|-
| @foldertreeCounterBadgeBackground || ||
|-
| @foldertreeCounterBadgeColor || ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==
In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T12:52:12Z

Christoph.hellweg: /* LESS.JS */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/ LESS.JS] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || ||
|-
| @foldertreeSectionTitleColor || ||
|-
| @foldertreeActiveLabelColor || ||
|-
| @foldertreePassiveLabelColor || ||
|-
| @foldertreeHoverBackground || ||
|-
| @foldertreeSelectedBackground || ||
|-
| @foldertreeCounterBadgeBackground || ||
|-
| @foldertreeCounterBadgeColor || ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T12:51:44Z

Christoph.hellweg: /* LESS.JS */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [[http://lesscss.org/]] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || ||
|-
| @foldertreeSectionTitleColor || ||
|-
| @foldertreeActiveLabelColor || ||
|-
| @foldertreePassiveLabelColor || ||
|-
| @foldertreeHoverBackground || ||
|-
| @foldertreeSelectedBackground || ||
|-
| @foldertreeCounterBadgeBackground || ||
|-
| @foldertreeCounterBadgeColor || ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T12:51:24Z

Christoph.hellweg: /* File structure */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== LESS.JS ==

Please read [http://lesscss.org/] first

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || ||
|-
| @foldertreeSectionTitleColor || ||
|-
| @foldertreeActiveLabelColor || ||
|-
| @foldertreePassiveLabelColor || ||
|-
| @foldertreeHoverBackground || ||
|-
| @foldertreeSelectedBackground || ||
|-
| @foldertreeCounterBadgeBackground || ||
|-
| @foldertreeCounterBadgeColor || ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T12:45:40Z

Christoph.hellweg: /* Foldertree */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground || ||
|-
| @foldertreeSectionTitleColor || ||
|-
| @foldertreeActiveLabelColor || ||
|-
| @foldertreePassiveLabelColor || ||
|-
| @foldertreeHoverBackground || ||
|-
| @foldertreeSelectedBackground || ||
|-
| @foldertreeCounterBadgeBackground || ||
|-
| @foldertreeCounterBadgeColor || ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T12:44:25Z

Christoph.hellweg: /* Week View */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground ||
|-
| @foldertreeSectionTitleColor ||
|-
| @foldertreeActiveLabelColor ||
|-
| @foldertreePassiveLabelColor ||
|-
| @foldertreeHoverBackground ||
|-
| @foldertreeSelectedBackground ||
|-
| @foldertreeCounterBadgeBackground ||
|-
| @foldertreeCounterBadgeColor ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|-
| @calendarToolbarHeight || 41px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T12:43:52Z

Christoph.hellweg: /* Week View */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground ||
|-
| @foldertreeSectionTitleColor ||
|-
| @foldertreeActiveLabelColor ||
|-
| @foldertreePassiveLabelColor ||
|-
| @foldertreeHoverBackground ||
|-
| @foldertreeSelectedBackground ||
|-
| @foldertreeCounterBadgeBackground ||
|-
| @foldertreeCounterBadgeColor ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|}

==== Month View ====
{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T12:43:23Z

Christoph.hellweg: /* Week View */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground ||
|-
| @foldertreeSectionTitleColor ||
|-
| @foldertreeActiveLabelColor ||
|-
| @foldertreePassiveLabelColor ||
|-
| @foldertreeHoverBackground ||
|-
| @foldertreeSelectedBackground ||
|-
| @foldertreeCounterBadgeBackground ||
|-
| @foldertreeCounterBadgeColor ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @weekviewTimeWith || 58px ||
|}

{|
! Variable || Default || Description
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|}

== Mixins ==

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T12:42:19Z

Christoph.hellweg: /* Appointment */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground ||
|-
| @foldertreeSectionTitleColor ||
|-
| @foldertreeActiveLabelColor ||
|-
| @foldertreePassiveLabelColor ||
|-
| @foldertreeHoverBackground ||
|-
| @foldertreeSelectedBackground ||
|-
| @foldertreeCounterBadgeBackground ||
|-
| @foldertreeCounterBadgeColor ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|}

==== Week View ====
{|
! Variable || Default || Description
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|-
| @weekviewTimeWith || 58px ||
|}

== Mixins ==

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T12:41:16Z

Christoph.hellweg: /* Calendar */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground ||
|-
| @foldertreeSectionTitleColor ||
|-
| @foldertreeActiveLabelColor ||
|-
| @foldertreePassiveLabelColor ||
|-
| @foldertreeHoverBackground ||
|-
| @foldertreeSelectedBackground ||
|-
| @foldertreeCounterBadgeBackground ||
|-
| @foldertreeCounterBadgeColor ||
|}

=== Calendar ===
==== Appointment ====
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|-
| @weekviewTimeWith || 58px ||
|}

== Mixins ==

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Theming the login page ==

The login page is a little bit special. If you don’t use the [[form login]] (and provide your own login page), you might want to also theme the login page. Learn here, how to do this.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T12:39:55Z

Christoph.hellweg: /* Calendar */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|-
| @vgridFontSize || 13px
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Pagination ===

{|
! Variable || Default || Description
|-
| @paginationBackground || #fff
|-
| @paginationBorder || #ddd
|-
| @paginationActiveBackground || #f5f5f5
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground ||
|-
| @foldertreeSectionTitleColor ||
|-
| @foldertreeActiveLabelColor ||
|-
| @foldertreePassiveLabelColor ||
|-
| @foldertreeHoverBackground ||
|-
| @foldertreeSelectedBackground ||
|-
| @foldertreeCounterBadgeBackground ||
|-
| @foldertreeCounterBadgeColor ||
|}

=== Calendar ===
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555 /* gray */ ||
|-
| @appointmentDeclinedFont || #888 /* dark gray */||
|-
| @appointmentUnconfirmedAlpha || 0.4 ||
|-
| @appointmentDeclinedAlpha || 0.3 ||
|-
| @appointmentHoverPct || 15% ||
|-
| @appointmentDeclinedAlpha || 0.3
|-
| @weekviewAppointmentLasso || #aeaeff ||
|-
| @weekviewDayIn || #fff /* white */ ||
|-
| @weekviewDayOut || #e0e0e0 /* grey */ ||
|-
| @weekviewTimeline || #f00 /* red */ ||
|-
| @monthviewAppointmentOut || #aaa /* light gray */ ||
|-
| @monthviewToday || #daefff /* light blue */||
|-
| @calendarToolbarHeight || 41px ||
|-
| @weekviewTimeWith || 58px ||
|}

== Mixins ==

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T09:31:16Z

Christoph.hellweg: /* Calendar */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground ||
|-
| @foldertreeSectionTitleColor ||
|-
| @foldertreeActiveLabelColor ||
|-
| @foldertreePassiveLabelColor ||
|-
| @foldertreeHoverBackground ||
|-
| @foldertreeSelectedBackground ||
|-
| @foldertreeCounterBadgeBackground ||
|-
| @foldertreeCounterBadgeColor ||
|}

=== Calendar ===
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555; /* gray */ ||
|-
| @appointmentDeclinedFont || #888; ||
|-
| @appointmentUnconfirmedAlpha || 0.4; ||
|-
| @appointmentDeclinedAlpha || 0.3; ||
|-
| @appointmentHoverPct || 15%; ||
|-
| @appointmentDeclinedAlpha || 0.3; ||
|-
| @weekviewAppointmentLasso || rgba(0, 136, 204, 0.30); ||
|-
| @weekviewDayIn || #fff; /* whitw */ ||
|-
| @weekviewDayOut || #e0e0e0; /* grey */ ||
|-
| @weekviewTimeline || #f00; /* red */ ||
|-
| @monthviewAppointmentOut || #aaa; /* light gray */ ||
|-
| @monthviewToday || #daefff ||
|-
| @calendarToolbarHeight || 41px; ||
|-
| @weekviewTimeWith || 58px; ||
|}

== Mixins ==

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]

AppSuite:Theming

2013-04-11T09:30:57Z

Christoph.hellweg: /* Calendar */

In this article, you can learn how to create customized themes and use them to change the look of you appsuite installation.

== File structure ==

A theme basically consists of two files located in <code>$APPSUITE_ROOT/apps/themes/$YOUR_UNIQUE_THEME_NAME</code>. These files are described in this and the following sections.

=== definitions.less ===

This file can be used to override variables described in the "Variables" section of this article.

=== style.less ===

This file can be used to define any CSS you like. Before doing this, check, if there really is no variable that can be used to achieve the same thing.

== Variables ==

=== Basic ===

==== Font ====

{|
! Variable || Default || Description
|-
| @sansFontFamily || "Helvetica Neue", Helvetica, Arial, sans-serif
|-
| @serifFontFamily || Georgia, "Times New Roman", Times, serif
|-
| @monoFontFamily || Monaco, Menlo, Consolas, "Courier New", monospace
|-
| @baseFontSize || 14px
|-
| @baseFontFamily || @sansFontFamily
|-
| @baseLineHeight || 20px
|-
| @altFontFamily || @serifFontFamily
|-
| @touchFontSize || 15px
|-
| @headingsFontFamily || inherit
|-
| @headingsFontWeight || bold
|-
| @fontSizeLarge || @baseFontSize * 1.25
|-
| @fontSizeSmall || @baseFontSize * 0.85
|-
| @fontSizeMini || @baseFontSize * 0.75
|}

==== Colors ====

{|
! Variable || Default || Description
|-
| @bodyBackground || @white
|-
| @textColor || @grayDark
|-
| @linkColor || #08c
|-
| @linkColorHover || darken(@linkColor, 15%)
|-
| @linkAccentColor || #ffad00
|-
| @linkAccentColorHover || darken(@linkAccentColor, 15%)
|-
| @headingsColor || inherit
|-
| @black || #000
|-
| @grayDarker || #222
|-
| @grayDark || #333
|-
| @gray || #555
|-
| @grayLight || #aaa
|-
| @grayLighter || #eee
|-
| @white || #fff
|-
| @blue || darken(#049cdb, 5%)
|-
| @blueDark || #0064cd
|-
| @blueLight || lighten(#049cdb, 25%)
|-
| @green || #1A8D1A
|-
| @greenLight || #92D050
|-
| @red || #cc0000
|-
| @yellow || #F8E400
|-
| @orange || #f89406
|-
| @pink || #E01CD9
|-
| @purple || #7E16CF
|-
|}

==== Space ====

{|
! Variable || Default || Description
|-
| @paddingLarge || 11px 19px
|-
| @paddingSmall || 2px 10px
|-
| @paddingMini || 0 6px
|-
| @baseBorderRadius || 4px
|-
| @borderRadiusLarge || 6px
|-
| @borderRadiusSmall || 3px
|}

=== Buttons ===

{|
! Variable || Default || Description
|-
| @btnBackground || @white
|-
| @btnBackgroundHighlight || darken(@white, 10%)
|-
| @btnBorder || #bbb
|-
| @btnPrimaryBackground || @linkColor
|-
| @btnPrimaryBackgroundHighlight || spin(@btnPrimaryBackground, 20%)
|-
| @btnInfoBackground || #5bc0de
|-
| @btnInfoBackgroundHighlight || #2f96b4
|-
| @btnSuccessBackground || #62c462
|-
| @btnSuccessBackgroundHighlight || #51a351
|-
| @btnWarningBackground || lighten(@orange, 15%)
|-
| @btnWarningBackgroundHighlight || @orange
|-
| @btnDangerBackground || #ee5f5b
|-
| @btnDangerBackgroundHighlight || #bd362f
|-
| @btnInverseBackground || #444
|-
| @btnInverseBackgroundHighlight || @grayDarker
|}

=== Dropdowns ===

{|
! Variable || Default || Description
|-
| @dropdownBackground || @white
|-
| @dropdownBorder || rgba(0,0,0,.2)
|-
| @dropdownDividerTop || #e5e5e5
|-
| @dropdownDividerBottom || @white
|-
| @dropdownLinkColor || @grayDark
|-
| @dropdownLinkColorHover || @white
|-
| @dropdownLinkColorActive || @white
|-
| @dropdownLinkBackgroundActive || @linkColor
|-
| @dropdownLinkBackgroundHover || @dropdownLinkBackgroundActive
|}

=== Foldertree ===
{|
! Variable || Default || Description
|-
| @foldertreeSidepanelBackground ||
|-
| @foldertreeSectionTitleColor ||
|-
| @foldertreeActiveLabelColor ||
|-
| @foldertreePassiveLabelColor ||
|-
| @foldertreeHoverBackground ||
|-
| @foldertreeSelectedBackground ||
|-
| @foldertreeCounterBadgeBackground ||
|-
| @foldertreeCounterBadgeColor ||
|}

=== Calendar ===
{|
! Variable || Default || Description
|-
| @appointmentReserved || #08c; /* blue */ ||
|-
| @appointmentTemporary || #ffbb00; /* yellow */ ||
|-
| @appointmentAbsent || #913f3f; /* red */ ||
|-
| @appointmentFree || #8eb360; /* green */ ||
|-
| @appointmentPrivate || #555; /* gray */ ||
|-
| @appointmentDeclinedFont || #888; ||
|-
| @appointmentUnconfirmedAlpha || 0.4; ||
|-
| @appointmentDeclinedAlpha || 0.3; ||
|-
| @appointmentHoverPct || 15%; ||
|-
| @appointmentDeclinedAlpha || 0.3; ||
|-
| @weekviewAppointmentLasso || rgba(0, 136, 204, 0.30); ||
|-
| @weekviewDayIn || #fff; /* whitw */ ||
|-
| @weekviewDayOut || #e0e0e0; /* grey */ ||
|-
| @weekviewTimeline || #f00; /* red */ ||
|-
| @monthviewAppointmentOut || #aaa; /* light gray */ ||
|-
| @monthviewToday: #daefff || ||
|-
| @calendarToolbarHeight || 41px; ||
|-
| @weekviewTimeWith || 58px; ||
|}

== Mixins ==

== How to activate a theme during development ==

When creating a new theme, you don’t have it installed with your frontend. In this case you don’t want to go to a complete build of a theme and reinstall it for every change. The trick is to create your theme and overwrite the default theme with it. You can then use the [[AppSuite:appserver|appserver]] proxy to ship your own version of the UI.

To activate a theme on the backend, you have to add it to the <code>io.ox/core/settingsOptions//themes</code> list.

==== Example ====

Adding <pre>io.ox/core/settingsOptions//themes/unicorn=Friendship is Magic</pre> to <code>etc/settings/appsuite.properties</code> add a theme named <code>unicorn</code> with the name <code>Friendship is Magic</code> to the list of themes, a user can choose. Find the list in the <code>Settings -> Basic</code> view behind the option <code>Theme</code>.

== Best practice ==

To be really safe, it’s best to only define your own values for the variables shown above. If this really breaks anything, we consider this a bug, please report it [https://bugs.open-xchange.com/] in our bugzilla.

Of course, using CSS in <code>style.less</code> file to define your own styles is also possible. Make sure to test your style in such cases more carefully. It is most likely safe to change minor things using this file, but if you plan to change any positions of larger elements, this might break the complete design. So please be careful when overwriting the default CSS rules.

== Caveats ==

[[Category:AppSuite]]
[[Category:UI]]