Using CSS3 Styles on the ToolBook Background

Actions you can use in your projects.

Using CSS3 Styles on the ToolBook Background

Postby Clifton » Wed Oct 07, 2015 4:31 pm

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:

Graphic1.png
Author to Published Screenshots (HTML 5 with CSS3 styles applied)
Graphic1.png (97.22 KiB) Viewed 4507 times

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.
    choosecolor.png
    Choose a color for the background object
    choosecolor.png (89.77 KiB) Viewed 4507 times

  2. For the on book load action of the book, run setBrowserWindowStyles() to set the background window graphic and style.
    onbookload.png
    setBrowserWindowStyles()
    onbookload.png (46.03 KiB) Viewed 4507 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.png
    setPageContentPosition() parameters
    setPageContentPosition.png (27.72 KiB) Viewed 4503 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_1.png
    pgStyleObject() styles
    pgStyleObject_1.png (46 KiB) Viewed 4503 times

    pgStyleObject_2.png
    pgStyleObject() style values
    pgStyleObject_2.png (46.64 KiB) Viewed 4503 times

  5. Using the DHTML Export Tree Manager, add the browser window graphic to the export tree in the media folder.
    exportManager.png
    Add Browser window graphic to export tree.
    exportManager.png (99.3 KiB) Viewed 4503 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.
Attachments
WindowJPG.zip
Window jpg graphic
(84.35 KiB) Downloaded 412 times
Clifton
Site Admin
 
Posts: 731
Joined: Tue Jan 14, 2014 1:04 am

Return to Action Editor Examples

Who is online

Users browsing this forum: No registered users and 1 guest

cron