PDF Portfolio Layouts, Themes and Tools

This page contains links to PDF Portfolio Layouts, Themes and Tools that I’ve created. Everything here is free so please browse and enjoy.

Note: Check out this post before going further; not everything below has been updated yet.

Jump to Tools

PDF Potfolio Layouts

All of my PDF Portfolio Layouts have a set of common features that either extend or replace functionality found in the default Acrobat layouts. Please see the Common Features section for documentation and Installation Instructions.

CoolList 2.0.1
Grid with Preview
TreeView 1.0.2
Tree with Preview 1.0.0

Layout with background images come in two varieties, the full layout and a lighter version. The full version contains fully licensed background images that I’ve selected to compliment the theme. Because of limitations in the PDF Portfolio architecture, these images travel with the portfolio whether you use them or not and they do add a considerable amount of weight to the file size; the Portfolio Framework itself is 1.1 MB. For this reason, I’ve also create a version of each of these layouts without these backgrounds. Download the “lite” version if you plan on adding your own backgrounds.

The CoolList Layout 2.0.1:

The CoolList Layout is the first of my second generation layouts. It provides both a file preview and vertical list of files in the current folder. It was inspired by the media browser interface in one of my favorite devices. It makes very clean, professional looking Portfolios that are easy to navigate. Folders appear with a small arrow to the right, when clicked, you go into the folder. CoolList also has a lot more configurable properties that allow you to control the file preview rotation, colors, and a bunch of controls over card placement, size, and metadata inclusion. Look for the “Custom Components” panel on the left while in edit mode.

CoolList does not have any embedded background files so it doesn’t need to have a “Lite” version.

Download a .ZIP containing an example file and the CoolList 2.0.1 layout file. [5.6MB]

The Scrapbook Layout:

The Scrapbook Layout builds on the default Acrobat Freeform Layout. The Scrapbook Layout was designed primarily for photographers and hobbyists to share their images; the themes associated with it are not going to look very good with typical PDF documents. The “Instant Film” theme is reminiscent of old Polaroids. This theme works best if you have square images; if you don’t, use the Scrapbook Corners theme.

The Scrapbook Corners Theme adds a thin white border and photo corners to your images making them look like they’re scattered on a page of handmade paper in a scrapbook.

Download a .ZIP containing an example file and the Scrapbook layout files. [20.8MB]

The UpSlide Layout:

The UpSlide Layout is a variation on the default Acrobat “Click-Through” layout except that the files move vertically. I’ve also modified the header and added a footer area. The header and footer are left aligned and allow you to add an image or text above and below the navigation buttons and summary field. The header, footer and navigation button areas are 500 pixels wide and are pinned to the left edge of the Portfolio window. The header and footer are 200 and 300 pixels high, respectively. The navigation button area height will vary based on your screen size.

The UpSlide Layout has the same three themes as the Scrapbook Layout and adds the “Glass” theme which is the default. Glass is a very minimal theme and is inspired by a certain device that I keep next to me on the couch while I’m watching TV… love that IMDB app.

Download a .ZIP containing an example file and the UpSlide layout files. [9.1MB]

Grid with File Preview:

The Grid with File Preview Layout is reminiscent of the Acrobat 9 layout of the same name. It’s extremely basic. There’s a list of files and folders on the left and a preview of the file on the right. There is no Welcome Screen for this particular layout because it would be limited to the area on the left. There also aren’t any themes… I did mention it was very basic… right?

Download a .ZIP containing an example file and the Grid with File Preview layout file. [5.5MB]

TreeView 1.0.2:

The TreeView Layout is also similar to an Acrobat 9 layout. It’s also extremely basic. There’s a list of files and folders organized into a tree structure on the left and a file preview on the right. THe splitter bar between the two areas is adjustable and you can use the properties panel to define what metadata is presented on the “card” as well as control the font size in the tree.

Tree View

Download a .ZIP containing an example file and the TreeView 1.0.2 layout file. [5.4MB]

Tree with Preview 1.0.0:

If you’re looking for a really simple way to navigate a lot of files in a PDF Portfolio and don’t need all the bells and whistles of the default layouts, check out “Tree with Preview”. I’ve removed everything except the most basic file navigation features making the preview window as large as possible and highly responsive.

Because only PDF files can be displayed in the Preview window, you probably don’t want to use this one for source files. I also set this one up so that folders can’t be selected. If you click on a folder the first child file of the folder will be displayed. If, like the sample file, the first item in the Portfolio is a folder, the first child PDF file will be shown.

You can use the Custom Components panel to set the size of the text in the list and the Color Pallet panel to control the text color. In this layout, the “Text” color is the color of all the items in the list. The “Accent” color is used for the selected item.

Download a .ZIP containing an example file and the Tree with Preview 1.0.0 layout file. [5.4MB]

Common Features

Welcome Screen

The Welcome Screen gives you a way to introduce the content of your PDF Portfolio to your audience. This was one of the more popular features of Portfolios in Acrobat 9 that didn’t make it into the default layouts of Acrobat X. Luckily, the Welcome Screen did make it into the Acrobat X Portfolio SDK and I’ve made use of it in my custom layouts.

The Welcome Screen Displayed

The Welcome Screen Displayed

The Welcome Screen dims the underlying Portfolio and provides a canvas that you can add images, text and SWF files to if you want a little animation. After dismissing the Welcome Screen, you can get it back by moving your mouse towards the top of the window.

Show Welcome Screen Again

Show Welcome Screen Again

To edit the Welcome Screen, begin editing the Portfolio with the Welcome Screen visible or make it visible while in Edit mode. Click anywhere on the Welcome Screen canvas. A “Welcome Properties” box will appear on the right. From here you can add elements to the canvas and change the colors and gradients associated with the Welcome Screen.

Welcome Screen in Edit Mode

Welcome Screen in Edit Mode

Note: You must save the PDF Portfolio while the Welcome Screen is visible to save any changes to the Welcome Screen.

Folder Color

I’ve added a custom folder icon and hooked the color to a Portfolio property. With this custom folder, you can colorize it to match your branding or the rest of the Portfolio. Simply pick a color from the “Folder Color” panel on the right while in Edit mode, the gradients will be calculated automatically. The default is a nice, classic, manila.

Deep Folder Navigation

Deep folder navigation means folder contents display in the same layout as the root rather than the grid view as they do in the Adobe defaults; the behavior is similar to the behavior of Acrobat 9. A folder path bar will appear near the top of the Portfolio or just under the header if there is one. You can then navigate the folder hierarchy.

Installation Instructions

The easiest way to install new Portfolio Layout is via the “Create PDF Portfolio” dialog. Select File -> Create -> PDF Portfolio… then click Import Custom Layout.

Navigate to the custom layout on your computer and open it. Layout files have a .nav extension. The layout appears in the Portfolio Layouts list where you can select it.

Imported layouts are permanently added to the Custom Layouts section of the Portfolio Layouts panel. To delete a custom layout, click the X next to the layout name.

Other Portfolio Layouts

Here are some links to other PDF Portfolio Layouts that I’ve created.

The “Horizon” PDF Portfolio Layout

The “ZoomIn” PDF Portfolio Layout


Practical:PDF Portfolio Utilities

The Practical:PDF Portfolio Utilities are a set of tools, written in Acrobat JavaScript, for working with PDF Portfolios. There are 4 tools and are described below.

Copy PDF Document Properties to Portfolio Fields:
This utility will examine all of the PDF files in the Portfolio and copy it’s Document Properties to a Portfolio metadata field, creating new fields as necessary.

Generate Portfolio Metadata Report:
Selecting “Generate Portfolio Metadata Report” will create a new PDF file that lists the item metadata in an eMail Archive or PDF Portfolio. You can customize the page size, font size, and column widths of the report. It will even create a tab delimited ASCII file and attach it to the report so you can bring the data into Excel or your spreadsheet of choice.

Open a Portfolio and hide/show the metadata fields that you want to appear in the report by putting the Portfolio into “Files” mode unless you are working with an eMail archive Portfolio in which case you’re basically already there.

Right-click on any of the metadata column headings then select “View”. Check or uncheck any of the fields shown. Checked fields will appear in the report.

From the Acrobat menu, Select View -> Portfolio -> Cover Sheet. The script needs to run against the Portfolio, instead of any of the individual files within it. This is the simplest way to make the Portfolio the active document. You’ll know you’re in the right mode when you see the Portfolio Cover Sheet.

To run the report, select Edit -> Practical:PDF Portfolio Utilities -> Generate Portfolio Metadata Report. You should see a small dialog box pop up.
The page size is measured in points (72/inch) and is set to 11 x 8.5, landscape, but you can modify it and the font size via the options in the dialog box.

Initially, the column widths are evenly divided (roughly) across the page but you can, for example, provide a larger percentage for the “Subject” field vs. the “Size” field. The dialog will check your math but won’t fix it for you. The OK button will be disabled until you’ve provided a set of percentages that equals exactly 100.

Click OK to run the report.

You should end up with a document that is one or more pages full of the Portfolio metadata. In addition, a tab delimited file has been generated and added to the report. This is the raw data which you should be able to open in Excel.

Show Total Number of PDF Pages:
Does what is says. A dialog box will open that tells you the total number of pages in the total number of PDF files in the Portfolio. It can’t count pages in source files.

Set Initial View to Details:
This will set the Portfolio to open in “Files” mode rather than display the Portfolio layout. It will also set the Layout view to use the Click-Through Layout so don’t use it if you want the full Portfolio experience.


Begin by downloading a .zip file of the utilities and decompress it onto your desktop. You should see a file named “PracticalPDF_PortfolioUtilities_v2.1.js”. Keep this file handy. After installation, you should see a new menu under “Edit” called “Practical:PDF Portfolio Utilities”

Download the Practical:PDF Portfolio Utilities

Windows Installation:

  1. Enter “%appdata%” in the file Explorer window path bar and press enter. Depending on the version of Windows you are using, you’ll end up in a different folder but in all cases you should see an “Adobe” folder in the location that just opened.
  2. Open the “Adobe” folder. You should see an “Acrobat” folder within the “Adobe” folder.
  3. Open the “Acrobat” folder.

Acrobat 9.x

  1. You should see a “9.0” folder within the “Acrobat” folder.
  2. Open the “9.0” folder.
  3. If you see a “JavaScripts” folder, open it. If not, create it.
  4. Move “PracticalPDF_PortfolioUtilities_v2.1.js” to the “JavaScripts” folder.
  5. Restart Acrobat if it’s running.

Acrobat X and XI

  1. If not already present, create a new folder called “Privileged” within the “Acrobat” folder.
  2. Open the “Privileged” folder.
  3. If not already present and depending on your version, create a folder named either “10.0” or “11.0”. In the remaining instructions, I’ll refer to this as the “version number folder”
  4. Open the version number folder.
  5. If not already present, create a new folder called “JavaScripts” within the version number folder.
  6. Open the “JavaScripts” folder.
  7. Move “PracticalPDF_PortfolioUtilities_v2.1.js” to the “JavaScripts” folder.
  8. Restart Acrobat if it’s running.

Mac Installation:

  1. Find your version of the directory below.
    Acrobat 9
    /Macintosh HD/Users/USERNAME/Library/Application Support/Adobe/Acrobat/9.0_x86/JavaScripts/
    Acrobat X
    /Macintosh HD/Users/USERNAME/Library/Application Support/Adobe/Acrobat/10.0/JavaScripts/
    Acrobat XI
    /Macintosh HD/Users/USERNAME/Library/Application Support/Adobe/Acrobat/11.0/JavaScripts/
  2. Move “PracticalPDF_PortfolioUtilities_v2.1.js” to the “JavaScripts” folder.
  3. Restart Acrobat if it’s running.

34 Responses to PDF Portfolio Layouts, Themes and Tools

  1. Jean-Renaud Boulay January 22, 2012 at 6:09 pm #

    Great job!
    I like these nice Layouts

  2. Dust K March 1, 2012 at 4:53 pm #

    How do I remove your “Practical PDF” logo from the Nav? I appreciate the work you are doing, but I can’t use these layouts with that logo on it. Thanks!

    • Anonymous March 1, 2012 at 6:49 pm #

      This is what I do for a living. I can remove the Practical:PDF logo for a small fee and other customizations as part of a consulting engagement. The free versions have my advertising.

  3. Anonymous March 16, 2012 at 5:49 pm #

    When I click on the link to download, it downloads as an htm file and not a nav file. How do I convert it?

    • Anonymous March 19, 2012 at 5:40 pm #

      You can rename the file name and change the “.htm” file type to the “.nav” file type.

    • Anonymous March 19, 2012 at 5:45 pm #

      Simply rename it to .NAV and then you can install it. Can you let me know what browser you are using?

    • Joel_Geraci November 15, 2012 at 7:51 pm #

      Try right-clicking and save the linked file with a .nav extension.

  4. Chanda Szczeblowski April 16, 2012 at 7:26 pm #

    Hmm… not able to customize the splash screen… Followed your instructions above but it doesn’t save….

    • Joel_Geraci April 16, 2012 at 9:59 pm #

      Be sure the welcome screen is open when you save the PDF file.

  5. Hannah Boughton April 18, 2012 at 3:15 am #

    Hi, thanks for the great layouts. A quick question: I’ve got a Acrobat 9 portfolio, with every item in it having a description (i.e. in the ‘i’ information section of the files). Is there a way to get that information to display automatically in your text boxes, or do I need to copy + paste it all out?
    Thanks, Hannah

    • Joel_Geraci April 23, 2012 at 5:25 pm #

      Unfortunately, you’re going to need to copy/paste any information that doesn’t show up automatically. I am working on a way to pull the metadata out of the PDF files though. I hope I can get it to work.

  6. aholman23 June 20, 2012 at 4:18 pm #

    Hello, First I want to say thank you for the great layouts. I am using the CoolList Layout and I am trying to figure out what the “down arrow” button is supposed to do when clicked? When I click on it, it does nothing. I am new at this sorry if this is a stupid question.

  7. 1dufflebag June 26, 2012 at 11:03 pm #

    Joel, is there a sample grid layout anywhere with a welcome screen? thank you for all your work.

    • Joel_Geraci July 26, 2012 at 4:18 pm #

      Not at this time but I can easily create one. Give me a week or two and check back.

      • 1dufflebag July 26, 2012 at 6:27 pm #

        thank you very much, please message again if you throw together a sample like that. In the mean time I have been toying around with creating a separate PDF that acts as the welcome screen, and found a Java script that sends the portfolio directly to that open screen when the user opens the file. The issues are I dont know the first place to maintain anything java and there its not as intuitive as a welcome screen for the user to close. The plus is its a larger screen than the old welcome view. I hope Adobe brings that feature back stock in the program.
        again- appreciate your reply.

  8. Julia Allen June 28, 2012 at 9:01 am #

    When you add a folder can you add a description to the folder?

  9. Julia Allen June 28, 2012 at 9:05 am #

    When you add a folder can you add a description to the folder?

    I can see the grey description box but can’t seem to add text, please let me know if this is something you would open up…..even for a fee.

  10. C_Redfield July 4, 2012 at 6:38 pm #

    Thank you for sharing your layouts! I’d like to use the Glossy black frame theme (for Upslide layout) but I’m afraid the users won’t notice the folder path bar. Is there any way I can change the font color? Thank you !

    • Joel_Geraci July 26, 2012 at 5:24 pm #

      I’m in the process of updating all of the layouts to have more configurable options. Check back in a few weeks.

  11. Thien Pham September 25, 2012 at 12:44 am #

    Can I get project source files

    • Joel_Geraci September 25, 2012 at 1:30 am #

      Thien: This is what I do for a living. It wouldn’t be helpful for me to release the source code.

  12. Mathias Göbel October 30, 2012 at 5:06 pm #

    Very Nice one, where to edit the Welcome Msg?

  13. Mathias Göbel October 30, 2012 at 5:06 pm #

    By the way I’m unsing The CoolList 2.0

  14. David Lee Kim November 15, 2012 at 2:19 pm #

    I’m unable to open this grid file layout as this is showing as an .htm file with .nav in the file name but having no bearing on what type of file it acts like. How can I get this to work on my adobe xi?

  15. Itamar Mariano November 29, 2012 at 7:37 pm #

    what size to put a background image in pdf portfolio

    • Joel_Geraci December 17, 2012 at 6:15 pm #

      You have lot of control over how the image background is positioned and scaled. I generally use a 1200 x 1600 image for a background that covers the entire layout but you can have very tiny files used as tiles.

  16. Heather Stone December 7, 2012 at 5:39 am #

    Joel–Great layouts. Thank you. I’m a novice, so this is probably a dumb question. On the Upslide layout, I can’t figure out how to edit the header and footer to actually input text or images in them. What’s the trick? I thought double-clicking would do it, then I looked for an edit or text box button. Then I poked on everything I could find,but I am still clueless . . .

    • Joel_Geraci December 17, 2012 at 6:13 pm #

      Heather: The text in the header of the example portfolio is actually an image so it’s not editable. You can delete the image and then add a text box via the Properties panel on the right. Same thing with the footer.

  17. Joe Proctor January 19, 2013 at 1:29 pm #

    Can you make a portfolio that replicates a digital magazine? So it only shows two pages and they have a flip type animation? I would pay for that.

    • JoelGeraci July 19, 2013 at 3:09 pm #

      Joe: I could probably build such a thing but there are other tools out there that already do this with PDF files. Flashbook for example. I’d recommend trying one of those.

Leave a Reply

Powered by WordPress. Designed by Woo Themes