Theming the WebReader HTLML5

Presenting the reader structure

Take a look at the reader structure :
Image

In the export preferences panel you will see a section “Customize Reader”. You can direct your custom URLs to the files you have hosted (see previous section). If you leave the section blank, it will be automatically filled with default values.

Image

Now export your document with the new/modified export preferences and you’re done! The published document will use your custom reader files.

I hope you are as excited as I am to see the new HTML 5 output inside the Aquafadas toolset.
As always, have fun trying out our new tools, and please contact us if you have any questions.

I’m Rob Underwood,

Thanks for watching!The “OEBPS” folder contains files related to the document. The “reader” folder contains the core files that are common between documents.

Editing the HTML reader styles

The only file we’ll be interested in is “theme.css” located in the reader folder. This is a template presenting all the styles you can edit safely: mainly the color and the icons of the reader:

It is divided into three sections : colors, icons, and high DPI icons.

For the color section, you can use standard CSS color notation to replace default ones (http://www.w3schools.com/cssref/css_colors.asp).

As for the icons, the default values are relative URLs, but you are also able to specify absolute URLs.

The high DPI icons are displayed in place of standard icons on devices with a high density of pixels (like Apple’s Retina devices). They are the same as standard icons, but with doubled definition.

Please note that when you replace an image, the new image must be of the same size.


Sharing a reader and/or theme across multiple documents

To simplify the theming/updating process, it is possible for multiple documents to share the same reader files.

To share a reader, two steps are required:

1) Host reader files on a web server

The files needed are the reader core (reader.min.js), which includes reader images/icons, and the reader styles (reader.css and theme.css). Please note that you can share a theme without sharing core files and vice-versa.

2) Set reader location in export preferences

In the Project Manager of the Aquafadas InDesign plugin, in the generation panel, click the edit button on your current export preference, or create a new one if you wish.

ImageImage




Is this article helpful for you?