AppSuite:Dynamic Theme - Revision history

Khgras at 10:21, 22 May 2017

2017-05-22T10:21:45Z

← Older revision		Revision as of 10:21, 22 May 2017
Line 1:		Line 1:
	~~<!-- !!! -->~~		The content on this page has moved to https://documentation.open-xchange.com/latest/ui/theming/dynamic-theming.html
	~~<!-- PLEASE APPLY CHANGES ONLY TO THE NEW TECHNICAL DOCUMENTATION~~: ~~wd/frontend~~/~~web~~/documentation -->
	~~<!-- !!! -->~~

	~~{{Stability~~-~~unstable}}~~		Note: Open-Xchange is in the process of migrating all its technical documentation to a new and improved documentation system (documentation.open-xchange.com). Please note as the migration takes place more information will be available on the new system and less on this system. Thank you for your understanding during this period of transition.

	~~<div class="title">Dynamic Theming</div>~~

	~~The dynamic theme plugin allows to have custom colors and logo without creating a real theme for each possible color combination. The customization information~~ is ~~stored~~ in the ~~[[ConfigCascade\|Configuration Cascade]] and applied at runtime, immediately after login.~~

	~~== Installation ==~~

	~~The theme generator consists of the single package <tt>open-xchange-dynamic-theme</tt>, which is installed on the OX middleware.~~

	Before OX App Suite v7.6.2, the package included the command line tool <tt>/opt/open-xchange/sbin/update-dynamic-theme</tt>, which must be called after every update of other plugins. It is called automatically after the installation and upgrades of ~~<tt>open-xchange-dynamic-theme</tt>. The tool examines~~ all ~~installed <tt>.less</tt> files and computes which CSS rules need~~ to ~~be changed to apply the custom colors everywhere.~~

	~~Since v7.6.2, the tool is called automatically whenever necessary, so it is not necessary to call it manually,~~ and ~~therefore it is not installed in the <tt>/opt/open-xchange/sbin/</tt> directory anymore~~.

	~~== Configuration ==~~

	~~=== Enabling the Plugin ===~~

	~~The plugin is enabled or disabled by the [[AppSuite:Capabilities\|capability]] <tt>dynamic-theme</tt>, e.g. in a file <tt>/opt/~~open-xchange~~/etc/dynamic-theme~~.~~properties</tt> set~~

	com.~~openexchange.capability.dynamic-theme=true~~

	When using the plugin, the actual theme should be the built-in <tt>default</tt> theme. To prevent all users from changing it and hide the theme selector in the preferences, set the property <tt>io.ox/core//theme</tt> to read-only. To do this, change the file <tt>/opt/open-xchange/etc/meta/appsuite.yaml</tt> as ~~follows:~~

	~~io.ox/core//theme:~~
	~~protected: true~~

	~~If some users won't use dynamic themes, this approach won't work. Instead,~~ the ~~theme selector can~~ be ~~disabled an enabled by controlling the list of~~ available ~~themes. The theme selector is hidden if~~ the list is empty. To be able to do that with the Configuration Cascade, the entire list of themes needs to be specified as a single JSON value, e.g. by changing the file <tt>/opt/open-xchange/etc/settings/appsuite.properties</tt> as follows:

	~~io.ox/core/settingOptions//themes={"default":"Default Theme"}~~

	~~Then, to hide the theme selector for users with a dynamic theme, use the Configuration Cascade to change the value to <tt>{}</tt>.~~

	~~=== Specifying a Theme ===~~

	The package installs the file <tt>/opt/open-xchange/etc/settings/open-xchange-dynamic-theme.properties</tt>, which contains the global defaults for the custom theme settings. Any of the settings contained in that file can be changed per-context or at any other granularity supported by the [[ConfigCascade#UI_Properties\|Configuration Cascade]]. The individual settings are as follows:

	~~<table class="wikitable" style="width:auto">~~
	~~<tr><th>Prefix</th>~~
	~~<th> Key </th><th> Default value </th></tr>~~
	~~<tr><td rowspan="5" style="vertical-align:middle"><tt>io.ox/dynamic-theme//</tt></td>~~
	~~<td><tt> frameColor </tt></td><td><tt> #333 </tt></td></tr>~~
	~~<tr><td><tt> selectionColor </tt></td><td><tt> #39a9e1 </tt></td></tr>~~
	~~<tr><td><tt> logoWidth </tt></td><td><tt> 60 </tt></td></tr>~~
	~~<tr><td><tt> logoURL </tt></td><td>~~
	~~<tt> apps/themes/default/logo-small.png </tt></td></tr>~~
	~~</table>~~

	The colors can be any CSS color; <tt>logoWidth</tt> is specified in pixels; <tt>logoURL</tt> can be relative (to <tt>/appsuite/</tt>), or absolute. When using absolute URLs to point to different hosts, use the form <tt>//<var>hostname</var>/<var>path</var></tt> to keep the protocol (HTTP or HTTPS) and ~~avoid any unnecessary security warnings.~~

	~~== Maintenance ==~~

	~~The source file <tt>apps/io.ox/dynamic-theme/definitions.~~less.~~in</tt> contains the Less rules~~ for ~~the theme. All keys in the namespace <tt>io.ox/dynamic-theme//</tt> are converted to Less variables by prefixing them with <tt>@io-ox-dynamic-theme-</tt>. The set~~ of ~~keys in the following files must be kept in sync:~~
	* <tt>apps/io.ox/dynamic-themes/definitions.less.in</tt>
	* <tt>apps/io.ox/dynamic-theme/settings/defaults.js</tt>
	* <tt>lib/update-dynamic-theme.js</tt>
	* <tt>conf/settings/open-xchange-dynamic-theme.~~properties</tt>~~

Viktor.Pracht: /* Specifying a Theme */

2016-05-17T15:44:07Z

Specifying a Theme

← Older revision		Revision as of 15:44, 17 May 2016
Line 45:		Line 45:
	<tr><td rowspan="5" style="vertical-align:middle"><tt>io.ox/dynamic-theme//</tt></td>		<tr><td rowspan="5" style="vertical-align:middle"><tt>io.ox/dynamic-theme//</tt></td>
	<td><tt> frameColor </tt></td><td><tt> #333 </tt></td></tr>		<td><tt> frameColor </tt></td><td><tt> #333 </tt></td></tr>
	~~<tr><td><tt> iconColor </tt></td><td><tt> #bbb </tt></td></tr>~~
	<tr><td><tt> selectionColor </tt></td><td><tt> #39a9e1 </tt></td></tr>		<tr><td><tt> selectionColor </tt></td><td><tt> #39a9e1 </tt></td></tr>
	<tr><td><tt> logoWidth </tt></td><td><tt> 60 </tt></td></tr>		<tr><td><tt> logoWidth </tt></td><td><tt> 60 </tt></td></tr>

Frank.paczynski at 10:11, 11 February 2016

2016-02-11T10:11:26Z

← Older revision		Revision as of 10:11, 11 February 2016
Line 1:		Line 1:
	<!-- !!! -->		<!-- !!! -->
	<!-- PLEASE APPLY CHANGES ONLY TO THE NEW TECHNICAL DOCUMENTATION: wd/frontend/web/documentation -->		<!-- PLEASE APPLY CHANGES ONLY TO THE NEW TECHNICAL DOCUMENTATION: wd/frontend/web/documentation -->
	<!-- !!! -		<!-- !!! -->

	{{Stability-unstable}}		{{Stability-unstable}}

Frank.paczynski at 10:10, 11 February 2016

2016-02-11T10:10:34Z

← Older revision		Revision as of 10:10, 11 February 2016
Line 1:		Line 1:
			<!-- !!! -->
			<!-- PLEASE APPLY CHANGES ONLY TO THE NEW TECHNICAL DOCUMENTATION: wd/frontend/web/documentation -->
			<!-- !!! -

	{{Stability-unstable}}		{{Stability-unstable}}

Viktor.Pracht: /* Installation */ redundant "version" in "version OX App Suite v"

2015-10-02T10:07:19Z

Installation: redundant "version" in "version OX App Suite v"

← Older revision		Revision as of 10:07, 2 October 2015
Line 9:		Line 9:
	The theme generator consists of the single package <tt>open-xchange-dynamic-theme</tt>, which is installed on the OX middleware.		The theme generator consists of the single package <tt>open-xchange-dynamic-theme</tt>, which is installed on the OX middleware.

	Before ~~version~~ OX App Suite v7.6.2, the package included the command line tool <tt>/opt/open-xchange/sbin/update-dynamic-theme</tt>, which must be called after every update of other plugins. It is called automatically after the installation and upgrades of <tt>open-xchange-dynamic-theme</tt>. The tool examines all installed <tt>.less</tt> files and computes which CSS rules need to be changed to apply the custom colors everywhere.		Before OX App Suite v7.6.2, the package included the command line tool <tt>/opt/open-xchange/sbin/update-dynamic-theme</tt>, which must be called after every update of other plugins. It is called automatically after the installation and upgrades of <tt>open-xchange-dynamic-theme</tt>. The tool examines all installed <tt>.less</tt> files and computes which CSS rules need to be changed to apply the custom colors everywhere.

	Since v7.6.2, the tool is called automatically whenever necessary, so it is not necessary to call it manually, and therefore it is not installed in the <tt>/opt/open-xchange/sbin/</tt> directory anymore.		Since v7.6.2, the tool is called automatically whenever necessary, so it is not necessary to call it manually, and therefore it is not installed in the <tt>/opt/open-xchange/sbin/</tt> directory anymore.

Khgras at 10:01, 2 October 2015

2015-10-02T10:01:31Z

← Older revision		Revision as of 10:01, 2 October 2015
Line 9:		Line 9:
	The theme generator consists of the single package <tt>open-xchange-dynamic-theme</tt>, which is installed on the OX middleware.		The theme generator consists of the single package <tt>open-xchange-dynamic-theme</tt>, which is installed on the OX middleware.

	Before version 7.6.2, the package included the command line tool <tt>/opt/open-xchange/sbin/update-dynamic-theme</tt>, which must be called after every update of other plugins. It is called automatically after the installation and upgrades of <tt>open-xchange-dynamic-theme</tt>. The tool examines all installed <tt>.less</tt> files and computes which CSS rules need to be changed to apply the custom colors everywhere.		Before version OX App Suite v7.6.2, the package included the command line tool <tt>/opt/open-xchange/sbin/update-dynamic-theme</tt>, which must be called after every update of other plugins. It is called automatically after the installation and upgrades of <tt>open-xchange-dynamic-theme</tt>. The tool examines all installed <tt>.less</tt> files and computes which CSS rules need to be changed to apply the custom colors everywhere.

	Since ~~version 7~~.6.2, the tool is called automatically whenever necessary, so it is not necessary to call it manually, and therefore it is not installed in the <tt>/opt/open-xchange/sbin/</tt> directory anymore.		Since v7.6.2, the tool is called automatically whenever necessary, so it is not necessary to call it manually, and therefore it is not installed in the <tt>/opt/open-xchange/sbin/</tt> directory anymore.

	== Configuration ==		== Configuration ==

Viktor.Pracht: Created page with "{{Stability-unstable}}
Dynamic Theming
The dynamic theme plugin allows to have custom colors and logo without creating a real theme for each possibl..."

2015-10-02T09:55:59Z

Created page with "{{Stability-unstable}} <div class="title">Dynamic Theming</div> The dynamic theme plugin allows to have custom colors and logo without creating a real theme for each possibl..."

New page

{{Stability-unstable}}

<div class="title">Dynamic Theming</div>

The dynamic theme plugin allows to have custom colors and logo without creating a real theme for each possible color combination. The customization information is stored in the [[ConfigCascade|Configuration Cascade]] and applied at runtime, immediately after login.

== Installation ==

The theme generator consists of the single package <tt>open-xchange-dynamic-theme</tt>, which is installed on the OX middleware.

Before version 7.6.2, the package included the command line tool <tt>/opt/open-xchange/sbin/update-dynamic-theme</tt>, which must be called after every update of other plugins. It is called automatically after the installation and upgrades of <tt>open-xchange-dynamic-theme</tt>. The tool examines all installed <tt>.less</tt> files and computes which CSS rules need to be changed to apply the custom colors everywhere.

Since version 7.6.2, the tool is called automatically whenever necessary, so it is not necessary to call it manually, and therefore it is not installed in the <tt>/opt/open-xchange/sbin/</tt> directory anymore.

== Configuration ==

=== Enabling the Plugin ===

The plugin is enabled or disabled by the [[AppSuite:Capabilities|capability]] <tt>dynamic-theme</tt>, e.g. in a file <tt>/opt/open-xchange/etc/dynamic-theme.properties</tt> set

com.openexchange.capability.dynamic-theme=true

When using the plugin, the actual theme should be the built-in <tt>default</tt> theme. To prevent all users from changing it and hide the theme selector in the preferences, set the property <tt>io.ox/core//theme</tt> to read-only. To do this, change the file <tt>/opt/open-xchange/etc/meta/appsuite.yaml</tt> as follows:

io.ox/core//theme:
protected: true

If some users won't use dynamic themes, this approach won't work. Instead, the theme selector can be disabled an enabled by controlling the list of available themes. The theme selector is hidden if the list is empty. To be able to do that with the Configuration Cascade, the entire list of themes needs to be specified as a single JSON value, e.g. by changing the file <tt>/opt/open-xchange/etc/settings/appsuite.properties</tt> as follows:

io.ox/core/settingOptions//themes={"default":"Default Theme"}

Then, to hide the theme selector for users with a dynamic theme, use the Configuration Cascade to change the value to <tt>{}</tt>.

=== Specifying a Theme ===

The package installs the file <tt>/opt/open-xchange/etc/settings/open-xchange-dynamic-theme.properties</tt>, which contains the global defaults for the custom theme settings. Any of the settings contained in that file can be changed per-context or at any other granularity supported by the [[ConfigCascade#UI_Properties|Configuration Cascade]]. The individual settings are as follows:

<table class="wikitable" style="width:auto">
<tr><th>Prefix</th>
<th> Key </th><th> Default value </th></tr>
<tr><td rowspan="5" style="vertical-align:middle"><tt>io.ox/dynamic-theme//</tt></td>
<td><tt> frameColor </tt></td><td><tt> #333 </tt></td></tr>
<tr><td><tt> iconColor </tt></td><td><tt> #bbb </tt></td></tr>
<tr><td><tt> selectionColor </tt></td><td><tt> #39a9e1 </tt></td></tr>
<tr><td><tt> logoWidth </tt></td><td><tt> 60 </tt></td></tr>
<tr><td><tt> logoURL </tt></td><td>
<tt> apps/themes/default/logo-small.png </tt></td></tr>
</table>

The colors can be any CSS color; <tt>logoWidth</tt> is specified in pixels; <tt>logoURL</tt> can be relative (to <tt>/appsuite/</tt>), or absolute. When using absolute URLs to point to different hosts, use the form <tt>//<var>hostname</var>/<var>path</var></tt> to keep the protocol (HTTP or HTTPS) and avoid any unnecessary security warnings.

== Maintenance ==

The source file <tt>apps/io.ox/dynamic-theme/definitions.less.in</tt> contains the Less rules for the theme. All keys in the namespace <tt>io.ox/dynamic-theme//</tt> are converted to Less variables by prefixing them with <tt>@io-ox-dynamic-theme-</tt>. The set of keys in the following files must be kept in sync:
* <tt>apps/io.ox/dynamic-themes/definitions.less.in</tt>
* <tt>apps/io.ox/dynamic-theme/settings/defaults.js</tt>
* <tt>lib/update-dynamic-theme.js</tt>
* <tt>conf/settings/open-xchange-dynamic-theme.properties</tt>