AppSuite:Theming - Revision history

Khgras: Replaced content with "The content on this page has moved to https://documentation.open-xchange.com/latest/ui/theming.html Note: Open-Xchange is in the process of migrating all its technical do..."

2017-05-22T10:20:25Z

Replaced content with "The content on this page has moved to https://documentation.open-xchange.com/latest/ui/theming.html Note: Open-Xchange is in the process of migrating all its technical do..."

Show changes

Alexander.quast: /* Favicons and mobile homescreen icons */

2017-02-10T08:44:24Z

Favicons and mobile homescreen icons

← Older revision		Revision as of 08:44, 10 February 2017
Line 468:		Line 468:
	'''Note''': This chapter is not about changing AppSuite icons which are used in the application like the brand on the upper right.		'''Note''': This chapter is not about changing AppSuite icons which are used in the application like the brand on the upper right.

	'''This documentation applies for AppSuite v.7.4.2'''		'''This documentation applies for AppSuite from 7.4.2 up'''

	AppSuite ships with a standard set of icons containing a		AppSuite ships with a standard set of icons containing a
	# favicon		# favicon
	# set of touch icons which are mainly used by ~~mobile Safari on~~ iOS		# set of touch icons which are mainly used by iOS and Android devices

	These icons are used as default for all devices and browsers as long as you don't deliver your own icons with your theme. To provide your own icons, put them into your theme's directory, e.g. <tt>apps/themes/<var>theme-name</var>/favicon.ico</tt>.		These icons are used as default for all devices and browsers as long as you don't deliver your own icons with your theme. To provide your own icons, put them into your theme's directory, e.g. <tt>apps/themes/<var>theme-name</var>/favicon.ico</tt>.

Alexander.quast: /* Apple touch icons */

2017-02-10T08:43:10Z

Apple touch icons

← Older revision		Revision as of 08:43, 10 February 2017
Line 483:		Line 483:
	'''Attention:''' Safari and Internet Explorer do not support dynamic changes to the favicon for a webpage. This means, the default icon will be shown even if a custom favicon is provided within a custom theme. To enable the right favicon for a theme on Safari and IE, the overall standard <tt>favicon.ico</tt> located under <tt>apps/themes/icons/default</tt> on the web server must be replaced with a custom version.		'''Attention:''' Safari and Internet Explorer do not support dynamic changes to the favicon for a webpage. This means, the default icon will be shown even if a custom favicon is provided within a custom theme. To enable the right favicon for a theme on Safari and IE, the overall standard <tt>favicon.ico</tt> located under <tt>apps/themes/icons/default</tt> on the web server must be replaced with a custom version.

	=== Apple touch icons ===		=== Apple and Android touch icons ===
	iOS devices (iPhone/iPad/iPod) support so called "Webclips". Webclips are bookmarks to websites or webapps which provide a App Icon that is shown on the iOS homescreen. AppSuite offers full support for Webclips by providing all needed App icons~~, splashscreens and full screen support~~. If a user uses the "Add to homescreen" button on his iOS device, a Webclip is created, taking the right icon for his current device. Most devices need custom resolutions of the Webclip icon in the '''png''' format.		iOS devices (iPhone/iPad/iPod) support so called "Webclips". Webclips are bookmarks to websites or webapps which provide a App Icon that is shown on the iOS homescreen. Chrome on Android also support these homescreen bookmarks. AppSuite offers full support for Webclips by providing all needed App icons. If a user uses the "Add to homescreen" button on his iOS oder Android device, a Webclip is created, taking the right icon for his current device. Most devices need custom resolutions of the Webclip icon in the '''png''' format. In most cases modern devices will use the best resolution fitted for the current display resolution.

	* ~~iPhone 3:~~ 57 x 57 px		* 57 x 57 px
	* ~~iPhone 4 retina: 114x114~~ px		* 72 x 72 px
	* ~~iPhone iPhone 5 retina: 120~~ x ~~120~~ px		* 76 x 76 px
	* ~~iPad: 72~~ x 72 px		* 114 x 114 px
	* ~~iPad (iOS 7): 76~~ x ~~76px~~		* 120 x 120 px
	* ~~iPad retina:~~ 144 x 144 px		* 144 x 144 px (Android xxhdpi)
	* ~~iPad retina (iOS 7):~~ 152 x 152 px		* 152 x 152 px
			* 167 x 167 px
			* 180 x 180 px
			* 190 x 190 px (Android xxxhdpi)

	~~Furthermore a fullscreen Webclip App will show a splashscreen, a jpg file that is displayed on startup during app load~~. ~~There are currently three different resolutions as jpg files available~~. '''~~Note~~''': ~~Splashscreens must be JPG files~~		From version '''7.8.4''' on there will be '''no splashscreens''' anymore.

			For previous releases there are three splashscreen sizes supported:

	* iPhone: 320 x 460 px		* iPhone: 320 x 460 px
	* iPhone 4: 640 x 920 px		* iPhone 4: 640 x 920 px
	* iPhone 5: 640 x 1096 px		* iPhone 5: 640 x 1096 px

			All splashscreens must be JPG files.

	'''Note''': We do not provide splashscreens for iPad		'''Note''': We do not provide splashscreens for iPad

	This list may change ~~with Apple's iOS~~ updates. We recommend providing all of this resolutions when customizing the Webclip icons ~~and splashscreens, even if some iOS devices use the next best resolution for an icon if~~ a ~~certain file is missing~~.		This list may change due to vendor updates. We recommend providing all of this resolutions when customizing the Webclip icons. This can easily be done by using a simple Imagemagick script to convert all icons via batch operation.

	=== Providing custom icons ===		=== Providing custom icons ===

Alexander.quast: /* Mobile and retina screens */

2016-05-19T08:48:27Z

Mobile and retina screens

← Older revision		Revision as of 08:48, 19 May 2016
Line 376:		Line 376:
	Almost any mobile device and some newer desktop devices use retina screens. These screens do have a very high pixel density which offer very sharp text rendering. To offer sharp and correctly sized images on retina screens there is and additional CSS directive encapsulated in a media query which must be set in your custom theme.		Almost any mobile device and some newer desktop devices use retina screens. These screens do have a very high pixel density which offer very sharp text rendering. To offer sharp and correctly sized images on retina screens there is and additional CSS directive encapsulated in a media query which must be set in your custom theme.

	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),		@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-moz-min-device-pixel-ratio: 1.5),		only screen and (-moz-min-device-pixel-ratio: 1.5),
	only screen and (min-device-pixel-ratio: 1.5),		only screen and (min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 240dppx) {		only screen and (min-resolution: 240dppx) {
	#io-ox-top-logo-small {		#io-ox-top-logo-small {
	background-size: 60px 22px;		background-size: 60px 22px;
	background-image: url('apps/themes/default/logo-large.png');		background-image: url('apps/themes/default/logo-large.png');
	}		}
	}		}

	'''It is important that you provide your brand logo in two sizes''', the standard size of 60x22px and a large version with doubled pixel sizes of 120x44px. All retina devices will use the large logo and scale it down the CSS pixel size of 60x22px. This will result in a sharp image as the retina screen can make use of the additional available pixels in the source image.		'''It is important that you provide your brand logo in two sizes''', the standard size of 60x22px and a large version with doubled pixel sizes of 120x44px. All retina devices will use the large logo and scale it down the CSS pixel size of 60x22px. This will result in a sharp image as the retina screen can make use of the additional available pixels in the source image.

Alexander.quast: /* Mobile and retina screens */

2016-05-19T08:47:01Z

Mobile and retina screens

← Older revision		Revision as of 08:47, 19 May 2016
Line 381:		Line 381:
	only screen and (min-resolution: 240dppx) {		only screen and (min-resolution: 240dppx) {
	#io-ox-top-logo-small {		#io-ox-top-logo-small {
	~~// tell the browser to scale the image down, this will result~~
	~~// in a sharp image on retina screens~~
	background-size: 60px 22px;		background-size: 60px 22px;
	~~// important: "logo-large.png" is 120x44px~~
	background-image: url('apps/themes/default/logo-large.png');		background-image: url('apps/themes/default/logo-large.png');
	}		}
Line 391:		Line 388:
	'''It is important that you provide your brand logo in two sizes''', the standard size of 60x22px and a large version with doubled pixel sizes of 120x44px. All retina devices will use the large logo and scale it down the CSS pixel size of 60x22px. This will result in a sharp image as the retina screen can make use of the additional available pixels in the source image.		'''It is important that you provide your brand logo in two sizes''', the standard size of 60x22px and a large version with doubled pixel sizes of 120x44px. All retina devices will use the large logo and scale it down the CSS pixel size of 60x22px. This will result in a sharp image as the retina screen can make use of the additional available pixels in the source image.

	'''Important note''': Your logo must not be wider than 70px for mobile devices. Otherwise the toolbar will be broken on mobile devices as the large logo will cause a line wrap in the toolbar. If you need a larger logo use a custom, smaller one for mobiles.		'''Important note''': Your logo must not be wider than 70px (including margins) for mobile devices. Otherwise the toolbar will be broken on mobile devices as the large logo will cause a line wrap in the toolbar. If you need a larger logo use a custom, smaller one for mobiles.

	Always test your theme on mobiles, too. You can emulate popular screen sizes with the Google Chrome Dev-Tools.		Always test your theme on mobiles, too. You can emulate popular screen sizes with the Google Chrome Dev-Tools.

Alexander.quast: /* Replacing the logo */

2016-05-19T08:29:10Z

Replacing the logo

@@ Line 371: / Line 371: @@
+  }
 The file <code>mylogo.png</code> is expected to be in the same directory as <code>style.css</code>. Reference the entire path to the file, relative to the folder containing your ui, but without the leading slash. For example, the Core reference would be <code>apps/themes/default/logo-small.png</code>. If you want to place the image somewhere else, then use a relative path in <code>url()</code>.
 Remember that images in OX App Suite are served by the web server and not by the application server. This means that images need to be packaged separately (for dedicated web servers) and installed in <code>/var/www/appsuite/</code> (or similar, depending on the target platform) instead of <code>/opt/open-xchange/appsuite/</code>. Direct support for multiple packages is coming in version 7.4.1. Until then, use the build system from the <code>develop</code> branch to [[AppSuite:UI_build_system#init-packaging|initialize the packaging]] if your theme contains images.

J.ohny.b: /* Providing domain based login themes */

2015-06-01T13:56:47Z

Providing domain based login themes

← Older revision		Revision as of 13:56, 1 June 2015
Line 497:		Line 497:

	=== Providing domain based login themes ===		=== Providing domain based login themes ===

			This is only needed when using the default login screen shipped with the Core UI and for versions older than the 7.8.0 release. Since 7.8.0, the normal way via as-config.yml will work just fine ([[AppSuite:Theming the login page\|Learn how to do this here]]).

	If you have a multibrand installation and you want to deliver not only custom themes but also custom login-themes this can be done via Apache mod_rewrite. You can do so by a domain-based rewrite rule to deliver custom themes to a user based on the URI he's using. The needed config file <tt>.htaccess</tt> is located under <tt>apps/themes</tt>		If you have a multibrand installation and you want to deliver not only custom themes but also custom login-themes this can be done via Apache mod_rewrite. You can do so by a domain-based rewrite rule to deliver custom themes to a user based on the URI he's using. The needed config file <tt>.htaccess</tt> is located under <tt>apps/themes</tt>

Matt.curtis: /* Replacing the logo */

2015-03-11T17:06:25Z

Replacing the logo

← Older revision		Revision as of 17:06, 11 March 2015
Line 368:		Line 368:
	height: 22px;		height: 22px;
	margin: 8px 13px 0 13px;		margin: 8px 13px 0 13px;
	background-image: url(/path/to/mylogo.png);		background-image: url(path/to/mylogo.png);
	}		}
	The file <code>mylogo.png</code> is expected to be in the same directory as <code>style.css</code>. Reference the entire path to the file, relative to the folder containing your ui. For example, the Core reference would be <code>/apps/themes/default/logo-small.png</code>. If you want to place the image somewhere else, then use a relative path in <code>url()</code>.		The file <code>mylogo.png</code> is expected to be in the same directory as <code>style.css</code>. Reference the entire path to the file, relative to the folder containing your ui, but without the leading slash. For example, the Core reference would be <code>apps/themes/default/logo-small.png</code>. If you want to place the image somewhere else, then use a relative path in <code>url()</code>.

	Remember that images in OX App Suite are served by the web server and not by the application server. This means that images need to be packaged separately (for dedicated web servers) and installed in <code>/var/www/appsuite/</code> (or similar, depending on the target platform) instead of <code>/opt/open-xchange/appsuite/</code>. Direct support for multiple packages is coming in version 7.4.1. Until then, use the build system from the <code>develop</code> branch to [[AppSuite:UI_build_system#init-packaging\|initialize the packaging]] if your theme contains images.		Remember that images in OX App Suite are served by the web server and not by the application server. This means that images need to be packaged separately (for dedicated web servers) and installed in <code>/var/www/appsuite/</code> (or similar, depending on the target platform) instead of <code>/opt/open-xchange/appsuite/</code>. Direct support for multiple packages is coming in version 7.4.1. Until then, use the build system from the <code>develop</code> branch to [[AppSuite:UI_build_system#init-packaging\|initialize the packaging]] if your theme contains images.

Matt.curtis: /* Replacing the logo */

2015-03-11T16:14:14Z

Replacing the logo

← Older revision		Revision as of 16:14, 11 March 2015
Line 368:		Line 368:
	height: 22px;		height: 22px;
	margin: 8px 13px 0 13px;		margin: 8px 13px 0 13px;
	background-image: url(mylogo.png);		background-image: url(/path/to/mylogo.png);
	}		}
	The file <code>mylogo.png</code> is expected to be in the same directory as <code>style.css</code>. If you want to place the image somewhere else, then use a relative path in <code>url()</code>.		The file <code>mylogo.png</code> is expected to be in the same directory as <code>style.css</code>. Reference the entire path to the file, relative to the folder containing your ui. For example, the Core reference would be <code>/apps/themes/default/logo-small.png</code>. If you want to place the image somewhere else, then use a relative path in <code>url()</code>.

	Remember that images in OX App Suite are served by the web server and not by the application server. This means that images need to be packaged separately (for dedicated web servers) and installed in <code>/var/www/appsuite/</code> (or similar, depending on the target platform) instead of <code>/opt/open-xchange/appsuite/</code>. Direct support for multiple packages is coming in version 7.4.1. Until then, use the build system from the <code>develop</code> branch to [[AppSuite:UI_build_system#init-packaging\|initialize the packaging]] if your theme contains images.		Remember that images in OX App Suite are served by the web server and not by the application server. This means that images need to be packaged separately (for dedicated web servers) and installed in <code>/var/www/appsuite/</code> (or similar, depending on the target platform) instead of <code>/opt/open-xchange/appsuite/</code>. Direct support for multiple packages is coming in version 7.4.1. Until then, use the build system from the <code>develop</code> branch to [[AppSuite:UI_build_system#init-packaging\|initialize the packaging]] if your theme contains images.

Tierlieb at 14:14, 20 October 2014

2014-10-20T14:14:33Z

← Older revision		Revision as of 14:14, 20 October 2014
Line 526:		Line 526:
	[[Category:AppSuite]]		[[Category:AppSuite]]
	[[Category:UI]]		[[Category:UI]]
			[[Category:Custom development]]