PG Software Development

The look and feel of your pages can be infinitely customizable without using extensive graphics. The key is to leverage some PowerPac functions and CSS3 stylesheet properties which are availalbe in all HTML 5 browsers.

The following PowerPac functions provide sophisticated styling options for TooBook backgrounds:

1. setBrowserWindowStyles()
2. setPageContentPosition()
3. pgStyleObject()

Let's explore how to make our page look like this screen shot:


How to do it:

1. Start a NEW, PowerPac-enabled project. Set the size of the page to 11745 x 8085 units (or whatever is suitable for your project). Then, choose a color for your background object.
   

   

   Choose a color for the background object

   choosecolor.png (89.77 KiB) Viewed 5441 times

   
   
2. For the on book load action of the book, run setBrowserWindowStyles() to set the background window graphic and style.
   

   

   setBrowserWindowStyles()

   onbookload.png (46.03 KiB) Viewed 5441 times

   
   
3. For the on page load action of the first page of the book, run setPageContentPosition() with the following parameters to set the page position and enlarged size to allow for a CSS3 shadow effect:
   

   

   setPageContentPosition() parameters

   setPageContentPosition.png (27.72 KiB) Viewed 5437 times

   
   
4. Immediately following the above action, run pgStyleObject() and set the following CSS3 styles using the name of the page as the target for the styles.
   NOTE: Change 783px and 539px to match the page size of your book in pixels. (conversion formula: [page units] / 15)
   

   

   pgStyleObject() styles

   pgStyleObject_1.png (46 KiB) Viewed 5437 times

   
   

   

   pgStyleObject() style values

   pgStyleObject_2.png (46.64 KiB) Viewed 5437 times

   
   
5. Using the DHTML Export Tree Manager, add the browser window graphic to the export tree in the media folder.
   

   

   Add Browser window graphic to export tree.

   exportManager.png (99.3 KiB) Viewed 5437 times

   
   
6. Publish the page and view it in your favorite browser. The result should look like the screen shot at the beginning of this post.

Of course, you can change (or add) any style properties (e.g.: borderRadius and boxShadow or page position) to achieve results that suit your project theme.

The only resource we used is the purple graphic which styles the window. Everything else is handled by the HTML 5 browser as CSS3 stylesheet properties.