AppSuite:Upgrading themes to 7 6 - Revision history

Khgras at 10:18, 22 May 2017

2017-05-22T10:18:49Z

← Older revision		Revision as of 10:18, 22 May 2017
Line 20:		Line 20:
	==Manual update==		==Manual update==

	Very important: Please mind that you won't see any build errors if your theme ''defines'' deprecated variables! You will get errors, however, if your theme ''uses'' deprecated and therefore undefined variables (see ~~[[AppSuite~~:~~Theming#Variables\|Variables]]~~).		Very important: Please mind that you won't see any build errors if your theme ''defines'' deprecated variables! You will get errors, however, if your theme ''uses'' deprecated and therefore undefined variables (see https://documentation.open-xchange.com/latest/ui/theming.html).

	The update is pretty straightforward:		The update is pretty straightforward:

	# Migrate variables in definitions.less. Bootstrap 2.x used camelCase, Bootstrap 3 introduced lisp-case. See [~~[AppSuite~~:~~Theming#~~Variables~~\|Variables]~~]. If you're lucky that's 99% of the show.		# Migrate variables in definitions.less. Bootstrap 2.x used camelCase, Bootstrap 3 introduced lisp-case. See [https://documentation.open-xchange.com/latest/ui/theming.html Variables]. If you're lucky that's 99% of the show.
	# Fix image URLs. Pathes are no longer relative to the theme. Therefore '''url(logo.png)''' must be rewritten as '''url(apps/themes/foo/logo.png)'''. Please mind to use '''apps/...''' - '''NOT /apps/...'''!		# Fix image URLs. Pathes are no longer relative to the theme. Therefore '''url(logo.png)''' must be rewritten as '''url(apps/themes/foo/logo.png)'''. Please mind to use '''apps/...''' - '''NOT /apps/...'''!
	# Fix all other less files; maybe style.less. Especially check selectors if they are still valid.		# Fix all other less files; maybe style.less. Especially check selectors if they are still valid.

Matthias.biggeleben at 19:00, 2 July 2014

2014-07-02T19:00:21Z

← Older revision		Revision as of 19:00, 2 July 2014
Line 1:		Line 1:
	<div class="title">Upgrading themes to 7.6</div>		<div class="title">Upgrading themes to 7.6</div>

	This article guides through the mandatory steps to update themes from 7.4.x to 7.6.0. It's does not cover what is necessary to migrate to the new build system.		This article guides through the mandatory steps to update themes from 7.4.x to 7.6.0. It's does not cover what is necessary to [[AppSuite:Upgrade_app_using_yo\|migrate to the new build system]].

	==Prerequisite==		==Prerequisite==

Matthias.biggeleben: /* Manual update */

2014-07-02T18:58:11Z

Manual update

← Older revision		Revision as of 18:58, 2 July 2014
Line 28:		Line 28:
	# Fix all other less files; maybe style.less. Especially check selectors if they are still valid.		# Fix all other less files; maybe style.less. Especially check selectors if they are still valid.

	~~If you use~~ ''grunt watch'' your theme will be built automatically ~~when~~ a file gets changed. Otherwise run ''grunt'' manually.		Best to run '''grunt watch''' in the local theme repository, so that your theme will be built automatically every time a file gets changed. Otherwise run ''grunt'' manually.

	==Verify in browser==		==Verify in browser==

	You can force the UI to use a specific theme by adding the URL parameter '''...&theme=foo'''. If your changes don't arrive in the UI (they normally should), use '''ox.clearFileCache();''' to clear local browser caches.		You can force the UI to use a specific theme by adding the URL parameter '''...&theme=foo'''. If your changes don't arrive in the UI (they normally should), use '''ox.clearFileCache();''' to clear local browser caches.

Matthias.biggeleben: /* Manual update */

2014-07-02T18:56:36Z

Manual update

← Older revision		Revision as of 18:56, 2 July 2014
Line 25:		Line 25:

	# Migrate variables in definitions.less. Bootstrap 2.x used camelCase, Bootstrap 3 introduced lisp-case. See [[AppSuite:Theming#Variables\|Variables]]. If you're lucky that's 99% of the show.		# Migrate variables in definitions.less. Bootstrap 2.x used camelCase, Bootstrap 3 introduced lisp-case. See [[AppSuite:Theming#Variables\|Variables]]. If you're lucky that's 99% of the show.
	# Fix image URLs. Pathes are no longer relative to the theme. Therefore '''url(logo.png)''' must be rewritten as '''url(apps/themes/foo/logo.png)'''.		# Fix image URLs. Pathes are no longer relative to the theme. Therefore '''url(logo.png)''' must be rewritten as '''url(apps/themes/foo/logo.png)'''. Please mind to use '''apps/...''' - '''NOT /apps/...'''!
	# Fix all other less files; maybe style.less. Especially check selectors if they are still valid.		# Fix all other less files; maybe style.less. Especially check selectors if they are still valid.

Matthias.biggeleben: /* Prepare */

2014-07-02T18:55:32Z

Prepare

← Older revision		Revision as of 18:55, 2 July 2014
Line 8:		Line 8:
	==Prepare==		==Prepare==

	# First time: Clone the git repository, e.g. ''git clone https://git.open-xchange.com/git/foo''. Make sure you're in the proper branch (''git checkout branch-name''). Don't forget to git pull.		# First time: Clone the git repository of your theme, e.g. ''git clone https://git.open-xchange.com/git/foo''. Make sure you're in the proper branch (''git checkout branch-name''). Don't forget to git pull.
	# First time: Run '''npm install'''		# First time: Run '''npm install'''
	# Run '''grunt connect watch'''. If you already have a local grunt config for this repository, you're fine, just stop grunt via Ctrl+C. Otherwise you will be notified that '''coreDir''' is not configured. Grunt will offer you a command to get a basic grunt config (see next step).		# Run '''grunt connect watch'''. If you already have a local grunt config for this repository, you're fine, just stop grunt via Ctrl+C. Otherwise you will be notified that '''coreDir''' is not configured. Grunt will offer you a command to get a basic grunt config (see next step).
Line 16:		Line 16:
	# You have two alternatives now:		# You have two alternatives now:
	## Run against an existing server. Just run '''grunt connect watch''' now. Please mind to enter a valid server in your local conf.		## Run against an existing server. Just run '''grunt connect watch''' now. Please mind to enter a valid server in your local conf.
	## Run your own local server. Switch to core UI folder. Enter the theme's repository to "prefixes" array in grunt/local.conf.json. ~~Absolute~~ path including "build", e.g. ''/Users/foofoo/git/repo/great-themes/build''. Now run '''grunt connect watch'''.		## Run your own local server. Switch to core UI folder. Enter the theme's repository to "prefixes" array in grunt/local.conf.json. This array defines where the appserver will look for source files. Requires an absolute path including "build", e.g. ''/Users/foofoo/git/repo/great-themes/build''. Now run '''grunt connect watch''' from core UI.

	==Manual update==		==Manual update==

Matthias.biggeleben: /* Verify */

2014-07-01T13:35:36Z

Verify

← Older revision		Revision as of 13:35, 1 July 2014
Line 30:		Line 30:
	If you use ''grunt watch'' your theme will be built automatically when a file gets changed. Otherwise run ''grunt'' manually.		If you use ''grunt watch'' your theme will be built automatically when a file gets changed. Otherwise run ''grunt'' manually.

	==Verify==		==Verify in browser==

	You can force the UI to use a specific theme by adding the URL parameter '''...&theme=foo'''. If your changes don't arrive in the UI (they normally should), use '''ox.clearFileCache();''' to clear local browser caches.		You can force the UI to use a specific theme by adding the URL parameter '''...&theme=foo'''. If your changes don't arrive in the UI (they normally should), use '''ox.clearFileCache();''' to clear local browser caches.

Matthias.biggeleben: /* Verify */

2014-07-01T13:24:51Z

Verify

← Older revision		Revision as of 13:24, 1 July 2014
Line 32:		Line 32:
	==Verify==		==Verify==

	You can force the UI to use a specific theme by adding the URL parameter '''...&theme=foo'''. If your changes don't arrive in the UI (they normally should), use '''ox.clearFileCache();''' to clear local caches.		You can force the UI to use a specific theme by adding the URL parameter '''...&theme=foo'''. If your changes don't arrive in the UI (they normally should), use '''ox.clearFileCache();''' to clear local browser caches.

Matthias.biggeleben: /* Verify */

2014-07-01T13:24:36Z

Verify

← Older revision		Revision as of 13:24, 1 July 2014
Line 32:		Line 32:
	==Verify==		==Verify==

	You can force the UI to use a specific theme by adding the URL parameter '''...&theme=foo'''. If your changes don't arrive in the UI (they normally should), use ox.clearFileCache(); to clear local caches.		You can force the UI to use a specific theme by adding the URL parameter '''...&theme=foo'''. If your changes don't arrive in the UI (they normally should), use '''ox.clearFileCache();''' to clear local caches.

Matthias.biggeleben: /* Verify */

2014-07-01T13:24:24Z

Verify

← Older revision		Revision as of 13:24, 1 July 2014
Line 32:		Line 32:
	==Verify==		==Verify==

	You can force the UI to use a specific theme by adding the URL parameter '''...&theme=foo'''.		You can force the UI to use a specific theme by adding the URL parameter '''...&theme=foo'''. If your changes don't arrive in the UI (they normally should), use ox.clearFileCache(); to clear local caches.

Matthias.biggeleben: /* Prepare */

2014-07-01T10:22:10Z

Prepare

← Older revision		Revision as of 10:22, 1 July 2014
Line 10:		Line 10:
	# First time: Clone the git repository, e.g. ''git clone https://git.open-xchange.com/git/foo''. Make sure you're in the proper branch (''git checkout branch-name''). Don't forget to git pull.		# First time: Clone the git repository, e.g. ''git clone https://git.open-xchange.com/git/foo''. Make sure you're in the proper branch (''git checkout branch-name''). Don't forget to git pull.
	# First time: Run '''npm install'''		# First time: Run '''npm install'''
	# Run '''grunt watch'''. If you already have a local grunt config for this repository, you're fine. Otherwise you will be notified that '''coreDir''' is not configured. Grunt will offer you a command to get a basic grunt config (see next step).		# Run '''grunt connect watch'''. If you already have a local grunt config for this repository, you're fine, just stop grunt via Ctrl+C. Otherwise you will be notified that '''coreDir''' is not configured. Grunt will offer you a command to get a basic grunt config (see next step).
	# If config is missing:		# If config is missing:
	## Run '''grunt show-config:local --output grunt/local.conf.json'''		## Run '''grunt show-config:local --output grunt/local.conf.json'''