NOTE: To get your navbar and contact info to show you will need to enter a negative number for the vertical offset on both.
This full screen effect is not possible on design 5 because you must have a border for the image box to live within.

To further compound this issue there is a known problem with the version of flash we are using where any color profile tags are stripped from the image before they are delivered to the browser. If you are using a calibrated monitor and a browser that supports color profiles you will likely see a shift and flattening of the colors when viewing the same image on your desktop next to an image on your site viewed in the browser.

You can read this thread on Luminous Landscape that sheds a little light on the situation:

Here’s what I think is going on.

The example image on your computer is in sRGB, and it is TAGGED. Firefox 3.5.2, and Safari, are color managed browsers that recognize the tag–and just like Photoshop, they display it correctly on any monitor.

That same example image in sRGB was stripped of its tag when it was uploaded to the web, so it is now UNTAGGED. The Windows operating system assumes untagged images are in sRGB space, so they display correctly in a color managed browser. But the Mac operating system assumes untagged images are in your monitor’s color space, and assigns your monitor’s profile–in the case of your calibrated wide-gamut monitor, close to Adobe RGB 1998. The browser displays them as if you had (incorrectly) assigned an aRGB tag.

You can test this by opening your example image in PS, then saving a JPEG version in which you uncheck the box beside “ICC profile: sRGB…”, so that the tag is stripped. Now drag that untagged image onto your Firefox or Safari icon; it will probably look the same as the version on your web site: oversaturated.

If this is indeed the case, there seems currently to be no solution. Images that are in sRGB but are untagged will display incorrectly on wide gamut monitors under the Mac operating system. You can make sure that images on your own web site look OK by always keeping them tagged. But you can’t control what others do, and most web images are untagged, so they won’t look right in your browser on your monitor.
« Last Edit: September 10, 2009, 01:50:21 AM by Arlen »
Arlen Thomason
Author and photographer “BugWater”

What are we doing about this?
At the beginning of the year we undertook the massive project of rebuilding all our websites in Action Script 3 (i.e Flash). One of the benefits of using AS3 is the color profiles will be passed to the browser. There are numerous other benefits that we’re excited about and can’t wait to reveal to all our users. The rebuilding project will be finished at the end of the year and we will begin offering it to everyone at that time.

How do I log into my iPad admin?

The login location for the iPad version of your site is located here:

http://yourdomain.aphotopad.com/dashboard (switch out yourdomain with yes, Your Domain, only leave off the .com, .net or .whatever). Login using your APF admin login.

For example: my website is http://www.robhaggart.com so my login for the iPad is http://robhaggart.aphotopad.com/dashboard

How do I change the colors?

Once logged into the iPad admin you will see this:

Select colors to change specific colors (Note: handy hex color chart can be found here)

For advanced users who want to enter custom css click here to see the style sheet for the iPad site.

Or if you select styles you can add a pre-designed white style (black is the default)

How can I change the contact page information?

Once inside the admin select settings:

To override the email and phone that is being pulled directly from your APF site simply enter a new email and phone. You can also add a blog, facebook and twitter button to the contact page when you enter values in for these. Here’s what it looks like:

/* Gallery and thumb styles */
#loading {
z-index: 1500;
position:absolute;
width:220px;
height:19px;
background: transparent url(../images/loading.gif) no-repeat top left;
}
#thumbs {
background:#000;
overflow: hidden;
padding-top:5px;
}
#thumbs_inner {
position:absolute;
width:20000px;
}
#thumbs_inner img {
display:block;
float: left;
margin-right:10px;
vertical-align:middle;
}
#thumbs_inner img.active {
-webkit-box-shadow:0px 0px 10px yellow;
opacity:0.5;
}

/* Styles for Page Menu */
#page_menu {
z-index: 400;
}
#portfolio_menu {
z-index: 500;
}
#video_menu {
z-index: 600;
}
div.menu {
position:absolute;
left:50px;
top:50px;
width:333px;
background:transparent url(../images/menu-bottom.png) no-repeat bottom left;
padding-bottom:55px;
}
div.menu h2 {
background:transparent url(../images/menu-header.png) no-repeat top left;
height:52px;
color:#fff;
margin:0;
padding-top:18px;
line-height:46px;
text-align: center;
text-shadow: #000 0px -1px 0px;
}
div.menu ul {
width:333px;
margin:0;
padding:0;
background:transparent url(../images/menu-bg.png) repeat-y top left;
list-style-type: none;
}
div.menu li, div.menu li li{
margin:0;
padding:0;
list-style-type: none;
}
div.menu li a {
color:#111;
text-decoration: none;
font-weight:bold;
display:block;
height:36px;
line-height:36px;
padding-left:20px;
}
div.menu li li a {
padding-left:36px;
height:32px;
line-height:32px;
background:transparent url(../images/gallery_arrow.png) no-repeat 16px 8px;
color:#666;
}

/* Styles for Contact Page */
div#contact {
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
width:500px;
height:250px;
padding-bottom:40px;
}
div#contact_top {
height:40px;
border-bottom:1px solid #222;
}
div#contact_top h2 {
margin:0;
line-height:40px;
padding-left:10px;
color:#999;
font-weight:bold;
letter-spacing: 1px;
text-shadow: #000 0px -1px 0px;
}
div#contact_left {
width:250px;
float:left;
border-top:1px solid #666;
}
div#contact_extra {
width:200px;
margin:0 0 0 10px;
color:#666;
}
div#contact_left ul {
margin:0;
padding:20px 0 0 10px;
list-style-type: none;
}
div#contact_left li {
margin:0 0 10px 0;
list-style-type: none;
padding:0;
height:16px;
line-height:16px;
}
div#contact_left li a {
padding-left:24px;
text-decoration: none;
display:block;
height:16px;
color:#fff;
}
div#contact_left li.email a {
background: transparent url(../images/Email_16×16.png) no-repeat top left;
}
div#contact_left li.phone a {
background: transparent url(../images/Phone_16×16.png) no-repeat top left;
}

div#contact_right {
width:250px;
float:left;
border-top:1px solid #666;
}
div#contact_right ul {
margin:0;
padding:20px 0 0 10px;
list-style-type: none;
}
div#contact_right li {
margin:0 0 10px 0;
list-style-type: none;
padding:0;
height:32px;
line-height:32px;
}
div#contact_right li a {
padding-left:40px;
text-decoration: none;
display:block;
height:32px;
color:#999;
font-weight: bold;
}
div#contact_right li.twitter a {
background: transparent url(../images/twitter-32×32.png) no-repeat top left;
}
div#contact_right li.blog a {
background: transparent url(../images/rss-32×32.png) no-repeat top left;
}
div#contact_right li.facebook a {
background: transparent url(../images/facebook-32×32.png) no-repeat top left;
}

/* Page style */
#page {
color:#fff;
}
#page a {
color:#eee;
}
#page h2.title {
color:#666;
letter-spacing:1px;
font-weight:normal;
margin:50px 25px 0 25px;
font-size: 2em;
}
#page_body {
font-size:1.2em;
margin:25px 25px 0 25px;
}
#sub_pages {
margin:0 25px;
}
#sub_pages ul, #sub_pages li {
margin:0;
padding:0;
list-style-type: none;
}
#sub_pages ul {
height:25px;
}
#sub_pages li {
float:left;
margin-right:10px;
}
#sub_pages li a {
display:block;
background:#999;
padding:0 8px;
text-decoration: none;
-webkit-border-radius:5px;
color:#444;
text-shadow: #aaa 0px 1px 0px;
font-weight:bold;
line-height:25px;
}

body{font:13px/1.5 ‘Helvetica Neue’,Arial,’Liberation Sans’,FreeSans,sans-serif}
a:focus{outline:1px dotted invert}
hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0}
h1{font-size:25px}
h2{font-size:23px}
h3{font-size:21px}
h4{font-size:19px}
h5{font-size:17px}
h6{font-size:15px}
ol{list-style:decimal}
ul{list-style:disc}
li{margin-left:30px}
p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:20px}

REDIRECT:http://domain.com (opens the link in a new window)
new:http://domain.com (opens the link in a new window)

self:http://domain.com (opens the link in the same window)
same:http://domain.com (opens the link in the same window)

Put them as the only text on a page.

For the gallery redirects you can use these commands as well or simply enter the url to have it open in another page.

Your ideal image size is 1860 x 1140 pixels for a spread (930 x 1140 for a single), but there’s no need to crop your images just match one of those numbers (This is the size of a 23-inch Apple Cinema HD Display minus 60 pixels for a site border). The site uses dynamic resizing so you can load any size image you want, just make sure you save for web in photoshop (quality of 40% seems to be nice), because large files take a long time to load and will bum out your clients (oh, and then everyone will start talkin’ about how slow the APF sites are).

Important note about naming: Your image names cannot have spaces or characters like this: å, é, ü, ö or symbols except dash and underscore.

THIS IS VERY IMPORTANT: You have the ability to load huge images on your site. Please make a conscious decision about this and realize that the bigger the image the slower it will load. Anything over 300-350kb is big and we strongly recommended using save for web at a quality of 40% and a width of no more than 1860 pixels. It’s your call so decide what’s best for you.

If you add a logo start with 320 x 74 pixels (or around that). Use a photoshop png file and knockout the background if you want only the logo to show up.

If you want to add pictures to text pages start with 300 x 215 pixels (or around that).

Your website comes with a slideshow on the landing page (after the intro but before someone clicks on a menu item). To activate simply load images in the extra files folder under the advanced tab (you can also use FTP to do this. Put them in httpdocs–>extra and make sure you save for web in photoshop so they’re not huge (100-350 kb max)). Make sure to name them 01, 02, 03… to force a display order. Speed of the show can be adjusted in the template settings.

There are two settings for the slideshow that can be found in the template settings. Normal will give you a slideshow that fits within the picture box and full will give you a slideshow that fills the browser window.

You can also have a single image or logo display instead by loading a background image. Note: The sideshow only works when the background image is unselected.

Template Settings For the new D7 - Midtown

NEW - Watch a video talking about all new template settings.
NEW- Check out this template settings map and download the pdf.

Logo Properties

Horizontal Offset: Set the horizontal position of your logo.
Vertical Offset: Set the vertical position of your logo.
Logo Font Size (main): The font size of the logo on your homepage.
Letter Spacing: Determine the spacing between letters if you are using a text logo.
Transparency: 100 is solid and 0 is transparent. This effects the logo on the homepage.
Drop Shadow: Add a drop shadow to a logo if you like.
Blend Mode: The logo allows certain blend properties to occur between it and the image below. To learn more about the different blend properties go (here).
Logo Alignment: You can elect to anchor the logo on the top left, center or right of the page.
Logo Font Size (intro): The font size of the logo on the intro.

Image Properties

Top Margin: Set the space between the top of the window and the image.
Right Margin: Set the space between the right of the window and the image.
Bottom Margin: Set the space between the bottom of the window and the image.
Left Margin: Set the space between the left of the window and the image.
Scale Type: If you set the scale to full the image will always fill the image space. This means cropping in most cases. If you set the scale to normal the image will not crop and any extra space will show the background color.
Image Transition: Select a transition type for advancing the image.
Transition Duration: Set a duration for how fast the transition takes place.
Cursor Blend Mode: The cursor navigation allows certain blend properties to occur between it and the image below. To learn more about the different blend properties go (here).
Cursor Icon Style: Choose between 4 different styles for the mouse navigation indicators.

Page Properties

Top Margin: Set the top margin for page text.
Right Margin: Set the right margin for page text.
Bottom Margin: Set the bottom margin for page text.
Left Margin: Set the left margin for page text.
Page Text Font Size: Set the font size for page text here.
Show Page Titles: Pages have titles on them that match the name on the menu. You can turn this off here.
Page Title Font Size: Set the font size for page titles.
Scrollbar Alignment: When you have more text than will fit on the page a scrollbar appears. You can have it appear on the left or the right of the text.
Scrollbar Horizontal Offset: Adjust the positioning of the scrollbar here.
Scrollbar Vertical Offset: Adjust the vertical position of the scrollbar here.
Scrollbar Width: Set the width of the scrollbar.
Scrollbar Transparency: Set the transparency for the scrollbar here (100 is solid).

Menu Properties

Menu Font Size: Font size for the menu items (categories).
Sub Menu Font Size: Font size for the sub menu items (galleries).
Menu Background Transparency: Set the transparency for the menu color (0 is transparent 100 is solid).
Menu Width: Set the width for the menu. Note: allow enough space for the category, gallery and page names.
Vertical Menu Text Alignment: Allows you to anchor the menu items on the Top, Middle or Bottom of menu bar.
Horizontal Menu Text Alignment: Allows you to justify the menu text Left, Center or Right.
Vertical Menu Text Padding: Allows you to add space to the top of the menu to move the text down.
Horizontal Menu Text Padding: Allows you to add space to the left of the menu to move the text right.
Menu Item Bullet Type: There are several types of bullets available to help people know where they are in the menu.
Vertical Bullet Offset: You can adjust the alignment of the bullet here. Different fonts cause the bullet to misalign.
Category Menu Item Gap: Adjust the gap between categories here.
Gallery Menu Item Gap: Adjust the gap between the galleries here.
Leading Gallery Menu Item Spacer: Adjust the gap between the Category and the first gallery that appears under it (if you have galleries dropping down).
Trailing Gallery Menu Item Spacer: Adjust the gap between the last gallery under a category and the next item on the menu (if you have galleries dropping down).
Horizontal Menu Offset: You can move the menu closer or further away from the images.
Gallery Indent: When the galleries drop down under the category you can have them indent by adjusting this setting.
Category Config: Allows you to place video categories/galleries above image categories/galleries on the menu (select videos-images to do this).

Thumbnail Properties

Show Thumbnails: You can elect to not have thumbnails show.
Show Thumbnail Cursor: You can elect to not have the thumbnail button on the cursor (when in the center of an image) show.
Thumbnail Background Transparency: You can have the background image show (0) or you can make the background solid (100) when the thumbs are selected.
Show All Thumbnail Galleries: You can choose to have all the thumbnails for the entire site show when thumbs are selected by selecting true.
Thumb Background Lines Transparency: Set the visibility for background lines. 100 is solid and 0 is transparent.
Thumb Size: Choose between small, medium and large thumbs.
Thumb Label Font Size: Set the font size for the gallery labels on the thumbs.
Map Thumb Label Font To: Set the font for the thumb labels (navigation means you inherit the navigation font).
Thumb Label Separator: Thumb labels will have a category name then gallery name this will separate the two.
Thumb Grid Left/Right Margin: Set the margin for the left and right sides of the thumbnail grid.
Thumb Grid Leading/Trailing Margin: Set the margin between top and bottom of each gallery grid.
Thumb To Thumb Gap: Set the gap between thumbs.
Thumb Backer Transparency: Set the transparency for the backing on the thumb.
Thumb Scroll Method: You can choose between mouse wheel scrolling and mouse (cursor) scrubbing (back and forth movement of the mouse) for scrolling the thumbs.
Thumb Captions: When set to true allows image captions to display on the thumbnails when hovering over them with the mouse.

Slideshow Properties

Slideshow Scale Type: If you select full images will bleed to the edge of the browser window (this will crop them to fit the window as well).
Slideshow Speed: Set the speed that the images change on the homepage slideshow. Note: Speed is limited by they load time of the image.
Randomize Slideshow: If set to true, when a client visits your site they will see a different image each time.

Video Properties

Auto Play: If set to true videos will play automatically when a client visits the video gallery.
Video Fullscreen: If set to true videos will start fullscreen otherwise videos will play normal size.

Contact Properties

Contact Page Name: If you use the contact form this is where you set the name. Note: If you are NOT using the contact form make sure you give it a different name than the page you have your contact information on (e.g. contact and contact form).
Bottom Contact Font Size: Set the font size for your contact information.
Bottom Contact Offset: Set the vertical position on the page of the contact information.
Contact Page Font Size: Set the font size for the information on the contact form if you are using one.
Bottom Contact Horizontal Offset: The bottom contact info is anchored to the edge of the image. You can move it further our or in with this setting.

Fullscreen Button

Fullscreen Button Icon Type: Fullscreen button can be indicated on the site with an icon, label or both.
Fullscreen Button Label: Type the label you want for fullscreen.
Fullscreen Tooltip: Type the information you want to appear when someone hovers over the fullscreen button with their mouse.
Normal Button Label: When in fullscreen mode this is the label people click to return to normal mode.
Normal Tooltip: Enter the information you want to appear when someone hovers over the normal button with their mouse (while in fullscreen mode).

Navbar Properties

Map Navbar Font To: Determine what font the nabar uses.
Navbar Font Size: Set the size of the navbar font.
Horizontal Navbar Offset: Set the horizontal position of the navbar.
Vertical Navbar Offset: Set the vertical position of the navbar.
Navbar Gap: You can set the gap between navbar items here.
Horizontal Navbar Icon Offset: Adjust the horizontal position of the navbar icon (some fonts cause the icon to not be lined up)
Vertical Navbar Icon Offset: Adjust the vertical position of the navbar icon.
Horizontal Navbar Anchor: The navbar can be anchored to the left of the image or the center.
Daisy Chain Galleries: False - When a viewer reaches the last picture in a gallery and then hits the next button it takes them to the beginning of the gallery. True- When a viewer reaches the last picture in a gallery and then hits the next button it takes them into the next gallery on your menu.

Navbar Site Settings

Button Type: Choose what type of button you want. Note: you can drag and drop the buttons to reorder.
Button Label: Write some text for a button label to appear on the site.
Icon Type: Choose wether you want just an icon, just a label (using text above) or both.
Tooltip Label: If tooltip is on in template settings write the text that will appear when someone hovers their mouse over the button.

Click here to see how to add social networking icons to your menu

If you enter your text on a page like this:

Print and Assignment:
seamusmurphy3@easynet.co.uk

Editorial Sales:
VII New York

VII Photo Agency
28 Jay Street
Brooklyn, NY 11201
USA
+1.212.337.3130 (office)

Alina Grosman
Alina@viiphoto.com
M: 646-496-2052

VII Paris
VII Photo Agency
36, rue des Jeûneurs
75002 Paris
France
Phone: +33.1.40.13.95.61

Nick Papadopoulos
nick@viiphoto.com
Mobile: +33.6.7401.3800

Dominique Viger
dominique@viiphoto.com
Mobile: +33.6.03.61.42.11

It will look like this:

Instead you need to use the <br /> html tag to create line breaks and where there is a space just do a single return. Your text will look like this:

Print and Assignment:<br /><u><a href=”mailto:seamusmurphy3@easynet.co.uk”>seamusmurphy3@easynet.co.uk</a></u>
Editorial Sales:<br />VII New York
VII Photo Agency<br />28 Jay Street<br />Brooklyn, NY 11201<br />USA<br />+1.212.337.3130 (office)
Alina Grosman<br />Alina@viiphoto.com<br />M: 646-496-2052
VII Paris<br />VII Photo Agency<br />36, rue des Jeûneurs<br />75002 Paris<br />France<br />Phone: +33.1.40.13.95.61
Nick Papadopoulos<br />nick@viiphoto.com<br />Mobile: +33.6.7401.3800
Dominique Viger<br />dominique@viiphoto.com<br />Mobile: +33.6.03.61.42.11

And your page will look like this: