mailinabox/management/templates/mail-guide.html

<style>#panel_mail-guide table.table { width: auto; margin-left: 1.5em; }</style>

<div class="container">
	<h2>Checking and Sending Mail</h2>

	<p>You can use either webmail, IMAP/SMTP, or Exchange/ActiveSync to access your mail. Optionally you can store your contacts on this box too.</p>

	<hr>

	<div class="row">
		<div class="col-sm-6">
			<h4>How to log in</h4>

			<p>Your username and password are the same no matter how you check your mail:</p>

			<table class="table" style="max-width: 30em">
			<tr><th>Username:</th> <td>Your whole email address.</td></tr>
			<tr><th>Password:</th> <td>Your mail password.</td></tr>
			</table>
		</div>

		<div class="col-sm-6">
			<h4>Webmail</h4>

			<p>Your webmail site is <a href="https://{{hostname}}/mail">https://{{hostname}}/mail</a>.</p>

			<h4>Contacts</h4>

			<p>Edit your contacts at <a href="https://{{hostname}}/mail">https://{{hostname}}/cloud</a>.</p>
		</div>

	</div>

	<div class="row">
		<div class="col-sm-6">
			<h4>IMAP/SMTP settings</h4>

			<p>This method is preferred on Android devices and is not available on iOS devices.</p>

			<table class="table">
			<thead>
				<tr><th style="padding-bottom: 1em; border-bottom: none">Server:</th> <td colspan="2">{{hostname}}</td></tr>
				<tr><th>Protocol</th> <th>Port</th> <th>Options</th></tr>
			</thead>
			<tr><th>IMAP</th> <td>993</td> <td>SSL</td></tr>
			<tr><th>SMTP</th> <td>587</td> <td>STARTTLS</td></tr>
			</table>

			<p>In addition to setting up your email, you&rsquo;ll also need to install an app like <a href="https://play.google.com/store/apps/details?id=org.dmfs.carddav.sync">CardDAV-Sync free beta</a> to store your contacts on your box.</p>
		</div>

		<div class="col-sm-6">
			<h4>Exchange/ActiveSync settings</h4>

			<p>On iOS devices and devices on this <a href="http://z-push.org/compatibility/">compatibility list</a>, set up your mail as an Exchange or ActiveSync server:</p>

			<table class="table">
			<tr><th>Server</th> <td>{{hostname}}</td></tr>
			<tr><th>Options</th> <td>Secure Connection</td></tr>
			</table>

			<p>Your contacts should be automatically synced to this box when you use this method.</p>
		</div>
	</div>
</div>