Today's Course Outline

1. Why Extend?
2. Adding CSS
3. Adding JavaScript
4. Where to Find Code Snippets

Why Extend?

When you export content from InDesign using in5, the sky is the limit on what you can create.

Would you like to create a custom menu? Custom page scaling? Do something that would be impossible with InDesign alone?

You can extend your output by attaching CSS, JavaScript, HTML, or other content in the Resources section of the in5 export dialog (found under File > Export HTML5 with in5... within InDesign). Your customization will then be written into the output.

You can write your own code, hire a web developer to write code for you, or grab some the of pre-written snippets that are already available.

The sky is the limit when publishing HTML with in5

Adding CSS

Cascading Style Sheets (CSS) are used to visually style HTML content. CSS can be added to change the look of your output.

Local CSS Example — Change the "Content Loading" Message

Some in5 users have asked if there is an easy way to change the "Content Loading" message (i.e., to a different language).

Yes, there is. Let's take a look at it right now.

The first step is to copy the code that you need.

#loadIndicator span:after { content:' My special message'; }

Next, choose File > Export HTML5 with in5... and navigate to the Resources section of the in5 dialog.

Click the plus sign (+) in the CSS section.

Choose the Paste option and in5 will automatically populate the textbox with the code from your clipboard.

Give the code a name at the bottom (optional) and click Save and Apply.

in5 will automatically create a file from your code and add it to your Resource list.

Click OK to export and view your content.

Your custom message can be seen as the page loads.

Once you've set up a resource, it will be retained each time you export this document. The same CSS file can also be attached to other documents.

Remote CSS Example — Using Google Fonts

Google Fonts is a free service that lets you embed fonts for any device. Google Fonts serves up whatever type of file is needed by the browser.

Font licensing is one of the more complex aspects of digital publishing, but Google Fonts makes it easy. All Google Fonts are free and licensed for digital use.

To use Google Fonts with in5 follow the steps below.

1. Choose the Font Family and Font Weights that you'd like to use in your project.
2. Download the font(s).
   
3. Add the font(s) to your system (using Font Book on Mac or using the right-click menu on Windows).
4. Open InDesign and apply the font family to your text (or better yet, your Paragraph Style).
   
5. Choose File > Export HTML5 with in5... and navigate to the Resourses section.
6. Copy (just) the URL from Google Fonts.
   
7. Click the plus sign (+) to add a new CSS resources, paste in the URL, and click Add.
   
8. Export and view.

Here are the same steps in video form.

Other CSS Customization Examples

• Add blinking animation to navigation arrows
• Change the size of the navigation arrows
• Set a maximum width for liquid layouts

Adding JavaScript

The steps to attaching JavaScript files are the same as adding CSS files.

1. Choose File > Export HTML5 with in5... and navigate to the Resourses section.
2. Click the plus sign (+) next to the JavaScript heading.

From there you can add a remote URL (like a hosted JavaScript library or jQuery plugin), paste code, or attach a local file that contains customizations.

Custom Menu Example

This video shows how CSS and JavaScript can be used to create a different type of experience with the same content.

Highly Requested JavaScript Snippets

• Smooth Swiping for the Slider Page Format
• Desktop Scaling (fill browser with page) - now a built-in feature
• Reset an MSO on page change - now a built-in feature

Where to Find Code Snippets

You can find additional snippets (and post requests) on the in5 Answer Exchange.