Design 9 – Westwood

Design 9 | Westwood

Part of  what makes our Design 9 so exciting is that you can set the size of the picture box. No website in the world gives you this option. While APF is known for the dynamically resizing images that will size on the fly to fit in any browser window from a 13″ laptop to a 30″ cinema display we realize many of our users would like to cap the upper limit. This allows you to use smaller images for faster load times and also ensure they don’t suddenly break up on massive screens.

For 23″ to 30″ screens the ideal image size is 1860 x 1140 pixels for a spread (930 x 1140 for a single), (Note: if you want your images to fill the screen of a 30″ monitor set your image box size to 2500 x 1540 – but prep your images to 1860 x 1140) and this is our recommended size for all other APF designs (there’s no need to crop your images just match one of those numbers). If you choose to load images this big so they look great on big screens 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). Just remember you can load much smaller images if you want by just setting the image size in the template settings.

Use this aspect ratio calculator to scale your images (here).

I recommend and image size of 1200 x 800 pixels to take advantage of the unique feature in this design. This will give you a fairly large image but also a very quick loading speed. Make sure you save for web at a quality setting of 40%.

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 D9 – Westwood

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.
Image Height: Set the maximum image height here.
Image Width: Set the maximum image width here.
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.
Vertical Image Alignment: Determine the anchor point for your image scaling here (e.g. Top will cause the images to scale from the top down, Center will cause them to scale from the center, up and down).
Intro Scale Type: If you have a swf (flash) intro, use this to make it full screen.

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).
Page Margin Scale Type: Choose pixel based to pad (margin settings above) the pages by pixels, choose percentage based to pad the page text by percentage (margin numbers must be between 0 and 100 for percentage based).

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).
Accordion Galleries: Allows you to prevent your galleries from dropping down when a category is selected (false). This is a unique feature to D9 because galleries are represented by thumbs in the image area.
Gallery Index Thumb Size: Select the size of the thumb that will represent each of your galleries in the image area here.
Category Underline Transparency: Categories can have lines under them. Adjust the transparency to make them visible (zero is transparent).
Menu Letter Spacing: Use this to create more space between letters on your menu item text.

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.
Vimeo Width: Set the width of any embedded Vimeo videos.
Vimeo Height: Set the height of any embedded Vimeo videos.
User Scale Button: Set this to false to remove the the button that allows visitors to scale the videos to full.
Auto Advance: Set this to true and the next video will start playing automatically after each video finishes.
Thumbnail Icon Size: Video thumbs have a play button icon. Use this setting to make it large, medium, small or none.
Video Smoothing: Use this to turn off automatic video smoothing.

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.
Show Phone On The Contact Bar: Set to false if you want to prevent this information from appearing on the front of your site.
Show Email Address On The Contact Bar: Set to false if you want to prevent this information from appearing on the front of your site. Note: Very useful if you are using a contact form (email required for this) but don’t want your personal email to appear on the site.
Show Copyright On The Contact Bar: Set to false if you want to prevent this information from appearing on the front of your site.

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.
Persistent Captions: Forces captions on when someone visits your site.

Loader Properties

Loader Type: Choose between 4 different image loading indicators. Spinner, Percent, Vertical Line, Horizontal Line and None.
Loader Anchor Point: Determine where the loader sits on the page.
Loader Horizontal Offset: Move the loader position from the anchor point horizontally.
Loader Vertical Offset: Move the loader position from the anchor point vertically.
Loader Font: Chose where the font is pulled from for the Percent loader.
Loader Font Size: Chose the font size for the Percent loader.
Loader Thickness: Chose the line thickness for the line loaders.
Loader Transparency: Chose the transparency for the loader.
Loader Blend Mode: Determine how the loader blends with the background. To learn more about the different blend properties go (here).
Align Loader To Image: When set to true the loader will center on the image. When set to false it will center on the whole site (menu included).

Caption Properties

NOTE: These are new settings. If your site was installed before May 15, 2011 you will need to request an upgrade to use them.
Persistent Captions: Set to true if you want the captions to be always on.
Anchor Point: Determine where the captions are anchored on the page.
Caption Width: Set the width of the caption box.
Horizontal Offset: Move the caption horizontally from the anchor point.
Vertical Offset: Move the caption vertically from the anchor point.
Map Font To: Determine which font to use for the captions.
Font Size: Set the font size for the captions.
Caption Text Alignment: Change the justification for the caption text here.
Background Radius: Use this number to create rounded corners or not.
Background Transparency: Set the transparency for the background of the caption box (100 is solid).
Blend Mode: Determine how the loader blends with the background. To learn more about the different blend properties go (here).
Blank Box: This box allows you to transfer settings so that individual captions can behave differently. See the Image Captions page for more information (here).

navbar-site-settings

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.

If you need additional help submit a support ticket.