Styling the HTML library template with Dreamweaver

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.

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.

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.

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

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.

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.

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.

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.