In the <Style | Web Viewer Layout> menu, you can create your own web viewer layout.

The <Web Viewer Layout> menu is only visible to a user with the “Create Style” role.

What is a Web Viewer Layout?

A web viewer layout is the shape of your web viewer. Considering the characteristics of your company or organization, you can properly change the web viewer layout which is provided as default.

Internally, users can use CSS(Cascading Style Sheet) to process the web viewer layout information but they don’t need to understand the structure of CSS.

Among various web viewer components, you can set the styles of the following items.

Web Browser Title
Full Screen
3 levels of Top Panel
Navigation Panel that shows the table of contents and the search results
Main Panel excluding the top panel and the navigation panel
Content Panel that is occupied by the content of your created document

Creating a Web Viewer Layout

You can create your web viewer layout in the following order.

Go to the <Style | Web Viewer Layout> menu.
Click on the <Create Web Viewer Layout> link.
Enter the basics in the input form and click on the <Save> button.

Determine the basic shape of your web viewer according to the selected template.

Editing a Web Viewer Layout

Once the content is changed, the <Save Now> button is activated. You must click on this button to save the changes that you have made.

Full Screen

Web Browser: Set your web browser title.
Background: Set the background color and the background image.

When you set the background image, you can specify the start location of the image and whether to repeat it.

Top Panel

The top panel is comprised of three panels and you can set each panel’s height, bottom border and background.

Height: You can set the panel height.

If you want to hide a specific panel, then you have to set its height to “0”.

Bottom Border: You can set the border to distinguish it from other panels.
Background: You can set each panel’s background color and image.

Top Objects

In the top objects menu, you can configure logo, book title and tools.

Generally speaking, the top objects are placed in the top panel. However, you do not need to limit its location to within the top panel.

Logo: You can set the logo image and location.
Book Title, Tool: You can set the fonts and the location.

Navigation Panel

You can set the style of the navigation panel that displays the table of contents and the search results.

When you set the style, you can use different styles to the navigation panel(entire navigation panel), the navigation header and the navigation content.

Background: You can set each panel’s background color and image.
Top Padding: You can adjust the top padding and place different objects in the location.
Move to Book Summary: You can set the shape and location of the tool that helps you to move to the first page of your book.
Search Tool: You can set the style of the search tool that includes the search keyword input fields.

Main Panel

You can set the style of the main panel(areas in the web viewer excluding the top panel and the navigation panel).

Background: Set the background color and the background image.

Size Adjustment Panel

You can set the style of the line that separates the navigation panel from the main panel.

Width: You can set the width of the line.
Background: Set the background color and the background image.

Content Panel

You can set the style of the content panel that is occupied by the content of your document.

Width: You can set the width of the content panel.
Background: Set the background color and the background image.