Loading...

Using External Files with HTML5

Because Export Kit allows you to customize your HTML5 Content before export, you can add both custom CSS and JavaScript. This can further enhance your Output to incorporate your existing code.

NOTE: All layer names will follow the Layer Naming Rules:

PSD layer name: My Layer Name
JS/CSS element name: my_layer_name

Step-By-Step Video


Need a visual? Watch our step-by-step tutorial!

Watch more video tutorials.

External Javascript

You can add external JavaScript to your Custom HEAD by using the HTML script tag.

Eg: <script src="myscripts.js"></script>

Once you add the script tag to your Custom HEAD, the Output will process the external JavaScript as normal in any website.

Using External JavaScript

Your JavaScript files can take-over any layer element in your PSD file. You can use JavaScript to control all aspects of your Output including button actions, events and animation.

Eg. Assume you have a layer in your PSD named “Custom Gallery”, you can use external JavaScript to take over the PSD element by using:

JavaScript: document.getElementsByName('custom_gallery')
jQuery: $('#custom_gallery')

External CSS

You can add external JavaScript to your Custom HEAD by using the HTML link tag.

Eg: <link rel="stylesheet" type="text/css" href="mystyles.css" />

Once you add the link tag to your Custom HEAD, the Output will process the external CSS as normal in any website.

Using External CSS

Your CSS files can take-over any layer element in your PSD file. You can use CSS to control all visual aspects of your Output.

Eg. Assume you have a layer in your PSD named “Home Button”, you can use external CSS to take over the PSD element by using:

#home_button{}

Virtual Scripts (Advanced)

You can add any custom HTML, CSS, JavaScript or PHP code to this folder and Export Kit will auto-load the content into Virtual Scripts. You can copy any external file into your web-templates, add a few Script Tags, and modify the code directly in Photoshop – for any project without linking additional files.

Learn more about Creating Virtual Scripts.
LOGIN NOW: You need to login so your progress is tracked with Online Training - click here.

Products For Android Professionals


android_pack

Android Pack

android_pack

Android Pack (6 Months)

android_pack

Android Pack

Need a custom solution?

Try our Shop!

Using the Plugin

Layer Support

Layer Tags

How To Guides

Optimization Tips

Help Us Improve


We aim to keep our content relevant with useful information, examples, samples and links. Tell us what you think!

I found the content:

Helpful
Confusing
Outdated
Broken Links
Bad Spelling
Too Short
Too Long

This page needs:

Nothing
Better Content
Links
Examples
Videos

Free Download


Cheat Sheet

A full sample of our support for text, shapes, images and effects.

Start Your 14 Day Free Trial

New users get instant access to the 14 Day Free Trial with all features enabled, and Free Online Training. We guarantee your first conversion will 100% work - we work with you to ensure this, contact us or check our FAQs for assistance.

Connect With Us

Top
Lightning Storm version v17.0216.05 releasedLearn More