15 January 2013
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
Other required products
Library and Store API v2
"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.
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.
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.
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.
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.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.