Style Settings: Pop-ups
Updated over a week ago

A Style is set at document level and will apply the settings to every version in a document. Different styles or document settings cannot be applied to individual versions.

When you create a new style there are several tabs that can be selected to set various settings.

  • Details - Setting the name and status of the style

  • Document Size - Manage how your document will be sized

  • Document View - Manage how the pages of your document are presented

  • Toolbar - Configure the functionality and appearance of the toolbar

  • Pop-ups - Choose the settings for how interactivity pop-ups will appear

  • Background - Choose the settings for the background behind the document

  • Chart Settings - Configure the appearance of chart interactivity

  • Page Turn - Manage the settings for the page turn automation

  • Used By - Enables you to view which documents are using the style

Below is a breakdown of Pop-up settings.

Here you can choose the settings for how interactivity pop-ups will appear.

Text

  • Heading Font
    Choose the heading font from the available fonts.

  • Heading Text Colour
    Choose the heading text colour.

  • Body Font
    Choose the body font from the available fonts.

  • Body Text Colour
    Choose the body text colour.

  • Link Colour
    Choose the link colour. This will be the colour for any links you enter within a pop-up.

Buttons

  • Button Colour
    Choose the button colour.

  • Button Text Colour
    Choose the button text colour.

Borders & Backgrounds

  • Border Colour
    Choose the border colour. You can amend the width of the border within designer interactivity settings.

  • Background Colour
    Choose the background colour of the pop-up.

  • Background Logo - 1
    Add a logo to the top right section of your pop-up. Supported image types: jpg & png.

  • Background image - 2
    Add an image to the bottom right section of your popups. Supported image types: jpg & png. Please note, for best results you should size your image to the pop-up size.

Horizontal Rule

  • Horizontal Rule Colour
    Choose the horizontal rule colour. This horizontal rule can be applied to a More Information pop-up.

  • Horizontal Rule Width
    Choose the horizontal rule width. This may be specified in either %, px, em, rem. For example, 100% will be full length

50% will be half the length

Tables

  • Table Body Background Colour
    Choose the table body background colour.

  • Table Border Colour
    Choose the table border colour.

  • Table Heading Background Colour
    Choose the table heading background colour.

  • Table Heading Text Colour
    Choose the table heading text colour.

Important! HTML needs to be used in order for the table heading background colour and text colour to take effect.
โ€‹

To do this, you would add a table to more information interactivity and then amend the source code. Select the source code option as highlighted below and the source code pop-up will open.

The source code for the table will need to be altered by changing td to th in the code - see highlighted example above and text below:

<table>

<tr>

<th>this is a heading</th>

<th>this is a heading</th>

</tr>

<tr>

<td>paragraph</td>

<td>paragraph</td>

</tr>

<tr>

<td>paragraph</td>

<td>paragraph</td>

</tr>

</table>

Did this answer your question?