Prerequisite knowledge
Experience working with the Adobe Digital Publishing Suite is required. This article assumes you have published public folios and have read HTML implementation of the default library.
 
 
User level: Intermediate
 
Required products
Other required products
 
  • Mac OS X - Used to view the template on the desktop with Safari.
 
 
Documentation
Library and Store API v2
Sample files

default_library_v1.zip
 
View on github
By downloading software from the Adobe Web site you agree to the terms of our license agreement. Please read it before downloading.
 
The sample files in the article HTML implementation of the default library contain an HTML library custom slot implementation that can be used in the DPS viewer. The template enables you to add a custom tab in the viewer that functions as a library using version 2 of the library and store APIs. This functionality is available to all enterprise customers of the Adobe Digital Publishing Suite through the use of custom navigation slots. As of DPS r22, publishers can replace the default library using their own implementation. These custom slots are implemented using HTML, CSS, and JavaScript. Using code, you can access APIs that allow you to duplicate e-commerce functionality found in the default library and customize it to fit your project. This article will provide tips on how to style the library using Dreamweaver.
 

 
Getting started

Begin by downloading the sample files that are provided in the HTML implementation of the default library article. The sample files contain the HTML implementation of the default library. See Figures 1-3  from that article for the various views of the library from the DPS viewer.
 

 
Viewing the files in Dreamweaver

  1. Launch Dreamweaver CS 6 and open index.html.
  2. Comment out or remove line 10:
    <script src="AdobeLibraryAPI.js"></script>
    This include is for the DPS library API, which contains a bridge protocol that prevents the page from displaying. The API is used to retrieve folio data, preview images, and conduct transactions. On the desktop, when the API is removed, folio data is returned from the DPS fulfillment XML feed and transactions are not enabled.
  3. To view your folios on the desktop, open Config.js and locate FULFILLMENT_URL. Change the value after "accountId=" to match your accountId. If you need help finding your accountId, see the section titled "Connecting to fulfillment" in Building a custom storefront. You do not need to change the accountId if you would like to use the published folios from the provided account. Keep in mind that this accountId is for desktop testing and is not used in the viewer.
  4. In the document toolbar, click "Live" to view a live rendering of the template (see Figure 1). If your document toolbar is not open, select View > Toolbars > Document.
Figure 1. The live view in Dreamweaver.

Figure 1. The live view in Dreamweaver.

 

  1. At the bottom of the live panel, select 100%, the Tablet size icon and 768x1024 from the window size menu (see Figure 2).
Figure 2. View properties at the bottom of the live panel.

Figure 2. View properties at the bottom of the live panel.

 

 
Changing styles in Dreamweaver

To change the styles in Dreamweaver, verify that your CSS Styles panel is open. If it is not, select Window > CSS Styles. To change a style in Dreamweaver, select the item in the live view and then update the style you would like to change. The following are a few examples of how to change certain parts of the view.
 
 
Changing the title
If you would like to change the styles for the "Local" title, click the word and the CSS Styles panel will update (see Figure 3). To change the actual title, open AppView.js and navigate to line 127.
 
Figure 3. Styles for the "Local" title.

Figure 3. Styles for the "Local" title.

 

 
Changing the right banner image
If you would like to change the right banner image, click the right portion of the banner and the CSS Styles panel will update (see Figure 4). To update the image, double-click url("banner_right.png") and browse to the image with which you would like to replace it. Alternatively, you can replace the image on the file system. Keep in mind that the dimensions for the image are 458×140 pixels unless you change it.
 
Figure 4. Styles for the right side of the banner.

Figure 4. Styles for the right side of the banner.

 
Changing the grid background
If you would like to change the background of the grid, click anywhere in the grid and then, in the lower left corner of the window, click <div#grid> from the Tag selector (see Figure 5), which will update the CSS Styles panel. To update the image, double-click url("bg_portrait.png") and browse to the image with which you would like to replace it. Alternatively, you can replace the image on the file system. Since a different background is used for portrait and landscape orientations, you will need to switch orientations for the page and turn off or on Live view by toggling the Live button to refresh the styles.
 
Figure 5. Tag selector in the lower left corner of the Dreamweaver window.

Figure 5. Tag selector in the lower left corner of the Dreamweaver window.

 

Figure 6. Styles for the grid.

Figure 6. Styles for the grid.

 
Where to go from here

This article gave you an introduction on modifying the template's CSS using Dreamweaver. To learn more about Dreamweaver and CSS, go to the Dreamweaver Developer Center for CSS.