1. When creating a shoot under permissions (after a shoot is created you can do this under settings too) select the S3 bucket for client downloads checkbox.

2. From within the shoot click the file vault link.

3. Here you will see the bucket (folder) where you will place the high res images for the shoot.

4. Download the excellent Amazon S3 Firefox Organizer (here) as an add on for your firefox browser. Note: there are other ways to do this just google “Amazon S3 ftp”.

5. Once the plugin is installed on your browser you will need to put your account information in to make the connection.

6. Locate the folder for that shoot, open it and drop your files in the window. NOTE: I highly recommend zipping the files because this will force the images to download to your clients desktop (some browsers may be set to open tiff’s or raw’s and will open the images causing confusion).

7. When your client logs into their account they will see a link to download the file under file vault.

1. Create a page.

2. Name the page what you would like the log in box to say (e.g. client login or client area)

3. Put the following text on the page and nothing else

CLIENT LOGIN:

4. That’s it. See an example here:
http://robhaggart.com/#/Client%20Login/

Note: You must have the latest version of your APF design installed for this to work.

a, a:link, a:visited {
color:red;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

/*********************************************************/
/* Header elements
/*
/* The header is a 960 fluid container (#header) wrapped
/* by an outside container div (#header_container)
/*
/* The header also contains the logo/title in an H1 and
/* navigation in a UL (#nav)
/*
/*********************************************************/

/* The outer container div
**********************************************************/
#header_container {
border-top:5px solid #333;
}

/* The grid container for the header
**********************************************************/
#header {
height:75px;
margin-bottom:20px;
}

/* The site title H1 (text only applies when there’s no logo)
**********************************************************/
#header h1 {
line-height:75px;
color:#333;
font-family: Georgia, Times, serif;
font-weight: normal;
font-size:2.5em;
}
#header h1 a, #header h1 a:link {
color:#333;
text-decoration: none;
}
#header h1 a:hover {
text-decoration: underline;
}

/* Header nav
**********************************************************/
ul#nav {
float:right;
list-style-type: none;
font-size:11px;
font-weight:bold;
text-transform: uppercase;
}
ul#nav li {
display:inline;
list-style-type: none;
}
ul#nav li a {
color:#333;
text-decoration:none;
}

/* Create buttons (new client and new shoot)
**********************************************************/
ul#admin_create {
margin:0;
padding:0;
float:right;
list-style-type: none;
clear: right;
width:300px;
}
ul#admin_create li {
display:inline;
padding:0;
margin:0;
list-style-type: none;
}
ul#admin_create li a {
display:block;
float:right;
height:24px;
width:101px;
margin-left:20px;
text-indent: -9999px;
}
#new_client {
background: transparent url(../images/new-client.png) no-repeat scroll 0 0;
}
#new_shoot {
background: transparent url(../images/new-shoot.png) no-repeat scroll 0 0;
}

/*********************************************************/
/* Form elements
/*
/*********************************************************/

fieldset {
background:#eee;
width:400px;
border-bottom:3px solid #333;
padding-top:20px;
}

legend {
font-weight: bold;
padding-left:10px;
color:#333;
text-transform: uppercase;
}
fieldset p {
margin:0 0 10px 10px;
}
fieldset label {
color:#666;
}

input.file_field {
width:100px;
}

/*********************************************************/
/* Sidebar elements
/*
/*********************************************************/
#sidebar, #comments {
margin-top:20px;
}
#sidebar h3, #comments h3, #extra h3 {
color:#333;
font-size:100%;
margin:0 0 5px 0;
border-bottom:1px solid #eee;
}
#sidebar h3.h_link {
background: transparent url(../images/clear-folder-open-image.png) no-repeat top left;
line-height:16px;
padding-left:24px;
border-bottom:none;
margin-bottom:20px;
}
#sidebar h3.h_link a {
color:#356AA0;
}

/* Comment divs (displayed on sidebar per image)
**********************************************************/
div.comment {
background:#f3f3f3;
border:1px solid #ccc;
padding:5px 10px;
margin:10px 0;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.comment a, div.comment a:link, div.comment a:visited {
color:#333;
}
div.comment h4 {
font-weight:normal;
color:#999;
font-size:11px;
margin-bottom:5px;
}
div.comment div.comment_about {
color:#999;
font-size:11px;
margin:0;
text-align: right;
}

/* Legend (icon defs on sidebar)
**********************************************************/
ul#legend {
margin:0 0 20px 0;
padding:0;
list-style-type: none;
}
ul#legend li {
list-style-type: none;
padding-left:24px;
margin:0;
color:#999;
}
ul#legend li.comments {
background: transparent url(../images/balloon.png) no-repeat top left;
}
ul#legend li.star {
background: transparent url(../images/star.png) no-repeat top left;
}
ul#legend li.client {
background: transparent url(../images/user.png) no-repeat top left;
}
ul#legend li.delete {
background: transparent url(../images/cross-small.png) no-repeat top left;
}

/* Asset links (icons on sidebar for asset files)
**********************************************************/
ul#asset_list {
margin:0 0 20px 0;
padding:0;
list-style-type: none;
}
ul#asset_list li {
list-style-type: none;
padding-left:24px;
margin:0;
color:#999;
background: transparent url(../images/document.png) no-repeat top left;
}
ul#asset_list li.application_pdf {
background: transparent url(../images/document-pdf.png) no-repeat top left;
}
ul#asset_list li.image_png, ul#asset_list li.image_jpg, ul#asset_list li.image_jpeg, ul#asset_list li.image_gif, ul#asset_list li.image_tif, ul#asset_list li.image_tiff {
background: transparent url(../images/document-image.png) no-repeat top left;
}
ul#asset_list li.application_zip {
background: transparent url(../images/document-zipper.png) no-repeat top left;
}
ul#asset_list li.video_quicktime {
background: transparent url(../images/document-film.png) no-repeat top left;
}

/*********************************************************/
/* Main area elements
/*
/*********************************************************/

/* Headers #main
*********************************************************/
#main h2 {
font-weight: normal;
}
#main h3 {
color:#333;
font-weight:normal;
}
#main h4 {
color:#fff;
padding-left:10px;
font-size:100%;
background:#333;
line-height:24px;
}
#main h2 span, #main h3 span {
font-size:12px;
font-weight:normal;
margin-left:10px;
}
#main h2 a, #main h3 a {
color:red;
text-decoration: none;
}
#main div.dashboard h3 {
margin-bottom:10px;
}

/* Dashboard screen
*********************************************************/
#main div.dashboard, #main div.user {
border-bottom:1px solid #eee;
padding-top:20px;
}

/* User index screen
*********************************************************/
div.user ul {
list-style-type: none;
margin:0;
padding:0;
}
div.admin {
background:#F9F7ED;
}
div.user li {
list-style-type: none;
margin:0;
padding:0;
}
div.user li.delete {
margin-top:10px;
}
div.user li ul {
margin-left:20px;
}

/* Image icons above an image in image -> show
*********************************************************/
div.image_actions {
height:16px;
margin:0 0 10px 0;
}
div.image_actions ul {
margin:0;
padding:0;
list-style-type: none;
height:16px;
}
div.image_actions ul li {
display:inline;
margin:0 10px 0 0;
padding:0;
font-size:11px;
color:#aaa;
list-style-type: none;
}
div.image_actions ul li.delete {
margin-left:100px;
}

.selects_container {
margin-bottom:100px;
}
.selects_container p.clear {
clear:both;
color:#999;
}

div.square, div.square_approved {
background:#eee;
border:1px solid #ddd;
padding:5px 5px 0 5px;
margin:0 10px 10px 0;
float:left;
}
div.square_approved {
background:#CDEB8B;
}
div.image_inner_small {
min-height:200px;
}

ul#available {
margin-bottom:5px;
}
ul#available li {
margin:0 0 0 15px;
padding:0;
}

div.thumb_actions {
height:16px;
margin:2px 0;
}
div.thumb_actions ul {
margin:0;
padding:0;
list-style-type: none;
height:16px;
}
div.thumb_actions ul li {
display:inline;
margin:0;
padding:0;
font-size:11px;
color:#aaa;
list-style-type: none;
}
div.thumb_actions ul li.delete {
margin-left:20px;
}

#image {
clear:both;
}
#image img{
border: 1px solid #ccc;
background:#eee;
padding:5px;
}

ul#image_actions {
margin:10px 0 0 0;
padding:0;
list-style-type: none;
height:24px;
}
ul#image_actions li {
padding:0;
margin:0 10px 0 0;
display:block;
float:left;
}
ul#image_actions li a {
color:#999;
text-decoration: none;
line-height:24px;
}

span.tip {
color:#999;
font-size:11px;
}

#main div.comment_row {
margin-bottom:40px;
}
#main div.comment_row img {
padding:5px;
background:#eee;
border:1px solid #ccc;
}

/* Flash notices (green)
*************************************************/
div#notice {
background:#D0F9B3;
border-top:1px solid #88CB65;
border-bottom:1px solid #88CB65;
color:#88CB65;
padding:3px 6px;
margin-bottom:20px;

}

/*********************************************************/
/* Wizard displays used when admin/user first signs in
/*********************************************************/
div.wizard {
background:#F9F7ED;
border:5px solid #4096EE;
color:#aaa;
margin-bottom:40px;
}
div.wizard h2 {
text-align: center;
padding-top:20px;
}
div.wizard p, div.wizard ol {
font-size:125%;
padding:0 20px;
}

/*********************************************************/
/* Login box
/*********************************************************/
#login_box {
background:#eee;
border:5px solid #ccc;
padding:20px;
}
#login_box label {
font-weight:bold;

}
#login_box input.big {
font-size:130%;
}

/*********************************************************/
/* Footer styles
/*********************************************************/
#footer {
border-top:1px solid #eee;
color:#ccc;
margin-top:100px;
text-align:center;
}

In the Custom CSS box you can override any of the CSS settings for the site. If you click the “import colors from APF site” you will get some of the basic colors you are already using for your site.

Here are some of the basic settings you can adjust by grabbing and pasting the following:

To Adjust the background color for the site and the color of the headline text use this:
body{background:#e8d9b2;color:#1c2834;}

To adjust the color of the header background use this:
#header_container{background:#FFFFFF;}

To adjust the color of the business name (if not using a logo) use this:
#header h1, #header h1 a, #header h1 a:link, #header h1 a:visited {color:#1c2834;}

To adjust the color of the text links use this:
a, a:link, a:visited {
color:#777733;
text-decoration: none;
}

To adjust the color of linkable headlines use this:
#main h2 a, #main h3 a {
color:#777733;
text-decoration: none;
}

To adjust the color of basic text use this:
p {
color:#000000;
}

To adjust more colors visit the following link to find the existing settings, grab a snippet of CSS, paste into the box and change to your own settings.

http://aphotoclient.com/css-settings/